可折叠列表ExpandableListView多级选择

上一期学习了AutoCompleteTextView和MultiAutoCompleteTextView，你已经掌握了吗？本期开始学习ExpandableListView的使用。

一、认识ExpandableListView

ExpandableListView 是 ListView 的子类，它在普通ListView的基础上进行了扩展，它把应用中的列表项分为几组，每组里又可包含多个列表项。

ExpandableListView的用法与普通 ListView的用法非常相似，只是 ExpandableListView所显示的列表项应 该由 ExpandableListAdapter 提供。ExpandableListAdapter 也是一个接口，该接口下提供的类继承关系图如下图所示。

与Adapter类似的是，实现 ExpandableListAdapter也有如下三种常用方式。

• 扩展 BaseExpandableListAdapter 实现 ExpandableListAdaptero。
• 使用 SimpleExpandableListAdapter 将两个 List 集合包装成 ExpandableListAdapter。
• 使用 SimpleCursorTreeAdapter 将 Cursor 中的数据包装成 SimpleCursorTreeAdapter。

ExpandableListView支持的常用XML属性如下：

• android:childDivider：指定各组内子类表项之间的分隔条，图片不会完全显示， 分离子列表项的是一条直线。
• android:childIndicator：显示在子列表旁边的Drawable对象，可以是一个图像。
• android:childIndicatorEnd：子列表项指示符的结束约束位置。
• android:childIndicatorLeft：子列表项指示符的左边约束位置。
• android:childIndicatorRight：子列表项指示符的右边约束位置。
• android:childIndicatorStart：子列表项指示符的开始约束位置。
• android:groupIndicator：显示在组列表旁边的Drawable对象，可以是一个图像。
• android:indicatorEnd：组列表项指示器的结束约束位置。
• android:indicatorLeft：组列表项指示器的左边约束位置。
• android:indicatorRight：组列表项指示器的右边约束位置。
• android:indicatorStart：组列表项指示器的开始约束位置。

二、ExpandableListView 示例

接下来通过一个简单的示例程序来学习ExpandableListView的使用方法。

继续使用WidgetSample工程的listviewsample模块，在app/main/res/layout/目录下创建expandlist_layout.xml文件，在其中填充如下代码片段：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"  >
    <ExpandableListView
        android:id="@+id/expendlist"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

在res/layout/目录创建expendlist_group.xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                android:gravity="center_vertical"
                android:padding="10dp">

    <ImageView
        android:id="@+id/group_img"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:src="@drawable/group_close" />

    <TextView
        android:id="@+id/groupname_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/group_img"
        android:layout_marginLeft="10dp"
        android:text="张三"
        android:textSize="18sp" />
</RelativeLayout>

在res/layout/目录创建expendlist_item.xml文件，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="70dp"
              android:orientation="horizontal"
              android:gravity="center_vertical"
              android:padding="10dp" >

    <ImageView
        android:id="@+id/icon_img"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginLeft="20dp"
        android:src="@drawable/item" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:gravity="center_vertical"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/itemname_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="22sp"
            android:textStyle="bold"
            android:text="李大钊" />

        <TextView
            android:id="@+id/info_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="今天是个好日子啊!" />
    </LinearLayout>
</LinearLayout>

新建MyExpandableListViewAdapter类，继承ExpandableListViewAdapter，并重写其方法，代码如下：

package com.jinyu.cqkxzsxy.android.listviewsample.adapter;



import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseExpandableListAdapter;
import android.widget.ImageView;
import android.widget.TextView;


import com.jinyu.cqkxzsxy.android.listviewsample.R;


import java.util.List;


/**
 * @创建者 鑫鱻
 * @描述 Android零基础入门到精通系列教程，欢迎关注微信公众号ShareExpert
 */
public class MyExpandableListViewAdapter extends BaseExpandableListAdapter {
    private Context mContext = null;
    private List<String> mGroupList = null;
    private List<List<String>> mItemList = null;


    public MyExpandableListViewAdapter(Context context, List<String> groupList, 
                                       List<List<String>> itemList) {
        this.mContext = context;
        this.mGroupList = groupList;
        this.mItemList = itemList;
    }


    /**
     * 获取组的个数
     *
     * @return
     * @see android.widget.ExpandableListAdapter#getGroupCount()
     */
    @Override
    public int getGroupCount() {
        return mGroupList.size();
    }


