Android ExpandableListView—仿QQ可折疊串列

簡介

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

最終實作效果圖