多层级列表在Android中的实现

✍️作者简介：小北编程（专注于HarmonyOS、Android、Java、Web、TCP/IP等技术方向）
🐳博客主页：开源中国、稀土掘金、51cto博客、博客园、知乎、简书、慕课网、优快云
🔔如果文章对您有一定的帮助请👉关注✨、点赞👍、收藏📂、评论💬。
🔥如需转载请参考【转载须知】

在Android应用中，多层级列表是一种常见的UI设计，它可以展示层次化结构的数据，提供了更好的用户体验。在本文中，我们将讨论如何使用RecyclerView和自定义适配器来实现一个多层级列表，并深入探讨适配器的设计思路。

多层级列表是一种能够展示层次化数据结构的UI组件。每个列表项可以包含子项，形成一个树状结构。在Android开发中，我们通常使用RecyclerView来实现多层级列表，其中每个层级的数据由一个数据模型类表示。

首先以前写过两片关于多层列表的实现但是都没有这个简介也可以参考一下以往的demo

使用ExpandableListView实现三级列表
使用 RecyclerView 和 BaseMultiItemQuickAdapter 实现固定列表
使用RecyclerView来实现多层级的数据

一 使用Java代码实现无限层级

一：json 数据片段

{
  "data": [
    {
      "children": [
        {
          "children": null,
          "hasChildren": false,
          "id": "09364bf96d3e47b2a06a30cb24f12cc0",
          "typeName": "电器开关",
          "typeCode": "开关",
          "pId": "35b77cb51bfa41308ea0254807a7e52d",
          "path": "|35b77cb51bfa41308ea0254807a7e52d|09364bf96d3e47b2a06a30cb24f12cc0|",
          "pathName": "测试电器/电器开关",
          "createUserId": "3e739bc61dda11ed876a44a84233a5df",
          "createUserName": "管理员",
          "createTime": "2022-11-15 09:17"
        },
        {
          "children": null,
          "hasChildren": false,
          "id": "2c3585fdf29b428d9b331b5cdbd86707",
          "typeName": "低压柜",
          "typeCode": "DYG",
          "pId": "35b77cb51bfa41308ea0254807a7e52d",
          "path": "|35b77cb51bfa41308ea0254807a7e52d|2c3585fdf29b428d9b331b5cdbd86707|",
          "pathName": "测试电器/低压柜",
          "createUserId": "3e739bc61dda11ed876a44a84233a5df",
          "createUserName": "管理员",
          "createTime": "2022-11-15 09:18"
        },
        {
          "children": null,
          "hasChildren": false,
          "id": "cb718f3ab55644e3a12dd9e7efbb3552",
          "typeName": "变压器",
          "typeCode": "BYQ",
          "pId": "35b77cb51bfa41308ea0254807a7e52d",
          "path": "|35b77cb51bfa41308ea0254807a7e52d|cb718f3ab55644e3a12dd9e7efbb3552|",
          "pathName": "测试电器/变压器",
          "createUserId": "3e739bc61dda11ed876a44a84233a5df",
          "createUserName": "管理员",
          "createTime": "2022-11-15 09:18"
        }
      ],
      "hasChildren": true,
      "id": "35b77cb51bfa41308ea0254807a7e52d",
      "typeName": "测试电器",
      "typeCode": "csdq",
      "pId": "",
      "path": "|35b77cb51bfa41308ea0254807a7e52d|",
      "pathName": "测试电器",
      "createUserId": "3e739bc61dda11ed876a44a84233a5df",
      "createUserName": "管理员",
      "createTime": "2022-11-15 09:16"
    } 
  ],
  "msg": null,
  "status": 200
}

理论上children可以无限增加，但是很少有太多层级的目录！2、3层的比较多！

二：json 转译 Bean文件

首先，我们定义一个数据模型类TreeItemBean，代表多层级列表中的每个项。该类包含必要的属性，如children（子项列表）、isOpen（是否展开）、level（层级）等。我们可以使用如下的数据模型：

public class TreeItemBean {
    private List<TreeItemBean> children;
    private boolean isOpen;
    private boolean hasChildren;
    private String id;
    private String typeName;
    private String typeCode;
    private String pId;
    private String path;
    private String pathName;
    private String createUserId;
    private String createUserName;
    private String createTime;
    private int level; // 用于存储当前项的级别

    public int getLevel() {
        return level;
    }

    public void setLevel(int level) {
        this.level = level;
    }

    public List<TreeItemBean> getChildren() {
        return children;
    }

    public void setChildren(List<TreeItemBean> children) {
        this.children = children;
    }

