简介
ExpandableListView是一个可以折叠的列表、继承自ListView，相信大家对ListView也是非常熟悉的了，ExpandableListView的使用方法跟ListView差不多，但也要比ListView繁琐，如果ListView没入门的建议先看看这篇：https://blog.csdn.net/weixin_44758662/article/details/107677851。ExpandableListView的功能指向性非常强，就是用来做可折叠列表的 如最常用的QQ的分组
该实例基本复刻了QQ的折叠列表，知识点完全够用了，建议收藏起来
原创不易、给个关注把。
下面用ExpandableListView模仿出QQ的这种效果
使用
1、创建视图
（1）、创建group（父项）的视图 只有一个TextView组件
注意：
TextView要预留一个向左的大概40dp的空间以便显示折叠的箭头 不然折叠的箭头会被覆盖住，就看不见了。 android:layout_marginLeft=“40dp”
eplistv_test_group.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="50dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="@+id/tv_id"
android:text="我的好友"
android:textSize="18sp"
android:layout_marginLeft="40dp"
android:gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
（2）、创建child的视图
这个就没什么注意的地方了 ，就是整整牌面
eplistv_test_child.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="16dp"
android:minHeight="70dp"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/img_pic"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/pic2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
/>
<TextView
android:id="@+id/tv_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:textSize="15sp"
android:text="编辑人生"
android:layout_marginTop="8dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="@id/img_pic"
/>
<TextView
android:id="@+id/tv_state"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:textSize="13sp"
android:layout_marginTop="3dp"
android:text="[wifi在线]"
app:layout_constraintLeft_toRightOf="@id/img_pic"
app:layout_constraintTop_toBottomOf="@id/tv_id"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
（3）、创建一个主视图
里面有一个 ExpandableListView
注意:一定要 设置android:divider="@null"这个属性等于null 才可以去点 ExpandableListView的下划线，不然是相当的难看。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=".MainActivity2">
<ExpandableListView
android:id="@+id/eplistv_test"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="16dp"
android:divider="@null"
android:overScrollMode="never"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
2、代码部分
（1）、MainActivity 主要就是为 ExpandableListView设置适配器和创建一下模拟的数据的 主要请看下面的ExpandableListView适配器部分
package com.example.myapplication123;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ExpandableListView;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
public class MainActivity2 extends AppCompatActivity {
private ExpandableListView expandableListView;
private List<List<itemsBean>> child ; //一共有两个List 第一个是组别，第二个是组别中的数据
private List<String> group; //组的名称
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
initData();
expandableListView = findViewById(R.id.eplistv_test);
//创建适配器
MyExListAdapter myExpandableList = new MyExListAdapter(MainActivity2.this,group,child);
expandableListView.setAdapter(myExpandableList);
//设置每一项的点击事件
expandableListView.setOnChildClickListener(new ExpandableListView.OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListView parent, View v, int groupPosition, int childPosition, long id) {
Toast.makeText(MainActivity2.this,"单击了"+child.get(groupPosition).get(childPosition).getId(),Toast.LENGTH_SHORT).show();
return false;
}
});
}
//设置一下模拟的数据
private void initData(){
List<itemsBean> items = new ArrayList(); //组别中的数据
child = new ArrayList();
group = new ArrayList<>();
group.add("我的好友");
group.add("朋友");
group.add("家人");
//第一组数据
items.add(new itemsBean(R.mipmap.pic2,"1","[电脑在线]"));
items.add(new itemsBean(R.mipmap.pic3,"编辑人生","[手机在线]"));
items.add(new itemsBean(R.mipmap.pic4,"编辑人生","[WIFI在线]"));
items.add(new itemsBean(R.mipmap.pic2,"编辑人生","[WIFI在线]"));
child.add(new ArrayList<itemsBean>(items));
items.clear();
//第二组数据
items.add(new itemsBean(R.mipmap.pic3,"2","[电脑在线]"));
items.add(new itemsBean(R.mipmap.pic4,"编辑人生","[手机在线]"));
items.add(new itemsBean(R.mipmap.pic2,"编辑人生","[平板在线]"));
items.add(new itemsBean(R.mipmap.pic2,"编辑人生","[平板在线]"));
child.add(new ArrayList<itemsBean>(items));
items.clear();
//第三组数据
items.add(new itemsBean(R.mipmap.pic3,"3","[电脑在线]"));
items.add(new itemsBean(R.mipmap.pic4,"编辑人生","[手机在线]"));
items.add(new itemsBean(R.mipmap.pic2,"编辑人生","[平板在线]"));
items.add(new itemsBean(R.mipmap.pic2,"编辑人生","[平板在线]"));
child.add(new ArrayList<itemsBean>(items));
items.clear();
}
}
（2）、我直接在代码了注释了 ，详情请看代码。
先写一下itemBean的get set方法
这是 child中各组件的数据类型的封装
方便后面的操作
package com.example.myapplication123;
public class itemsBean {
int pic;
String id;
String state;
public itemsBean(int pic, String id, String state) {
this.pic = pic;
this.id = id;
this.state = state;
}
public int getPic() {
return pic;
}
public void setPic(int pic) {
this.pic = pic;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
}
创建MyExListAdapter类 继承自BaseExpandableListAdapter
该类是 ExpandableListView的适配器
注意 重写的isChildSelectable方法 要返回true，不然点击事件不起作用。
package com.example.myapplication123;
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 java.util.List;
public class MyExListAdapter extends BaseExpandableListAdapter {
Context context;
private List<List<itemsBean>> child ; //一共有两个List 第一个是组别，第二个是组别中的数据
private List<String> group; //组的名称
public MyExListAdapter(Context context, List<String> group, List<List<itemsBean>> child){
this.context = context;
this.child = child;
this.group = group;
}
@Override
public int getGroupCount() {
return group.size();
}
@Override
public int getChildrenCount(int groupPosition) {
return child.get(groupPosition).size(); //需要注意
}
@Override
public Object getGroup(int groupPosition) {
return group.get(groupPosition);
}
@Override
public Object getChild(int groupPosition, int childPosition) {
return child.get(childPosition);
}
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
@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) {
groupHolder viewHolder;
if(convertView == null){
viewHolder = new groupHolder();
convertView = LayoutInflater.from(context).inflate(R.layout.eplistv_test_group,null);
//对viewHolder的属性进行赋值
viewHolder.tvId= convertView.findViewById(R.id.tv_id);
//使用setTag缓存起来方便多次重用
convertView.setTag(viewHolder);
}
else{
//如果缓存池中有对应的缓存，则直接通过getTag取出viewHolder
viewHolder = (groupHolder) convertView.getTag();
}
viewHolder.tvId.setText(group.get(groupPosition));
return convertView;
}
@Override
public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {
itemsHolder viewHolder;
if(convertView == null){
viewHolder = new itemsHolder();
convertView = LayoutInflater.from(context).inflate(R.layout.eplistv_test_child,null);
//对viewHolder的属性进行赋值
viewHolder.tvId= convertView.findViewById(R.id.tv_id);
viewHolder.imgPicture= convertView.findViewById(R.id.img_pic);
viewHolder.tvState= convertView.findViewById(R.id.tv_state);
//使用setTag缓存起来方便多次重用
convertView.setTag(viewHolder);
}
else{
//如果缓存池中有对应的缓存，则直接通过getTag取出viewHolder
viewHolder = (itemsHolder) convertView.getTag();
}
itemsBean info = (itemsBean) child.get(groupPosition).get(childPosition);
viewHolder.tvId.setText(info.getId());
viewHolder.tvState.setText(info.getState());
viewHolder.imgPicture.setImageResource(info.getPic());
return convertView;
}
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
class groupHolder{
//用于缓存Group控件
public TextView tvId;
}
class itemsHolder{
//用于缓存items控件
public ImageView imgPicture;
public TextView tvId,tvState;
}
}
最终实现效果图
