FragmentTransaction機能とアプリをリリースする上での心構え

連載 :

2012年2月3日(金)

MyWebViewFragmentの修正

まずはMyWebViewFragmentを修正しましょう。

前回までのサンプルアプリでは画面右側のFragmentは必ずMyWebViewFragmentでした。しかし、先ほどの修正を加えた結果、画面右側のFragmentはMyDetailViewFragmentとなることもありえます。ですので、MyWebViewFragmentはWebページを表示することだけに専念して、戻るキーを押した際のページバックの処理は他にまかせることにします。

MyWebViewFragmentからgoBack()メソッドとloadUrl()メソッドを消して、URL文字列を引数に取るコンストラクタを追加しましょう。

`1`	`private final String url;`

1public MyWebViewFragment(final String url) {
2  this.url = url;
3}

MyWebViewFragmentが表示された際にコンストラクタで渡されたURLを表示するため、onActivityCreated()メソッドに以下のコードを追加します。

1if (url != null) {
2  getWebView().loadUrl(url);
3}

goBack()メソッド、loadUrl()メソッドを削除したことで、他のクラスでエラーが出ていると思いますので修正します。まずはloadUrl()メソッドを使っていた箇所から修正しましょう。

HelloFragmentActivityのMyListFragment.UrlClickListner()を設定している箇所を以下のように修正します。

01listFragment.setUrlClickListener(new MyListFragment.UrlClickListener() {
02  @Override
03  public void onUrlClick(final String url) {
04    MyWebViewFragment webViewFragment = new MyWebViewFragment(url);
05    FragmentTransaction tran =
06      getFragmentManager().beginTransaction();
07    tran.replace(R.id.fragment2, webViewFragment);
08    tran.addToBackStack(null);
09    tran.commit();
10  }
11});

また、onBackPressed()メソッドを以下のように修正します。

1@Override
2public void onBackPressed() {
3  if (getFragmentManager().getBackStackEntryCount() == 0) {
4      finish();
5  }
6  getFragmentManager().popBackStack();
7}

上の2つの修正により、これまでMyWebViewFragmentで行っていた画面遷移の制御をFragmentTransactionによる制御に変更しています。

FragmentTransaction機能は、Fragment間の画面遷移や遷移時のエフェクトを制御する機能です。表示するFragmentを切り替えたり、切り替えたFragmentをActivityのようにスタックに積み(addToBackStack())、あとから戻れる(popBackStack())ようにしたりする機能が備わっています。

これにより、Fragmentの種類がどんなものであっても、そのFragmentの実体を意識せずに画面遷移や戻る遷移が実装できるようになります。

FragmentTransaction機能を使うことで画面遷移などの制御はできるので、Fragmentを使う場合は、Fragment間のつながりや特定のFragmentに依存するコードは極力使わないような設計にすることが望ましいと思います。

最後に、MyWebViewFragmentは引数つきのコンストラクタを持つようになったため、レイアウトXMLファイルに直接MyWebViewFragmentを記述することはできません。ですので、layoutフォルダ内のmain.xml内のMyWebViewFragmentを設定していた箇所を以下のように修正してください。

1<FrameLayout
2  android:id="@+id/fragment2"
3  android:layout_height="match_parent"
4  android:layout_width="0dp"
5  android:layout_weight="3"/>

これでアプリを実行してみてください。前回のサンプルアプリと同様の挙動となりますが、若干動きが重くなっているかと思います。これはアイテムをタップする毎にMyWebViewFragmentを生成しているためとなります。

データの編集をリストに反映する

これまでの修正でMyWebViewFragmentがWebページを表示するだけの機能となりました。次はMyListFragmentとMyDetailViewFragmentを修正し、データの編集をリストに反映できるようにしましょう。

まずはMyListFragmentを修正します。先ほど、リストアイテムの長押しに対応するコードを追加しましたが、そこでは直接MyDetailViewFragmentをインスタンス化し、Fragmentの入れ替えをしていました。しかし、この書き方ではMyListFragmentとMyDetailViewFragmentのつながりが強くなってしまい切り離せない形になっています。

こちらは前回同様、長押しされた位置を通知するインターフェースをMyListFragmentに追加し、HelloFragmentActivityに通知するようにしましょう。

MyListFragmentに以下のコードを追加してください。

01private LongClickListener longClickListener;
02/**
03* 
04*/
05public void setLongClickListener(
06    LongClickListener longClickListener) {
07  this.longClickListener = longClickListener;
08}
09public interface LongClickListener {
10  public void onLongClick(final int pos);
11}

また、onActivityCreated()メソッド内のsetOnLongClickListnerの部分を以下の内容に修正してください。

01  getListView().setOnItemLongClickListener(
02              new AdapterView.OnItemLongClickListener() {
03    @Override
04    public boolean onItemLongClick(
05          final AdapterView<?> listView,
06          final View v,
07          final int pos,
08          final long id) {
09      if (longClickListener != null) {
10          longClickListener.onLongClick(pos);
11          return true;
12      } else {
13          return false;
14      }
15    }
16});

