二级列表ExpandableListView

一.概述

ExpandableListView 是什么？

官方给出的解释是：

A view that shows items in a vertically scrolling two-level list. This differs from the ListView by allowing two levels: groups which can individually be expanded to show its children. The items come from the ExpandableListAdapter associated with this view.

简单翻译一下就是：

[图片上传中...(二级.png-6c657e-1563696646492-0)]
种用于垂直滚动展示两级列表的视图,组可以单独展开。这些选项的数据是通过 ExpandableListAdapter 关联的。

二.如何使用

1.定义xml布局

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

2.定义要显示的数据

//group数据
  private ArrayList<String> mGroupList;

//item数据
private ArrayList<ArrayList<String>> mItemSet;

private void initData() {

    mGroupList = new ArrayList<>();

    mGroupList.add("我的家人");

    mGroupList.add("我的朋友");

    mGroupList.add("黑名单");

    mItemSet = new ArrayList<>();

    ArrayList<String> itemList1 = new ArrayList<>();

    itemList1.add("大妹");

    itemList1.add("二妹");

    itemList1.add("三妹");

    ArrayList<String> itemList2 = new ArrayList<>();

    itemList2.add("大美");

    itemList2.add("二美");

    itemList2.add("三美");

    ArrayList<String> itemList3 = new ArrayList<>();

    itemList3.add("狗蛋");

    itemList3.add("二丫");

    mItemSet.add(itemList1);

    mItemSet.add(itemList2);

    mItemSet.add(itemList3);
}

3.定义组视图和子选项的视图

组视图

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp">


<TextView
    android:layout_centerVertical="true"
    android:layout_marginLeft="50dp"
    android:id="@+id/tv_group"
    android:textSize="18sp"
    android:text="name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />



<TextView
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:layout_marginRight="10dp"
    android:text="4/18"
    android:textSize="16sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
    </RelativeLayout>

子视图

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:padding="8dp">

    <ImageView
    android:layout_marginLeft="40dp"
    android:src="@mipmap/ic_launcher"
    android:layout_width="40dp"
    android:layout_height="40dp" />
    <LinearLayout
    android:layout_marginLeft="12dp"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
    android:id="@+id/tv_name"
    android:text="@string/app_name"
    android:textSize="16sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
    <TextView
    android:text="@string/app_name"
    android:textSize="16sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</LinearLayout>
    </LinearLayout>

4.自定义适配器，需要继承 BaseExpandableListAdapter 抽象类，重写相关的方法

public class ContactAdapter extends BaseExpandableListAdapter {

    private Context mContext;

    private ArrayList<String> mGroup;

    private ArrayList<ArrayList<String>> mItemList;

    private final LayoutInflater mInflater;

    public ContactAdapter(Context context, ArrayList<String> group, ArrayList<ArrayList<String>> itemList){

        this.mContext = context;

        this.mGroup = group;

        this.mItemList = itemList;

        mInflater = LayoutInflater.from(context);

    }

        //父项的个数
    @Override
    public int getGroupCount() {
        return mGroup.size();
    }

        //某个父项的子项的个数
    @Override
    public int getChildrenCount(int groupPosition) {
        return mItemList.get(groupPosition).size();
    }



        //获得某个父项
    @Override
    public Object getGroup(int groupPosition) {
        return mGroup.get(groupPosition);
    }



        //获得某个子项
    @Override
    public Object getChild(int groupPosition, int childPosition) {

        return mItemList.get(groupPosition).get(childPosition);

    }
        //父项的Id
    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }
        //子项的id
    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }


    @Override
    public boolean hasStableIds() {
        return false;
    }


        //获取父项的view
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        if (convertView == null){
            convertView = mInflater.inflate(R.layout.contact_group,parent,false);
        }
        String group = mGroup.get(groupPosition);
        TextView tvGroup = (TextView) convertView.findViewById(R.id.tv_group);
        tvGroup.setText(group);
        return convertView;
    }


        //获取子项的view
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

        final String child = mItemList.get(groupPosition).get(childPosition);

        if (convertView == null){
            convertView = mInflater.inflate(R.layout.contact_item,parent,false);
        }

        TextView tvChild = (TextView)convertView.findViewById(R.id.tv_name);
        tvChild.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext,child,Toast.LENGTH_SHORT).show();
            }
        });


        tvChild.setText(child);
        return convertView;
    }
        //子项是否可选中,如果要设置子项的点击事件,需要返回true
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

}

5.为 ExpandableListView 设置适配器

    ContactAdapter adapter = new ContactAdapter(getContext(), mGroupList, mItemSet);
    mContactEtv.setAdapter(adapter);

6.效果图:

二级.png

三.监听事件

1.对于处理 Item 的点击事件，还是要设置监听器，常用的有这几类：

•setOnChildClickListener//单击子选项
•setOnGroupClickListener//单击组选项
•setOnGroupCollapseListener//分组合并
•setOnGroupExpandListener//分组合并

注意:
setOnChildClickListener,想要此回调有效,适配器的isChildSelectable()方法必须返回true

四.属性

divider 这个属性用于设置父选项之间的分割线样式

childDivider 自选项之间分割样式

dividerHeight 用于设置分割线的高度

groupIndicator 这个属性是用于控制父项前面的小箭头用的，如果想要用自己的图片替换掉那个箭头可以这样写：
1.android:groupIndicator="@drawable/indicator"

indicator.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_expanded="true" android:drawable="@drawable/open"/>
    <item android:drawable="@drawable/close"/>
</selector>

indicatorLeft 箭头或者自己设置的图片的左边框距离手机左边边缘的距离，类似于marginLeft

indicatorStart 箭头或者自己设置的图片的左边框距离手机左边边缘的距离，类似于marginLeft

indicatorRight和indicatorEnd 暂时还用不上，因为箭头一般在列表的左边，使用方法应该和上面两个方法差不多

childIndicator 用于设置子项前显示的图标，不设置的话默认是没有图标的