ExpandableListViewクラスで折り畳めるリストを表示する

| 2011年5月28日 | ユーザインターフェース | No Comments
Bookmark this on Hatena Bookmark

今回はリストの中の項目を選択すると、子供のリストが開くExpandableListViewの使い方を説明します。

大項目を表示させておいて、詳細は選択してから表示するような場面で活用できます。

通常のListViewについては下記の記事などが参考になります。

それでは続きへどうぞ

ExpandableListActivity

通常のListViewにもListViewクラスを直接使う方法とリスト表示専用のListActivityを継承したActivityを用意する２つの方法がありましたが、ExpandableListViewも同じようにExpandableListViewクラスを使う方法とExpandableListActivityクラスを継承したActivityを用意する方法があります。

ExpandableListActivityクラスを使うことで手軽にExpandableListViewを使うことができます。ExpandableListViewと他のViewを共存させたい場合には、ExpandableListActivityクラスを使わず自分でレイアウトを作成してExpandableListViewクラスを直接使う必要があります。

今回は後者のExpandableListActivityを継承したActivityを用意する方法を用いて表示させます。

まず表示させるリストを準備します。GroupとChildと表現されていますが親と子の関係と捉えた方が分かりやすいかもしれません。

上記のスクリーンショットでは3つのGroup（親）を持つリストがあり、それぞれに5つのChildが存在するリストを用意しています。

1
2
3
4
5
6
public class MainActivity extends ExpandableListActivity {
    @Override<br />
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        List<Map<String, String>> groupList = new ArrayList<Map<String,String>>();
        List<List<Map<String, String>>> childList = new ArrayList<List<Map<String,String>>>();

ChildはGroupがそれぞれリストを持っているので、リストのリストということになります。

次にリストに追加していきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
for (int i = 0; i < 3; i++) {
    // Group（親）のリスト
    Map<String, String> groupElement = new HashMap<String, String>();
    groupElement.put("GROUP_TITLE", "Group " + i);
    groupList.add(groupElement);
    // Childのリスト
    List<Map<String, String>> childElements = new ArrayList<Map<String, String>>();
    for (int j = 0; j < 5; j++) {
        Map<String, String> child = new HashMap<String, String>();
        child.put("CHILD_TITLE", "Child " + j);
        child.put("SUMMARY", "Summary " + j);
        childElements.add(child);
    }
    childList.add(childElements);
}

Groupには「TITLE」というキーを、Childには「TITLE」「SUMMARY」の２つのキーでMapクラスを作成しListに入れています。このキーは任意の値で良いですが後述のAdapterを作成する際に引数で与える際に使うので間違わないようにだけしてください。

SimpleExpandableListAdapter

ListActivityと同様にAdapterを作成して、setListAdapterメソッドで設定します。

今回はSimpleExpandableListAdapterクラスを利用します。SimpleExpandableListAdapterクラスはリストとレイアウト、Mapのキーを引数に与えるだけの簡単に扱えるAdapterクラスです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
SimpleExpandableListAdapter adapter = new SimpleExpandableListAdapter(
        this,
        // Group(親)のリスト
        groupList,
        // Group(親)のレイアウト
        android.R.layout.simple_expandable_list_item_1,
        // Group(親)のリストで表示するMapのキー
        new String []{"GROUP_TITLE"},
        // Group(親)のレイアウト内での文字を表示するTextViewのID
        new int []{android.R.id.text1},
        // Child(子)のリスト
        childList,
        // Child(子)のレイアウト
        android.R.layout.simple_expandable_list_item_2,
        // Child(子)のリストで表示するMapのキー
        new String []{"CHILD_TITLE", "SUMMARY"},
        // Child(子)のレイアウト内での文字を表示するTextViewのID
        new int []{android.R.id.text1, android.R.id.text2}
);
setListAdapter(adapter);

これで項目を選択すると子供のリストが開くExpandableListViewを表示することができます。

About The Author

kkato