これで長押しされた位置を通知する準備はできました。これに合わせてHelloFragmentActivityを修正しましょう。

HelloFragmentActivityのonCreate()メソッドに以下の内容を追加してください。

01listFragment.setLongClickListener(new MyListFragment.LongClickListener() {
02  @Override
03  public void onLongClick(final int pos) {
04    Map<String, String> m = DATA.get(pos);
05    MyDetailViewFragment detailViewFragment =
06      new MyDetailViewFragment(m.get("title"), m.get("url"));
07    FragmentTransaction tran =
08      getFragmentManager().beginTransaction();
09    tran.replace(R.id.fragment2, detailViewFragment);
10    tran.addToBackStack(null);
11    tran.commit();
12  }
13});

これでMyListFragmentに関わる修正が完了しました。
次はMyDetailViewFragmentを修正します。MyDetailViewFragmentもOKボタンが押された際に通知するインターフェースを設ける必要があります。

MyDetailViewFragmentに以下のコードを追加します。

1private CommitEditListener commitEditListener;
2public interface CommitEditListener {
3  public void onCommitEdit(String title, String url);
4}
5public void setCommitEditListener(CommitEditListener commitEditListener) {
6  this.commitEditListener = commitEditListener;
7}

また、onActivityCreated()メソッドを以下のように修正します。

01@Override
02public void onActivityCreated(final Bundle savedInstanceState) {
03  super.onActivityCreated(savedInstanceState);
04 
05  final EditText titleEdit =
06      (EditText) getView().findViewById(R.id.editTitle);
07  final EditText titleUrl =
08      (EditText) getView().findViewById(R.id.editUrl);
09 
10  titleEdit.setText(title);
11  titleUrl.setText(url);
12 
13  getView().findViewById(R.id.buttonOK).
14  setOnClickListener(new View.OnClickListener() {
15    @Override
16    public void onClick(final View v) {
17      if (commitEditListener != null) {
18          commitEditListener.onCommitEdit(
19            titleEdit.getText().toString(),
20            titleUrl.getText().toString());
21      }
22    }
23  });
24  getView().findViewById(R.id.buttonCancel).
25  setOnClickListener(new View.OnClickListener() {
26    @Override
27    public void onClick(final View v) {
28      getFragmentManager().popBackStack();
29    }
30  });
31}

これで編集した内容を通知できるようになりました。

また、キャンセルボタンには前に表示していたFragmentに戻るコードを記述しています。通知されたURLはHelloFragmentActivityで処理するようにします。

HelloFragmentActivityのsetLongClickListenerを設定している部分を以下のように修正します。

01listFragment.setLongClickListener(new MyListFragment.LongClickListener() {
02  @Override
03  public void onLongClick(final int pos) {
04    Map<String, String> m = DATA.get(pos);
05    MyDetailViewFragment detailViewFragment =
06        new MyDetailViewFragment(m.get("title"), m.get("url"));
07    detailViewFragment.setCommitEditListener(
08        new MyDetailViewFragment.CommitEditListener() {
09      @Override
10      public void onCommitEdit(final String title, final String url) {
11        Map<String, String> changed =
12          new HashMap<String, String>();
13        changed.put("title", title);
14        changed.put("url", url);
15        DATA.set(pos, changed);
16        listFragment.setUrlList(DATA);
17        getFragmentManager().popBackStack();
18      }
19    });
20    FragmentTransaction tran =
21      getFragmentManager().beginTransaction();
22    tran.replace(R.id.fragment2, detailViewFragment);
23    tran.addToBackStack(null);
24    tran.commit();
25  }
26});

これで修正は完了です。

アプリを実行してみて、リストアイテムを長押しし編集後、OKボタンをクリックしてください。ちゃんとリストアイテムの表示が変更されるようになっています。

図3：編集後のリストアイテム（クリックで拡大）

FragmentTransaction機能を使うことで、Webページや編集画面をシームレスに遷移させられるようになりました。これでサンプルアプリの修正は終わりますが、いままで学んだことをベースに以下のような機能を付け足してみてはいかがでしょうか。

Webページ側を長押しすると左側のリストにタイトルとURLが追加される
リストアイテムの並べ替え
Webページのリンクをタップした際にMyWebViewFragmentを生成し、Fragmentを用いてページ遷移も管理する

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

「HelloFragment」サンプルプログラム

3157_1.zip
「HelloSmartphone」サンプルプログラム

3157_2.zip

著者

石立宏志

この著者の記事一覧この著者の
記事一覧

テックファーム株式会社

2002年にIBMに入社、Webシステム開発やオフショア開発のサポートなどを経験。2005年にテックファーム株式会社に入社し、主にFeliCaやNFCなど非接触ICを使ったモバイルアプリケーションの開発に携わっていました。現在はスマートフォン向けのアプリケーション開発やソリューション提案をメインに活動しています。