    /**
     * 获取指定组中的子元素个数
     *
     * @param groupPosition
     * @return
     * @see android.widget.ExpandableListAdapter#getChildrenCount(int)
     */
    @Override
    public int getChildrenCount(int groupPosition) {
        return mItemList.get(groupPosition).size();
    }


    /**
     * 获取指定组中的数据
     *
     * @param groupPosition
     * @return
     * @see android.widget.ExpandableListAdapter#getGroup(int)
     */
    @Override
    public String getGroup(int groupPosition) {
        return mGroupList.get(groupPosition);
    }


    /**
     * 获取指定组中的指定子元素数据。
     *
     * @param groupPosition
     * @param childPosition
     * @return
     * @see android.widget.ExpandableListAdapter#getChild(int, int)
     */
    @Override
    public String getChild(int groupPosition, int childPosition) {
        return mItemList.get(groupPosition).get(childPosition);
    }


    /**
     * 获取指定组的ID，这个组ID必须是唯一的
     *
     * @param groupPosition
     * @return
     * @see android.widget.ExpandableListAdapter#getGroupId(int)
     */
    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }


    /**
     * 获取指定组中的指定子元素ID
     *
     * @param groupPosition
     * @param childPosition
     * @return
     * @see android.widget.ExpandableListAdapter#getChildId(int, int)
     */
    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }


    /**
     * 获取显示指定组的视图对象
     *
     * @param groupPosition 组位置
     * @param isExpanded    该组是展开状态还是伸缩状态
     * @param convertView   重用已有的视图对象
     * @param parent        返回的视图对象始终依附于的视图组
     * @return
     * @see android.widget.ExpandableListAdapter#getGroupView(int, boolean, android.view.View,
     * android.view.ViewGroup)
     */
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView,
                             ViewGroup parent) {
        GroupHolder groupHolder = null;
        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(R.layout.expendlist_group, null);

            groupHolder = new GroupHolder();
            groupHolder.groupNameTv = (TextView) convertView.findViewById(R.id.groupname_tv);
            groupHolder.groupImg = (ImageView) convertView.findViewById(R.id.group_img);
            convertView.setTag(groupHolder);
        } else {
            groupHolder = (GroupHolder) convertView.getTag();
        }

        if (isExpanded) {
            groupHolder.groupImg.setImageResource(R.drawable.group_open);
        } else {
            groupHolder.groupImg.setImageResource(R.drawable.group_close);
        }

        groupHolder.groupNameTv.setText(mGroupList.get(groupPosition));

        return convertView;
    }


    /**
     * 获取一个视图对象，显示指定组中的指定子元素数据。
     *
     * @param groupPosition 组位置
     * @param childPosition 子元素位置
     * @param isLastChild   子元素是否处于组中的最后一个
     * @param convertView   重用已有的视图(View)对象
     * @param parent        返回的视图(View)对象始终依附于的视图组
     * @return
     * @see android.widget.ExpandableListAdapter#getChildView(int, int, boolean, android.view.View,
     * android.view.ViewGroup)
     */
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, 
                             View convertView, ViewGroup parent) {
        ItemHolder itemHolder = null;
        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(R.layout.expendlist_item, null);

            itemHolder = new ItemHolder();
            itemHolder.nameTv = (TextView) convertView.findViewById(R.id.itemname_tv);
            itemHolder.iconImg = (ImageView) convertView.findViewById(R.id.icon_img);
            convertView.setTag(itemHolder);
        } else {
            itemHolder = (ItemHolder) convertView.getTag();
        }

        itemHolder.nameTv.setText(mItemList.get(groupPosition).get(childPosition));
        itemHolder.iconImg.setBackgroundResource(R.drawable.item);

        return convertView;
    }


    /**
     * 组和子元素是否持有稳定的ID,也就是底层数据的改变不会影响到它们。
     *
     * @return
     * @see android.widget.ExpandableListAdapter#hasStableIds()
     */
    @Override
    public boolean hasStableIds() {
        return true;
    }


    /**
     * 是否选中指定位置上的子元素。
     *
     * @param groupPosition
     * @param childPosition
     * @return
     * @see android.widget.ExpandableListAdapter#isChildSelectable(int, int)
     */
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }



    class GroupHolder {
        public TextView groupNameTv;
        public ImageView groupImg;
    }


    class ItemHolder {
        public ImageView iconImg;
        public TextView nameTv;
    }
}

