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

技術解説

連載 :

Androidタブレットアプリ開発入門

2012年2月3日(金)

石立宏志

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

前回はFragment機能に振る舞いを持たせ、Fragment機能を実際のアプリで用いる場合に近い形でサンプルアプリを作りました。

サンプルアプリを作ることで、Fragmentのライフサイクルやイベント処理など、Fragment機能を使う上での基本的なことが理解できたかと思います。

今回は、前回説明しきれなかったFragmentTransaction機能と、作成したFragmentをスマートフォンアプリに用いる方法、最後にアプリを実際にリリースする上で気をつけることを説明します。

FragmentTransaction機能を試す

前回作成したサンプルアプリを動作させてみてください。リストをタップすることでWebページが表示され、Webページ内のリンクをタップすることでブラウズ、戻るキーを押すことで前に表示していたページに戻るようになっていると思います。

それらの基本的な画面遷移はMyWebViewFragmentによって行われており、現時点では特に不都合を感じないかと思います。

今回はサンプルアプリにリスト内のURLやタイトルを編集する機能を作り、その上でFragmentTransaction機能を試してみましょう。

タイトル編集用Fragmentの作成

まずは、タイトル編集用のFragmentを作成します。sample.hellofragmentパッケージに MyDetailViewFragmentという名前のFragmentクラスを継承したクラスを作成してください。

図1：MyDetailViewFragmentの作成（クリックで拡大）

クラスが作成できたら、編集画面用のレイアウトXMLファイルを作成します。resフォルダ内のlayoutフォルダに以下の内容でdeteil.xmlを作成してください。

01<?xml version="1.0" encoding="utf-8"?>
02<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
03  android:layout_width="match_parent"
04  android:layout_height="match_parent"
05  android:background="@android:color/background_dark"
06  android:orientation="vertical" >
07  <TextView
08    android:id="@+id/textView1"
09    android:layout_width="wrap_content"
10    android:layout_height="wrap_content"
11    android:text="タイトル"
12    android:textAppearance="?android:attr/textAppearanceMedium" />
13  <EditText
14    android:id="@+id/editTitle"
15    android:inputType="text"
16    android:layout_width="match_parent"
17    android:layout_height="wrap_content" >
18    <requestFocus />
19  </EditText>
20  <TextView
21    android:id="@+id/textView2"
22    android:layout_width="wrap_content"
23    android:layout_height="wrap_content"
24    android:text="URL"
25    android:textAppearance="?android:attr/textAppearanceMedium" />
26  <EditText
27    android:id="@+id/editUrl"
28    android:inputType="textUri"
29    android:layout_width="match_parent"
30    android:layout_height="wrap_content" />
31  <Button
32    android:id="@+id/buttonOK"
33    android:layout_width="wrap_content"
34    android:layout_height="wrap_content"
35    android:text="OK" />
36  <Button
37    android:id="@+id/buttonCancel"
38    android:layout_width="wrap_content"
39    android:layout_height="wrap_content"
40    android:text="キャンセル" />
41</LinearLayout>

これで編集画面のレイアウトが完成しました。

Fragmentにレイアウトを適用するには、FragmentクラスのonCreateView() メソッドでレイアウトファイルを読み込むようにします。

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

1@Override
2public View onCreateView(final LayoutInflater inflater,
3       final ViewGroup container,
4       final Bundle savedInstanceState) {
5    return inflater.inflate(R.layout.detail, container, false);
6}

あとは編集画面にURLとタイトルを設定できるようにしましょう。

もう少し、MyDetailViewFragmentにコードを追加しましょう。

01private final String title;
02private final String url;
03 
04public MyDetailViewFragment(final String title, final String url) {
05    this.title = title;
06    this.url = url;
07}
08@Override
09public void onActivityCreated(final Bundle savedInstanceState) {
10  super.onActivityCreated(savedInstanceState);
11 
12  EditText titleEdit = (EditText) getView().findViewById(R.id.editTitle);
13  EditText titleUrl = (EditText) getView().findViewById(R.id.editUrl);
14 
15  titleEdit.setText(title);
16  titleUrl.setText(url);
17}

これで取りあえず、編集画面を表示する準備ができました。

いったん、この状態で編集画面を出せるようにしましょう。リストアイテムをタップするイベントはWebページ表示のアクションに使っているので、リストアイテムを長押しするイベントで編集画面を表示するようにします。

MyListFragmentに長押しするイベントを追加しましょう。MyListFragmentのonActivityCreated()メソッドに以下のコードを追加してください。

01getListView().setOnItemLongClickListener(
02      new AdapterView.OnItemLongClickListener() {
03  @Override
04  public boolean onItemLongClick(final AdapterView<?> listView,
05      final View v, final int pos, final long id) {
06    Map<String, String> m =
07        (Map<String, String>) listView.getAdapter().getItem(pos);
08         
09    MyDetailViewFragment detailViewFragment =
10            new MyDetailViewFragment(m.get("title"), m.get("url"));
11    FragmentTransaction tran = 
12            getFragmentManager().beginTransaction();
13    tran.replace(R.id.fragment2, detailViewFragment);
14    tran.commit();
15    return true;
16  }
17});

ここで画面右側のFragmentを入れ替えるために、FragmentTransaction機能を使っています。ここではFragmentの入れ替えにしか使っていませんので、こんなもんだと思っておいてください。

これで表示できる準備はできました。いったん、アプリを実行して画面が表示されるか確認しましょう。実行し、画面左側のリストアイテムを長押ししてみると、以下の画面が表示されます。

図2：編集画面（クリックで拡大）

編集画面は表示されましたが、OKボタン、キャンセルボタンを押した際の処理はまだ入れていないので、追加する必要があります。

また、この画面で戻るキーを押すと、アプリケーションが強制終了してしまいます。これはHelloFragmentActivityのonBackPressed()メソッドで画面右側のFragmentはMyWebViewFragmentであると決めつけてコードが記述されており、Fragmentが切り替わっていることに対応できていないためです。

これらを合わせて修正し、MyDetailViewFragmentで実際に編集し、リストの更新ができるようにしましょう。

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

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

3157_2.zip

著者

石立宏志

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

テックファーム株式会社

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