    public boolean isOpen() {
        return isOpen;
    }

    public void setOpen(boolean open) {
        isOpen = open;
    }

    public boolean isHasChildren() {
        return hasChildren;
    }

    public void setHasChildren(boolean hasChildren) {
        this.hasChildren = hasChildren;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getTypeName() {
        return typeName;
    }

    public void setTypeName(String typeName) {
        this.typeName = typeName;
    }

    public String getTypeCode() {
        return typeCode;
    }

    public void setTypeCode(String typeCode) {
        this.typeCode = typeCode;
    }

    public String getPId() {
        return pId;
    }

    public void setPId(String pId) {
        this.pId = pId;
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }

    public String getPathName() {
        return pathName;
    }

    public void setPathName(String pathName) {
        this.pathName = pathName;
    }

    public String getCreateUserId() {
        return createUserId;
    }

    public void setCreateUserId(String createUserId) {
        this.createUserId = createUserId;
    }

    public String getCreateUserName() {
        return createUserName;
    }

    public void setCreateUserName(String createUserName) {
        this.createUserName = createUserName;
    }

    public String getCreateTime() {
        return createTime;
    }

    public void setCreateTime(String createTime) {
        this.createTime = createTime;
    }
}

三：xml 布局文件

<?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=".ui.tree.MultiLevelTreeActivity">

    <TextView
        android:id="@+id/tvHint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="一个适配器实现多层级列表"
        android:padding="@dimen/dp_10"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@+id/tvHint"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintVertical_bias="1.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

四：适配器Adapter代码

1. 适配器Adapter代码片段

我们需要创建一个RecyclerView适配器来显示多层级列表。下面是一个示例适配器TreeAdapter的设计：

public class TreeAdapter extends RecyclerView.Adapter<TreeAdapter.TreeViewHolder> {

    private final Context mContext;
    private final List<TreeItemBean> treeItemList;
    private int selectPosition = RecyclerView.NO_POSITION;

    public TreeAdapter(Context context, List<TreeItemBean> list) {
        this.mContext = context;
        this.treeItemList = list;
    }

    public void setSelectPosition(int position) {
        this.selectPosition = position;
        notifyDataSetChanged();
    }

    @NonNull
    @Override
    public TreeViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        ItemLevelTreeBinding binding = ItemLevelTreeBinding.inflate(
                LayoutInflater.from(parent.getContext()), parent, false);
        return new TreeViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull TreeViewHolder holder, int position) {
        TreeItemBean treeItem = treeItemList.get(position);
        holder.bind(treeItem);
    }

    @Override
    public int getItemCount() {
        return treeItemList.size();
    }

    public class TreeViewHolder extends RecyclerView.ViewHolder {

        private final ItemLevelTreeBinding binding;

        public TreeViewHolder(ItemLevelTreeBinding binding) {
            super(binding.getRoot());
            this.binding = binding;
        }

        public void bind(TreeItemBean treeItem) {
            // 根据层级设置左边距
            int leftPadding = treeItem.getLevel() * 50;
            binding.tvName.setPadding(leftPadding, 0, 0, 0);
            binding.tvName.setText(treeItem.getTypeName());

            // 根据展开状态设置箭头图标
            if (treeItem.getChildren() != null && !treeItem.getChildren().isEmpty()) {
                if (treeItem.isOpen()) {
                    binding.ivNext.setRotation(90);
                } else {
                    binding.ivNext.setRotation(0);
                }
            } else {
                binding.ivNext.setVisibility(View.GONE);
            }

            // 设置点击事件
            itemView.setOnClickListener(v -> {
                // 切换展开状态
                treeItem.setOpen(!treeItem.isOpen());
                // 局部刷新，只刷新当前点击的位置和其子项的数据
                notifyItemChanged(getBindingAdapterPosition());
                if (onItemClickListener != null){
                    onItemClickListener.onItemClick(v,getBindingAdapterPosition(),treeItem);
                }
                setSelectPosition(getBindingAdapterPosition());
            });

            // 如果没有数据子列表不显示
            binding.recyclerView.setVisibility(treeItem.isOpen() ? View.VISIBLE : View.GONE);

            // 如果有子数据，设置适配器并显示箭头
            if (treeItem.getChildren() != null && !treeItem.getChildren().isEmpty()) {
                binding.ivNext.setVisibility(View.VISIBLE);
                binding.recyclerView.setVisibility(treeItem.isOpen() ? View.VISIBLE : View.GONE);
                // 计算子项的级别，加上适当的偏移量
                int childLevel = treeItem.getLevel() + 1;
                for (TreeItemBean child : treeItem.getChildren()) {
                    child.setLevel(childLevel);
                }
                binding.recyclerView.setLayoutManager(new LinearLayoutManager(mContext));
                TreeAdapter childAdapter = new TreeAdapter(mContext, treeItem.getChildren());
                binding.recyclerView.setAdapter(childAdapter);

                childAdapter.setOnItemClickListener(new OnItemClickListener() {
                    @Override
                    public void onItemClick(View view, int position, TreeItemBean model) {
                        if (onItemClickListener != null) {
                            onItemClickListener.onItemClick(view, position, model);
                        }
                    }
                });
            } else {    // 没有子数据，隐藏箭头
                binding.ivNext.setVisibility(View.GONE);
                binding.recyclerView.setVisibility(View.GONE);
            }

            // 根据是否带有右箭头来设置背景颜色
            itemView.setBackgroundColor(ContextCompat.getColor(mContext, binding.ivNext.getVisibility() == View.VISIBLE
                    && getBindingAdapterPosition() == selectPosition ? R.color.bg_default : R.color.white));
        }
    }

