从入门到精通ItemDecoration（二）：实战篇

Android

2023-11-17 09:29:49

前提知识
为了更好地理解这篇文章，我们假设你已经掌握了以下知识：

Android 基础知识
RecyclerView 的基本使用
布局管理器的概念和使用
ItemDecoration 的基本概念和使用方法

如果你还没有掌握这些知识，建议你阅读以下文章：

阅读顺序

建议你按照以下顺序阅读这篇文章：

入门篇：ItemDecoration 简介
实战篇：ItemDecoration 实例解析
进阶篇：ItemDecoration 原理分析

ItemDecoration 实战案例

接下来，我们将通过一系列实战案例，演示如何使用 ItemDecoration 实现各种常见的分隔效果。

1. (LinearLayoutManager) 最简单的分割线实现

最简单的分割线实现就是使用 DividerItemDecoration 类。这个类提供了两种构造函数：

DividerItemDecoration(Context context, int orientation)
DividerItemDecoration(Context context, int orientation, int drawableId)

第一个构造函数只指定了分割线的方向，第二个构造函数还指定了分割线的资源 ID。

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));

以上代码实现了一个垂直方向的简单分割线。

2. (LinearLayoutManager) 自定义分割线样式

如果你想自定义分割线的样式，可以使用自定义的 ItemDecoration 类。例如，我们可以创建一个简单的矩形分割线：

public class MyDividerItemDecoration extends RecyclerView.ItemDecoration {

    private int height;
    private int color;

    public MyDividerItemDecoration(int height, int color) {
        this.height = height;
        this.color = color;
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.bottom = height;
    }

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

        for (int i = 0; i < parent.getChildCount(); i++) {
            View child = parent.getChildAt(i);
            int top = child.getBottom();
            int bottom = top + height;
            Paint paint = new Paint();
            paint.setColor(color);
            paint.setStyle(Paint.Style.FILL);
            c.drawRect(left, top, right, bottom, paint);
        }
    }
}

然后在 RecyclerView 中使用这个自定义的 ItemDecoration：

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
recyclerView.addItemDecoration(new MyDividerItemDecoration(5, Color.RED));

以上代码实现了一个红色矩形分割线。

3. (GridLayoutManager) 网格布局的分割线实现

网格布局的分割线实现与线性布局的分割线实现基本相同，只是需要使用 GridItemDecoration 类而不是 DividerItemDecoration 类。

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new GridLayoutManager(this, 3));
recyclerView.addItemDecoration(new GridItemDecoration(this, 10, Color.RED));

以上代码实现了一个网格布局的分割线，网格单元之间的间距为 10dp，分割线的颜色为红色。

4. (StaggeredGridLayoutManager) 瀑布流布局的分割线实现

瀑布流布局的分割线实现与线性布局的分割线实现和网格布局的分割线实现都不同，需要使用 StaggeredGridItemDecoration 类。

RecyclerView recyclerView = findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL));
recyclerView.addItemDecoration(new StaggeredGridItemDecoration(this, 10, Color.RED));

以上代码实现了一个瀑布流布局的分割线，瀑布流单元之间的间距为 10dp，分割线的颜色为红色。