Android 布局控件之ExpandableListView（可折叠列表）

Android 布局控件之ExpandableListView（可折叠列表）

ExpandableListView¬——可折叠列表，它是ListView的子类，可以把数据分为多个组和多个子项，它的显示效果就像我们的QQ分组功能，每个组下面有多个好友；但是ExpandableListView¬显示的列表项需要有ExpandableAdapter类提供。下面来简单了解一下吧。

1、常用属性：

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

2、ExpandableAdapter常用的有三种方式，我这里主要以BaseExpandableListAdpter来实现简单的可折叠列表实例。

3、实例代码

（1）首先我们创建连个Java封装类，分别封装组和组的子项的内容，代码如下：

（1-1）Group封装类

package com.example.imageviewtest.bean;
public class Group {
    private  String gName; //声明全局变量组名称
    public Group() { //无参构造函数
    }
    //构造函数初始化组名称
    public Group(String gName) {
        this.gName = gName;
    } 
    //get 组 属性
    public String getgName() {
        return gName;
    }
   //set 组 属性
    public void setgName(String gName) {
        this.gName = gName;
    }
}

（1-2）Item 封装类

  package com.example.imageviewtest.bean;
public class Item {
    private  int iId; //声明全局变量 子项ID
    private String sName; //声明全局变量 子项名称
    //无参构造函数
    public Item() {
    }
   //构造函数初始化子项ID 和子项名称
    public Item(int iId, String sName) {
        this.iId = iId;
        this.sName = sName;
    }
    public int getiId() {
        return iId;
    }
    public String getsName() {
        return sName;
    }
    public void setiId(int iId) {
        this.iId = iId;
    }
    public void setsName(String sName) {
        this.sName = sName;
    }

（2）写两个布局控件，分别用来显示Group和Item

(2-1) item_exlist_group.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="match_parent"
    android:orientation="horizontal"
    android:padding="5dp">
    <TextView
        android:id="@+id/tv_group_name"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:gravity="center_vertical"
        android:paddingLeft="30dp"
        android:text="好友"
        android:textStyle="bold"
        android:textSize="20sp" />
</LinearLayout>

（2-2）item_exlist_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="match_parent"
    android:orientation="horizontal"
    android:padding="5dp"
    android:background="#6BBA79">
    <!--显示用户图片-->
    <ImageView
        android:id="@+id/img_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/pic"
        android:focusable="false"/>
    <!--显示用户名称-->
    <TextView
        android:id="@+id/tv_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:focusable="false"
        android:text="李逍遥"
        android:textSize="18sp" />
</LinearLayout>

(3)定义Adapter类基本注释我都写了。

package com.example.imageviewtest.controlpritice;
import android.content.ClipData;
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 androidx.core.app.NavUtils;

import com.example.imageviewtest.R;
import com.example.imageviewtest.bean.Group;
import com.example.imageviewtest.bean.Item;
import java.util.ArrayList;

public class MyBaseExpandableListAdapter extends BaseExpandableListAdapter {

    private ArrayList<Group>   gData;  //创建一个List组
    private ArrayList<ArrayList<Item>> iData; //创建一个List 接收所有子项列表
    private Context myContext; //声明一个变量接收当前上下文

    //构造函数初始化全局变量
    public MyBaseExpandableListAdapter(ArrayList<Group> gData, ArrayList<ArrayList<Item>> iData, Context mContext) {
        this.gData = gData;
        this.iData = iData;
        this.myContext = mContext;
    }

    //获取组数
    @Override
    public int getGroupCount() {
        return  gData.size();
    }
   //获取组的子项数目
    @Override
    public int getChildrenCount(int groupPosition) {
        return  iData.get(groupPosition).size();
    }
    //获取组信息
    @Override
    public Object getGroup(int groupPosition) {
        return gData.get(groupPosition);
    }
    //获取子项信息
    @Override
    public Object getChild(int groupPosition, int childPosition) {
        return iData.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;
    }

    //取得用于显示给定分组的视图. 这个方法仅返回分组的视图对象
    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {
        ViewHolderGroup holderGroup;
        if (convertView == null) {
            convertView= LayoutInflater.from(myContext).inflate(R.layout.item_exlist_group,parent,false);
            holderGroup=new ViewHolderGroup();
            holderGroup.tv_group_name=(TextView) convertView.findViewById(R.id.tv_group_name);
            convertView.setTag(holderGroup);
        }else
            {
                holderGroup = (ViewHolderGroup) convertView.getTag();
            }
        holderGroup.tv_group_name.setText(gData.get(groupPosition).getgName());
        return convertView;

    }

