PreferenceFragmentを使って２Paneな設定画面を作成する

先日、Android3.0（Honeycomb）のプレビュー版SDKが公開されました。

Honeycombから新しく実装されるFragment、それを利用し今回は早速２Paneな設定画面を作成してみます。

※ただし、プレビュー版であるためAPIは正規版と使用方法/動作内容が異なる場合があります。

それでは、続きをどうぞ

必要なもの

２Paneな設定画面を作成するのに、必要なものは以下の２つです。

「Header部分用のXMLファイル」

「Header要素ごとに、右Paneに表示させる内容」

非常に簡単な実装で、画像の様な画面を作成できます。

Header要素

まず、左側のPaneを作成します。

これらは、preference-headers要素として、preference_fragment.xmlに記述しています。

◇preference_fragment.xml◇

<preference-headers xmlns:android="http://schemas.android.com/apk/res/android">
	<header
		android:fragment="org.jpn.techbooster.sample.PreferenceFragmentSample.Main$TestPref"
		android:title="Pref Title Test" android:summary="Summary test" />
</preference-headers>

header 要素を追加することで、左側のリストを追加出来ます。

android:fragmentに指定している内容は、

Package名.クラス名$クラス名 の形式で書いたものです。
ここで指定したクラスが、左側Paneの要素を選択した場合に呼び出されます。

右側のPane要素の作成

右側のPaneに指定しているのは、設定画面を簡単に作るで紹介した内容です。

特に新しい要素等はありません。

◇innner_fragment.xml◇

<PreferenceScreen
        xmlns:android="http://schemas.android.com/apk/res/android">

    <PreferenceCategory
            android:title="@string/title_1">

        <CheckBoxPreference
                android:key="checkbox_preference"
                android:title="@string/checkbox_title_1"
                android:summary="@string/checkbox_summary_1" />

    </PreferenceCategory>

    <PreferenceCategory
            android:title="@string/title_2">

        <EditTextPreference
                android:key="edittext_preference"
                android:title="@string/edittext_title_1"
                android:summary="@string/edittext_summary_1"
                android:dialogTitle="@string/dialog_title_1" />

    </PreferenceCategory>

</PreferenceScreen>

呼び出し部分の作成

最後に、XMLファイルをロードする部分を作成します。

PreferenceActivityを継承したクラスを作成し、Honeycombで新規に追加された、

loadHeadersFromResource()を用いてpreference_fragment.xmlをロードします。

	@Override
	public void onBuildHeaders(List<Header> target) {
		loadHeadersFromResource(R.xml.preference_fragment, target);
	}

※onBuildHeaders()はHeaderのBuildが必要になった際に呼び出されます。
※順を試してみたところ、「onCreate」→「onBuildHeaders」→「xmlで指定したfragment」→「onStart」… でした。

次に、右側に表示するFragmentを記述します。
新しく追加された、PreferenceFragmentクラスを継承したクラスを内部クラスとして作成します。
＃Fragment自体が別にLifeCycleを保持しているのですが、それについては別途解説します。

	public static class TestPref extends PreferenceFragment {
		@Override
		public void onCreate(Bundle savedInstanceState) {
			super.onCreate(savedInstanceState);

			// Load the preferences
			addPreferencesFromResource(R.xml.innner_fragment);
		}
	}

※Class名はandroid:fragmentで指定したクラス名と合わせます。
以上で、２Paneな設定画面は作成できました。
最後に、Javaソースコード一覧を貼っておきます。

public class Main extends PreferenceActivity {
	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
	}

	@Override
	public void onStart(){
		super.onStart();
	}

	@Override
	public void onResume(){
		super.onResume();
	}

	@Override
	public void onBuildHeaders(List<Header> target) {
		loadHeadersFromResource(R.xml.preference_fragment, target);
	}

	public static class TestPref extends PreferenceFragment {
		@Override
		public void onCreate(Bundle savedInstanceState) {
			super.onCreate(savedInstanceState);

			// Load the preferences
			addPreferencesFromResource(R.xml.innner_fragment);
		}
	}
}