Androidアプリで画像ギャラリーを実現する

Web APIで楽々Androidアプリ（13）

グリッドビュー設定、カラム数の動的変更、拡大画像画面の追加

　最後に、FragmentクラスのInstagramFragmentにコードを追加していきましょう。なおここで示しているコードは、前回説明した部分など適宜省略しています。

リスト6　MainActivity.java

public static class InstagramFragment extends Fragment
                implements LoaderCallbacks<String>, OnRefreshListener {

    // Instagram URL保持クラス
    private ImageInfoList image_list =
            new ImageInfoList("https://api.instagram.com/v1/tags/akb48/media/recent?client_id=XX");

    // Instagram API解析クラス
    private ParseInstagramImage parse = new ParseInstagramImage(this.image_list);

    private GridViewAdapter grid_view_adapter = null;

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {

        GridView gv = (GridView)getView().findViewById(R.id.gridView);

        // カラム数を設定する（縦横向きに応じて値を変える）（1）
        gv.setNumColumns(getResources().getInteger(R.integer.num));

        final ImageView im =  (ImageView)getView().findViewById(R.id.imageView);
        gv.setOnItemClickListener(
                // グリッドビューのクリックリスナー（2）
                new OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView<?> parent, View view,
                                                       int position, long id) {
                        grid_view_adapter.setStandardImage(position,im);
                        // 拡大画面を表示する
                        im.setVisibility(View.VISIBLE);
                    }
        });

        ((ImageView)getView().findViewById(R.id.imageView)).setOnClickListener(
                // 拡大表示画面のクリックリスナー（3）
                new OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // 拡大画面を非表示にする
                       im.setVisibility(View.INVISIBLE);
                }
        });

        // 初回の起動時（4）
        if (this.grid_view_adapter == null) {
            this.swipeRefreshLayout.setRefreshing(true); // アニメーション開始
            onRefresh(); // 更新処理
        }
        // 画面が回転されたとき（5）
        else {
            setAdapter(gv);
        }
    }

    // グリッドビューアダプターを作成して、グリッドビューに関連づける
    private void setAdapter(View view) {
        this.grid_view_adapter =
             new GridViewAdapter(getActivity(),this.image_list.getImageinfo());
        ((GridView)view).setAdapter(this.grid_view_adapter);
    }

    // loaderの開始
    private void startLoader(int id) {
        getLoaderManager().restartLoader(id, null, InstagramFragment.this);
    }

    // 取得データの更新
    @Override
    public void onRefresh() {
        // 画像リストをクリアする
        this.image_list.clear();
        // ローダーの起動
        startLoader(0);
    }

    @Override
    public void onLoadFinished(Loader<String> loader, String data) {
        if (data == null) return;
        this.parse.loadJson(data); // APIのレスポンスを解析する

        if (this.grid_view_adapter == null) {
            // アダプタをビューに関連づける
            setAdapter(getView().findViewById(R.id.gridView));
        }
        // ローダーIDが3より大きいとき（3回更新されたので更新を終了する）（6）
        if (3 < loader.getId()) {
            this.grid_view_adapter.notifyDataSetChanged(); // 表示の更新（7）
            this.swipeRefreshLayout.setRefreshing(false);
        }
        else {
             // ローダーのIDに1を追加して再度URLを取得する
            startLoader(loader.getId() + 1);
        }
    }
}

　onActivityCreatedメソッドでは、フラグメントの初期設定を記述しています。

　まず、グリッドビューのsetNumColumnsメソッドで、columns.xmlで指定した数を列に設定しています（1）。またsetOnItemClickListenerメソッドで、グリッドビューのアイテムがタップされたときの処理を設定しています（2）。grid_view_adapterのsetStandardImageメソッドを呼び出し、レイアウトで指定した拡大画面用のビューに、拡大画像を設定しています。

　そしてその画面がタップされたときの処理は、setOnClickListenerで指定しています。ここでは、単に非表示にしているだけです（3）。

　最後に、フィールドのgrid_view_adapterをチェックして、起動時か画面回転時かを判断しています（4）。起動時は、ローダーを起動し、画像のURLを取得します。画面回転時は、グリッドビューがいったん破棄され新しくなっていますので、再度アダプターを関連づけています（5）。

　onLoadFinishedメソッドでは、画像のURLの取得後の処理を記述しています。前回書いたように、1回のAPIアクセスで取得できるURLの数は20しかないため、ここでは、ローダーのIDの数を利用し、連続3回URLを取得するようにしています（6）。

　計60個のURLを取得できたら、グリッドビューのnotifyDataSetChangedメソッドを実行して、グリッドビューの表示を更新するようにします（7）。

最後に

　今回の画像ギャラリーアプリは、いかがでしたでしょうか。Web APIで楽々Androidアプリの連載も今回で最後となりました。

　Web APIをうまく利用すれば、いろいろなサービスを手軽に実装することができます。この連載記事が、みなさんのアプリ作成に少しでもお役に立つことができれば幸いです。