实现 Android Item Divider

介绍

在 Android 开发中，很多列表都需要在每个项之间添加分割线，以提高用户体验和可读性。本篇文章将教你如何实现 Android 列表项的分割线。

整体流程

下面是实现 Android Item Divider 的整体流程，可以用表格展示：

步骤 描述
步骤一 在项目中添加分割线资源文件
步骤二 创建自定义的 RecyclerView 分割线类
步骤三 在 RecyclerView 中应用分割线

接下来将详细介绍每个步骤需要做什么，并提供相应的代码和注释。

步骤一：添加分割线资源文件

首先，在项目的 res/drawable 目录下创建一个 XML 文件，用来定义分割线的样式。以下是一个示例的分割线样式：

<shape xmlns:android="
    android:shape="rectangle">
    <size
        android:width="1dp"
        android:height="1dp" />
    <solid android:color="#000000" />
</shape>

这个样式定义了一条宽度为 1dp，高度为 1dp 的黑色分割线。

步骤二：创建自定义的 RecyclerView 分割线类

接下来，需要创建一个自定义的 RecyclerView 分割线类，用于绘制分割线。以下是一个示例的分割线类：

public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    private Drawable divider;

    public DividerItemDecoration(Context context) {
        divider = ContextCompat.getDrawable(context, R.drawable.divider);
    }

    @Override
    public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);
            RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child.getLayoutParams();

            int top = child.getBottom() + params.bottomMargin;
            int bottom = top + divider.getIntrinsicHeight();

            divider.setBounds(left, top, right, bottom);
            divider.draw(canvas);
        }
    }
}

这个自定义的 DividerItemDecoration 类继承自 RecyclerView.ItemDecoration，并重写了 onDraw 方法，用于绘制分割线。在构造方法中，通过 ContextCompat.getDrawable 方法获取分割线的样式，然后在 onDraw 方法中根据子项的位置和布局参数绘制分割线。

步骤三：应用分割线

现在，我们需要在 RecyclerView 中应用分割线。在使用 RecyclerView 的地方，找到对应的布局文件，并在 XML 中添加以下代码：

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:divider="@drawable/divider"
    android:dividerHeight="1dp" />

在这个布局中，我们指定了分割线资源文件 @drawable/divider 和分割线的高度为 1dp。

接下来，在 Java 代码中为 RecyclerView 设置分割线，如下所示：

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.addItemDecoration(new DividerItemDecoration(this));

这里我们通过 addItemDecoration 方法为 RecyclerView 添加分割线，传入我们创建的自定义分割线类 DividerItemDecoration 的实例。

示例图

序列图

sequenceDiagram
    participant 开发者
    participant 小白
    开发者->>小白: 解释整个流程
    小白->>开发者: 理解流程
    开发者->>小白: 提供代码示例和注释
    小白->>开发者: 学习并实践代码
    开发者->>小白: 反馈结果

类图

classDiagram
    class RecyclerView {
        -int paddingLeft
        -int paddingRight
        -int getWidth()
        -int getChildCount()
        -View getChildAt(int index)
        +RecyclerView.LayoutParams getLayoutParams()
        +void addItemDecoration(ItemDecoration decoration)
    }