ExpandableListView

想要製作可以顯示折疊的 ListView 可以使用 ExpandableListView 來呈現。
效果圖如下。

首先在 layout.xml 中放入 ExpandableListView 。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.demo.listviewdemo.ExpendListView">

    <ExpandableListView
        android:id="@+id/expandableListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

ExpandableListView 所使用的 Adapter 跟 ListView 有點不一樣。 先來看看 SimpleExpandableListAdapter 使用方法。

傳入參數分別為:

• Context ：當下場景。
• List<Map<String,?>>：Group 陣列 item 須為Map<String,?>。
• int groupLayout：Group 的 layout 樣式。
• String[] groupFrom：Group 對應 Map 的 Key。
• int[] groupTO：Group 對應的樣式中 Layout 中的 UI元件。
• List<List<Map<String,?>>>：Child 陣列 item 須為List<Map<String,?>>。
• int childLayout：Child 的 layout 樣式。
• String[] childFrom：Child 對應 Map 的 Key。
• int[] childTO：Child 對應的樣式中 Layout 中的 UI元件。

知道 SimpleExpandableListAdapter 用法之後。
先建立所需要的資料數據，先宣告 groupList 與 childList 然後初始化資料。

 private List<Map<String, String>> groupList;
 private List<List<Map<String, String>>> childList;

我們寫一個方法 initData() 來方便我們把資料組起來。

 private void initData(String title, String[] child) {
        Map<String, String> GroupItem= new HashMap<String, String>();
        GroupItem.put("GroupName", title);
        groupList.add(GroupItem);

        List<Map<String, String> > childItem = new ArrayList<>();

        for (int index = 0; index < child.length; index++) {
            Map<String,String> childMapItem = new HashMap<String,String>();
            childMapItem.put("childName",child[index]);
            childItem.add(childMapItem);
        }

        childList.add(childItem);
    }

初始化與建立資料。

 groupList = new ArrayList<>();
 childList = new ArrayList<>();
 initData("動物", new String[]{"狗", "貓", "豬", "鳥"});
 initData("植物", new String[]{"玫瑰", "向日葵", "含羞草", "喇叭花"});
 initData("魚類", new String[]{"虱目魚", "大肚魚", "孔雀魚", "吳郭魚"});

依序把 Adapter 需要的資料放進去並且把 ExpandableListView 與 Adapter 關聯起來。

 SimpleExpandableListAdapter simpleExpandableListAdapter = new SimpleExpandableListAdapter(this,
                groupList,
                android.R.layout.simple_expandable_list_item_1,
                new String[]{"groupName"},
                new int[]{android.R.id.text1},
                childList,
                android.R.layout.simple_expandable_list_item_2,
                new String[]{"childName"},
                new int[]{android.R.id.text2});

        ExpandableListView expandableListView = (ExpandableListView) findViewById(R.id.expandableListView);
        expandableListView.setAdapter(simpleExpandableListAdapter);

寫一個 Click 事件 來取得點擊到的 Item 資訊。

    expandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long
                    id) {
                TextView childItem = (TextView) v.findViewById(android.R.id.text2);
                String childStr =childItem.getText().toString();
                Toast.makeText(ExpendListView.this,"child position="+childPosition+" child="+childStr , Toast.LENGTH_SHORT)
                        .show();
                return false;
            }
        });

程式碼下載: GitHub

相關連結

• ListView
• ListView 增加頁頭、頁尾
• ListView With BaseAdapter