    private OnItemClickListener onItemClickListener;

    public void setOnItemClickListener(OnItemClickListener listener) {
        this.onItemClickListener = listener;
    }

    public interface OnItemClickListener {
        void onItemClick(View view, int position, TreeItemBean model);
    }
}

2. 适配器布局文件

注意：代码使用的是dataBinding
里面的com.example.viewmodel.YourViewModel 修改为你的 TreeAdapter 地址

<layout 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">

    <data>
        <variable
            name="viewModel"
            type="com.example.viewmodel.YourViewModel" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/tvName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:textColor="#333333"
                android:textSize="15sp"
                tools:text="cessssssssssss"/>

            <ImageView
                android:id="@+id/ivNext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:src="@drawable/arrow_right" />
        </RelativeLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</layout>

五：Java 代码片段

在 TreeActivity 类中，我们使用上述的 TreeAdapter 来设置 RecyclerView，并通过点击事件展示选中项目的信息。

/**
 *
 * @author: xtxiaolu
 * @date: 2023/11/29
 * 描述: 多级树 不固定层级
 */
public class TreeActivity extends BaseActivity {
    private ActivityTreeBinding binding;
    private List<TreeItemBean> treeItemList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityTreeBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        String rqsJson = AssetsUtil.getAssetsJson(this,"MultiLevelTree.json");
        BaseBean data = MyJson.fromJson(rqsJson, BaseBean.class);
        treeItemList = MyJson.fromJson(MyJson.toJson(data.getData()), new TypeToken<List<TreeItemBean>>() {
        }.getType());

        binding.recyclerView.setLayoutManager(new LinearLayoutManager(this));
        binding.recyclerView.addItemDecoration(new DividerItemDecoration(this,DividerItemDecoration.VERTICAL));
        TreeAdapter treeAdapter = new TreeAdapter(this, treeItemList);
        binding.recyclerView.setAdapter(treeAdapter);

        treeAdapter.setOnItemClickListener((view, position, model) -> {
            ToastUtil.showShort("当前点击的数据为 " + model.getTypeName());
        });
    }
}

二 使用kotlin代码实现无限层级

说明json是通用的参考 json数据片段
XML布局也是通用的才考上面的代码这里只贴kotlin适配器和Activity

