首页 > 其他分享> > Android ExpandableListView—仿QQ可折叠列表

Android ExpandableListView—仿QQ可折叠列表

2020-11-23 12:59:50 作者：互联网

ExpandableListView

- 简介
- 使用

简介

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;
    }
}

最终实现效果图
在这里插入图片描述

标签：QQ,viewHolder,int,items,ExpandableListView,add,new,Android,public
来源： https://blog.csdn.net/weixin_44758662/article/details/109964627