上面程序的关键代码就是扩展BaseExpandableListAdapter来实现ExpandableListAdapter, 当扩展BaseExpandableListAdapter时，关键是实现如下4个方法。

• getGroupCount()：该方法返回包含的组列表项的数量。
• getGroupView()：该方法返回的View对象将作为组列表项。
• getChildrenCount()：该方法返回特定组所包含的子列表项的数量。
• getChildView()：该方法返回的View对象将作为特定组、特定位置的子列表项。

新建ExpandableListActivity.java文件，加载上面新建的布局文件，具体代码如下：

package com.jinyu.cqkxzsxy.android.listviewsample;


import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.Toast;


import com.jinyu.cqkxzsxy.android.listviewsample.adapter.MyExpandableListViewAdapter;


import java.util.ArrayList;
import java.util.List;


public class ExpandableListActivity extends AppCompatActivity {
    private ExpandableListView mExpandableListView = null;
    // 列表数据
    private List<String> mGroupNameList = null;
    private List<List<String>> mItemNameList = null;
    // 适配器
    private MyExpandableListViewAdapter mAdapter = null;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.expandlist_layout);


        // 获取组件
        mExpandableListView = (ExpandableListView) findViewById(R.id.expendlist);
        mExpandableListView.setGroupIndicator(null);


        // 初始化数据
        initData();


        // 为ExpandableListView设置Adapter
        mAdapter = new MyExpandableListViewAdapter(this, mGroupNameList, mItemNameList);
        mExpandableListView.setAdapter(mAdapter);


        // 监听组点击
        mExpandableListView.setOnGroupClickListener(new ExpandableListView.OnGroupClickListener() {
            @Override
            public boolean onGroupClick(ExpandableListView parent, View v,
                                        int groupPosition, long id) {
                if (mGroupNameList.get(groupPosition).isEmpty()) {
                    return true;
                }
                return false;
            }
        });


        // 监听每个分组里子控件的点击事件
        mExpandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition,
                                        int childPosition, long id) {
                Toast.makeText(ExpandableListActivity.this,
                        mAdapter.getGroup(groupPosition) + ":"
                                +  mAdapter.getChild(groupPosition, childPosition) ,
                        Toast.LENGTH_SHORT).show();
                return false;
            }
        });
    }


    // 初始化数据
    private void initData(){
        // 组名
        mGroupNameList = new ArrayList<String>();
        mGroupNameList.add("历代帝王");
        mGroupNameList.add("华坛明星");
        mGroupNameList.add("国外明星");
        mGroupNameList.add("政坛人物");

        mItemNameList = new  ArrayList<List<String>>();

        // 历代帝王组
        List<String> itemList = new ArrayList<String>();
        itemList.add("唐太宗李世民");
        itemList.add("秦始皇嬴政");
        itemList.add("汉武帝刘彻");
        itemList.add("明太祖朱元璋");
        itemList.add("宋太祖赵匡胤");
        mItemNameList.add(itemList);

        // 华坛明星组
        itemList = new ArrayList<String>();
        itemList.add("范冰冰 ");
        itemList.add("梁朝伟");
        itemList.add("谢霆锋");
        itemList.add("章子怡");
        itemList.add("杨颖");
        itemList.add("张柏芝");
        mItemNameList.add(itemList);

        // 国外明星组
        itemList = new ArrayList<String>();
        itemList.add("安吉丽娜•朱莉");
        itemList.add("艾玛•沃特森");
        itemList.add("朱迪•福斯特");
        mItemNameList.add(itemList);

        // 政坛人物组
        itemList = new ArrayList<String>();
        itemList.add("唐纳德•特朗普");
        itemList.add("金正恩");
        itemList.add("奥巴马");
        itemList.add("普京");
        mItemNameList.add(itemList);
    }
}

上述代码为ExpandableListView设置Adapter，并为ExpandableListView设置事件监听器。

修改程序启动的Activity，运行程序，可以看到下图所示界面效果。

点击组的时候，会将其子元素打开，如上图右侧所示，单击其中的列表会弹出消息提示。

至此，关于ExpandableListView的简单使用学习完毕，更多属性和方法建议多加练习并掌握。