class KTTreeAdapter(private val mContext: Context, private val treeItemList: List<TreeItemBean>) :
    RecyclerView.Adapter<KTTreeAdapter.KTTreeViewHolder>() {

    private var selectPosition = RecyclerView.NO_POSITION
    private var onItemClickListener: OnItemClickListener? = null

    fun setSelectPosition(position: Int) {
        selectPosition = position
        notifyDataSetChanged()
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): KTTreeViewHolder {
        val binding = ItemLevelTreeBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return KTTreeViewHolder(binding)
    }

    override fun onBindViewHolder(holder: KTTreeViewHolder, position: Int) {
        val treeItem = treeItemList[position]
        holder.bind(treeItem)
    }

    override fun getItemCount(): Int {
        return treeItemList.size
    }

    inner class KTTreeViewHolder(val binding: ItemLevelTreeBinding) :
        RecyclerView.ViewHolder(binding.root) {

        fun bind(treeItem: TreeItemBean) {
            // 根据层级设置左边距
            val leftPadding = treeItem.level * 50
            binding.tvName.setPadding(leftPadding, 0, 0, 0)
            binding.tvName.text = treeItem.typeName

            // 根据展开状态设置箭头图标
            if (treeItem.children != null && treeItem.children.isNotEmpty()) {
                if (treeItem.isOpen) {
                    binding.ivNext.rotation = 90f
                } else {
                    binding.ivNext.rotation = 0f
                }
            } else {
                binding.ivNext.visibility = View.GONE
            }

            // 设置点击事件
            itemView.setOnClickListener {
                // 切换展开状态
                treeItem.isOpen = !treeItem.isOpen
                // 局部刷新，只刷新当前点击的位置和其子项的数据
                notifyItemChanged(bindingAdapterPosition)
                onItemClickListener?.onItemClick(itemView, bindingAdapterPosition, treeItem)
                setSelectPosition(bindingAdapterPosition)
            }

            // 如果没有数据子列表不显示
            binding.recyclerView.visibility = if (treeItem.isOpen) View.VISIBLE else View.GONE

            // 如果有子数据，设置适配器并显示箭头
            if (treeItem.children != null && treeItem.children.isNotEmpty()) {
                binding.ivNext.visibility = View.VISIBLE
                binding.recyclerView.visibility = if (treeItem.isOpen) View.VISIBLE else View.GONE
                // 计算子项的级别，加上适当的偏移量
                val childLevel = treeItem.level + 1
                treeItem.children.forEach { child ->
                    child.level = childLevel
                }
                binding.recyclerView.layoutManager = LinearLayoutManager(mContext)
                val childAdapter = TreeAdapter(
                    mContext,
                    treeItem.children
                )
                binding.recyclerView.adapter = childAdapter

                childAdapter.setOnItemClickListener { view, position, model ->
                    onItemClickListener?.onItemClick(view, position, model)
                }
            } else {    // 没有子数据，隐藏箭头
                binding.ivNext.visibility = View.GONE
                binding.recyclerView.visibility = View.GONE
            }

            // 根据是否带有右箭头来设置背景颜色
            itemView.setBackgroundColor(
                ContextCompat.getColor(
                    mContext,
                    if (binding.ivNext.visibility == View.VISIBLE
                        && bindingAdapterPosition == selectPosition
                    ) R.color.bg_default else R.color.white
                )
            )
        }
    }

    fun setOnItemClickListener(listener: OnItemClickListener) {
        this.onItemClickListener = listener
    }

    interface OnItemClickListener {
        fun onItemClick(view: View, position: Int, model: TreeItemBean)
    }
}

class KTreeActivity : BaseActivity() {
    private lateinit var binding: ActivityTreeBinding
    private var treeItemList: List<TreeItemBean> = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityTreeBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val rqsJson = loadJsonFromAsset("MultiLevelTree.json")
        val baseBean = MyJson.fromJson<BaseBean<*>>(rqsJson, BaseBean::class.java)

        treeItemList = MyJson.toJson(baseBean.getData())?.let {
            MyJson.fromJson<List<TreeItemBean>>(
                it,
                object : TypeToken<ArrayList<TreeItemBean?>?>() {}.type
            )
        }!!

        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        binding.recyclerView.addItemDecoration(
            DividerItemDecoration(
                this,
                DividerItemDecoration.VERTICAL
            )
        )

        val treeAdapter = KTTreeAdapter(this, treeItemList)
        binding.recyclerView.adapter = treeAdapter
        treeAdapter.setOnItemClickListener(object : KTTreeAdapter.OnItemClickListener {
            override fun onItemClick(view: View, position: Int, model: TreeItemBean) {
                ToastUtil.showShort("当前点击的数据为 ${model.typeName}")
            }
        })

    }

    private fun loadJsonFromAsset(fileName: String): String {
        return assets.open(fileName).bufferedReader().use { it.readText() }
    }
}

三：总结/代码链接

通过以上步骤，我们实现了一个基本的多层级列表，并深入讨论了适配器的设计思路。在实际开发中，可以根据需求进行扩展，添加更多的样式和交互效果，以提供更好的用户体验。多层级列表是Android应用中常见的UI组件之一，掌握其实现原理对于构建复杂的界面结构至关重要。

如果需要代码点击链接：gitee代码链接

无论是哪个阶段，坚持努力都是成功的关键。不要停下脚步，继续前行，即使前路崎岖，也请保持乐观和勇气。相信自己的能力，你所追求的目标定会在不久的将来实现。加油！📣

编码不仅仅是一项技能，更是一种态度。愿你的代码生涯充满创造力和乐趣，愿你的程序梦想绽放光芒。加油，未来的代码之星！