AndroidにおけるFragment機能の応用

前回のおさらいと今回のテーマ

前回の記事「Androidアプリのイベント処理とFragment」では、Androidアプリのイベント処理の基本とFragment機能の概要・サンプルアプリを作成しました。AndroidにFragment機能が追加された背景が理解いただけたかと思います。

今回は、前回作成したサンプルアプリをもとにFragment機能について掘り下げます。

実際のアプリでFragment機能をどのように利用するかを説明し、Fragmentに振る舞いを持たせる方法を説明します。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

Fragmentに振る舞いを持たせる

前回作成したサンプルアプリを使ってみると気になる点がいくつかあると思います。例えば、

• 左側のリストをタップしても、「読み込み中」などの表示が出ないため、反応したかどうかがわかりづらい
• Webページでリンクをクリックしたら、ブラウザが起動される
• 戻るキーを押したら、前に表示していたWebページに戻ると思っていたのにアプリが閉じてしまう

などなど、実際に使ってみるといろいろと気になります。

今回は上記の気になる点を修正するため、前回作成したサンプルアプリを修正します。

修正する前に…

上記の気になる点を修正するためには、2つの方向性があります。

• 画面の左側・右側を構成するFragmentを修正し、上記の振る舞いをFragmentに持たせる
• Activityを修正し、上記の振る舞いを持たせる

いまのサンプルアプリはActivityに全ての振る舞いを記述しています。実際のソースコードを見てわかる通り、Webページを表示する処理はActivity内に記述されており、画面左側のURL一覧をタップした際のイベントハンドラ内に画面右側のWebページを表示する処理が記述されています。

そのため、画面を構成する2つのFragmentが強く結びついてしまい、もしスマートフォン用に画面を分けることになった場合の対応が困難です。2つのFragmentの間でやりとりしなければいけないデータはURLだけですので、今回はFragmentを修正して対応し、ActivityはFragment間のデータ受け渡しを行う形に修正します。

Fragmentの修正

振る舞いを記述する前にまずはFragmentを修正し、Fragment間の結びつきを弱くしましょう。修正する点は以下の通りです。

• 画面左側のリストはActivityから表示する一覧のデータをもらい、タップされたURLを通知する
• 画面右側のWebページ表示はActivityから渡されたURLを表示する

Webページ表示用Fragmentの修正

まずは画面右側のWebページ表示用のFragmentを修正しましょう。ActivityからURLを渡せるように MyWebViewFragment.java に以下のメソッドを追加します。

  public void loadUrl(final String url) {
    getWebView().loadUrl(url);
  }

メソッドを追加したら、それに合わせて HelloFragmentActivity.java も以下のように修正します。

修正前:

  // 画面左側のリスト項目をタップしたときのイベント処理
  listFragment.getListView().setOnItemClickListener(
    new ListView.OnItemClickListener() {
      public void onItemClick(AdapterView<?> listView, View v,
          int pos,
          long id) {
        // タップした位置のURLを取得し、画面右側に表示させる
        Map<String, String> m = (Map<String, String>) adapter
          .getItem(pos);
        wvf.getWebView().loadUrl(m.get("url"));
      }
    });

修正後:

  // 画面左側のリスト項目をタップしたときのイベント処理
  listFragment.getListView().setOnItemClickListener(
    new ListView.OnItemClickListener() {
      public void onItemClick(AdapterView<?> listView, View v,
          int pos,
          long id) {
        // タップした位置のURLを取得し、画面右側に表示させる
        Map<String, String> m = (Map<String, String>) adapter
          .getItem(pos);
        wvf.loadUrl(m.get("url"));
      }
    });

ハイライト表示の箇所が変更箇所となります。

これでちゃんと動作するかを確認しましょう。前回のサンプルアプリ同様、左側のリストをタップするとWebページが表示されることを確認してください。