    //取得显示给定分组给定子位置的数据用的视图
    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
        ViewHolderItem holderItem;
        if (convertView == null) {
            convertView=LayoutInflater.from(myContext).inflate(R.layout.item_exlist_item,parent,false);
            holderItem=new ViewHolderItem();
            holderItem.img_icon=convertView.findViewById(R.id.img_icon);
            holderItem.tv_name=convertView.findViewById(R.id.tv_name);
            convertView.setTag(holderItem);
        }else
            {
                holderItem=(ViewHolderItem) convertView.getTag();
            }
        holderItem.img_icon.setImageResource(iData.get(groupPosition).get(childPosition).getiId());
        holderItem.tv_name.setText(iData.get(groupPosition).get(childPosition).getsName());
        return  convertView;
    }
    //设置子列表是否可选中
    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }
    //声明一个静态类获取显示组控件
    private  static  class  ViewHolderGroup
    {
        private TextView tv_group_name;
    }
    //声明一个静态类获取显示子项控件
    private static class ViewHolderItem{
        private ImageView img_icon;
        private TextView tv_name;
    }

}

（4）最后我们创建一个布局文件来放ExpandableListView容器，代码如下：

  <?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="match_parent"
    android:padding="5dp">
    <ExpandableListView
        android:id="@+id/exlist_lol"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:childDivider="#E02D2F"/>
</LinearLayout>
   

以及布局的后台代码，主要为了准备数据，如下：

package com.example.imageviewtest.ui;
import android.app.ExpandableListActivity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.Toast;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import com.example.imageviewtest.R;
import com.example.imageviewtest.bean.Group;
import com.example.imageviewtest.bean.Item;
import com.example.imageviewtest.controlpritice.MyBaseExpandableListAdapter;
import java.util.ArrayList;
public class ShowExpandableListActivity extends AppCompatActivity {
    private Context myContext;
    private ArrayList<Group> gData=null;
    private ArrayList<ArrayList<Item>> iData=null;
    private ArrayList<Item> lData=null;
    private MyBaseExpandableListAdapter myBaseExpandableListAdapter=null;
    private ExpandableListView exlistlol;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_showexpandablelist);
        myContext= ShowExpandableListActivity.this;
        exlistlol = findViewById(R.id.exlist_lol);
        //数据准备
        gData=new ArrayList<Group>();
        iData=new ArrayList<ArrayList<Item>>();
        gData.add(new Group("朋友"));
        gData.add(new Group("家人"));
        gData.add(new Group("同学"));
        lData=new ArrayList<Item>();
        //朋友组
        //朋友组
        lData.add(new Item(R.drawable.pic,"杨过"));
        lData.add(new Item(R.drawable.pic,"小龙女"));
        lData.add(new Item(R.drawable.pic,"令狐冲"));
        lData.add(new Item(R.drawable.pic,"东方不败"));
        iData.add(lData);
        //家人组
        lData = new ArrayList<Item>();
        lData.add(new Item(R.drawable.pic, "大哥"));
        lData.add(new Item(R.drawable.pic, "二哥"));
        lData.add(new Item(R.drawable.pic, "大姐"));
        lData.add(new Item(R.drawable.pic, "二姐"));
        lData.add(new Item(R.drawable.pic, "三弟"));
        iData.add(lData);
        //同学组
        lData = new ArrayList<Item>();
        lData.add(new Item(R.drawable.pic, "郭襄"));
        lData.add(new Item(R.drawable.pic, "任盈盈"));
        lData.add(new Item(R.drawable.pic, "周星星"));
        lData.add(new Item(R.drawable.pic, "仪琳"));
        iData.add(lData);
        myBaseExpandableListAdapter=new MyBaseExpandableListAdapter(gData,iData,myContext);
        exlistlol.setAdapter(myBaseExpandableListAdapter);
        //为列表设置点击事件
        exlistlol.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
            @Override
            public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
                Toast.makeText(myContext, "你点击了：" + iData.get(groupPosition).get(childPosition).getsName(), Toast.LENGTH_SHORT).show();
                return true;
            }
        });
    }
}

显示结果：