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


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

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

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

それでは、続きをどうぞ

必要なもの

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

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

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

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

Header要素

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

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

◇preference_fragment.xml◇

1
2
3
4
5
<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◇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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をロードします。

1
2
3
4
@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を保持しているのですが、それについては別途解説します。

1
2
3
4
5
6
7
8
9
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で指定したクラス名と合わせます。
以上で、2Paneな設定画面は作成できました。
最後に、Javaソースコード一覧を貼っておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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);
        }
    }
}
2 Comments