Android RecyclerView ItemDecoration 分割线

最新推荐文章于 2025-03-18 14:49:18 发布
最新推荐文章于 2025-03-18 14:49:18 发布
阅读量2.9k 收藏 9
点赞数 2
文章标签： RecyclerView分割线 ItemDecoration zhaoyanjun android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zhaoyanjun6/article/details/111302734
版权

转载请标明出处：http://blog.youkuaiyun.com/zhaoyanjun6/article/details/111302734
本文出自【赵彦军的博客】

文章目录

如何设置分割线

RecycleView 没有像ListView一样可以直接在 xml 中或者通过 setDivider（）方法设置分割线的方法。它是通过 RecycleView 的 addItemDecoration(ItemDecoration decor) 方法来设置的。很显然，我们需要传入一个 ItemDecoration 对象，这个对象是一个抽象类，官方已经提供了一种常用分割线类：DividerItemDecoration。来看一下用法：

recyclerView.addItemDecoration(itemDecoration)

    public void addItemDecoration(@NonNull ItemDecoration decor) {
        addItemDecoration(decor, -1);
    }

ItemDecoration 是一个抽象类

  public abstract static class ItemDecoration {
      
        public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull State state) {
            onDraw(c, parent);
        }

        @Deprecated
        public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent) {
        }

        public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent,
                @NonNull State state) {
            onDrawOver(c, parent);
        }
        
        @Deprecated
        public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent) {
        }

        @Deprecated
        public void getItemOffsets(@NonNull Rect outRect, int itemPosition,
                @NonNull RecyclerView parent) {
            outRect.set(0, 0, 0, 0);
        }

        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view,
                @NonNull RecyclerView parent, @NonNull State state) {
            getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(),
                    parent);
        }
    }

从源码的注释文档可以看出：

  • ItemDecoration 可以为 item 添加绘图，还可以设置偏移量
  • ItemDecoration 可以用于实现 item 之间的分隔线、高亮显示、可视分组等功能
  • ItemDecoration 中的 onDraw() 方法先于 item 绘制，onDrawOver(Canvas, RecyclerView, RecyclerView.State方法执行顺序在 item 的绘制之后

DividerItemDecoration使用

DividerItemDecoration 是 Google 官方实现的分割线实现类，DividerItemDecoration 继承 ItemDecoration

public class DividerItemDecoration extends RecyclerView.ItemDecoration {
   ...
}

recyclerView如何使用

recyclerView.adapter = UserAdapter(getData())
recyclerView.layoutManager = LinearLayoutManager(this)
var dividerItemDecoration = DividerItemDecoration(this,DividerItemDecoration.VERTICAL)
//设置一个分割线
recyclerView.addItemDecoration(dividerItemDecoration)

代码运行起来，来看看效果：
在这里插入图片描述
recyclerView 已经显示了一条细细的分割线，美观度还算可以。
通过源码打断点调试，默认的分割线高度是 3 pix .
在这里插入图片描述
如果我们要改变分割线的颜色，该怎么做呢？
答案其实还挺简单，dividerItemDecoration 需要设置一个 drawable , 这个 drawable 就是 分割线。

在 drawable 文件夹里面新建 list_item_bg 文件

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 自定义分割线高度 -->

    <size android:height="5dp" />

    <!-- 自定义分割线圆角 -->
    <corners android:radius="1dp" />

    <!-- 自定义分割线渐变 -->
    <gradient
        android:angle="0"
        android:endColor="#FFDC9E "
        android:startColor="#D9983B"
        android:type="linear" />
</shape>

修复后的代码如下：

recyclerView.adapter = UserAdapter(getData())
recyclerView.layoutManager = LinearLayoutManager(this)
var dividerItemDecoration = DividerItemDecoration(this,DividerItemDecoration.VERTICAL)
//设置一个分割线背景
dividerItemDecoration.setDrawable(resources.getDrawable(R.drawable.list_item_bg))
//添加一个分割线
recyclerView.addItemDecoration(dividerItemDecoration)

我们把代码运行起来，看看效果：
在这里插入图片描述
自定义的分割线美观度还可以，但是我们发现一个问题，recyclerView 的最后一行底部也有一个分割线，这就不太美观了，效果如下：
在这里插入图片描述
问题又来了，怎么去掉最后一行的分割线？答案是做不到，系统提供的 DividerItemDecoration 类没有相关api。只能我们自定义 ItemDecoration 。

自定义 ItemDecoration getItemOffsets

第一步，重写 getItemOffsets 方法，如下

package com.cootek.recyclerviewdemo;

import android.graphics.Rect;
import android.view.View;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

/**
 * @author yanjun.zhao
 * @time 2020/12/21 2:57 PM
 * @desc
 */
class MyListItemDecoration extends RecyclerView.ItemDecoration {
    
    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
    }
}
  • getItemOffsets 可以通过outRect.set(l,t,r,b)设置指定 itemview的偏移量。

接下来，我们实验一下，把每一个 item 底部都留 10 px 的位置。

/**
 * @author yanjun.zhao
 * @time 2020/12/21 2:57 PM
 * @desc
 */
class MyListItemDecoration extends RecyclerView.ItemDecoration {

    @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 = 10 ;  //底部偏移10px
    }
}

使用如下：

//添加自定义 ItemDecoration
var dividerItemDecoration = MyListItemDecoration()
recyclerView.addItemDecoration(dividerItemDecoration)

recyclerView.adapter = UserAdapter(getData())
recyclerView.layoutManager = LinearLayoutManager(this)

运行起来，效果如下：
在这里插入图片描述

如果我们把右边也设置一个偏移，代码如下：

/**
 * @author yanjun.zhao
 * @time 2020/12/21 2:57 PM
 * @desc 自定义 ItemDecoration
 */
class MyListItemDecoration extends RecyclerView.ItemDecoration {

    @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 = 10 ;  //底部偏移
        outRect.right = 10;    //右边偏移
    }
}

效果如下：
在这里插入图片描述
可以看到 recyclerView 的每一个item 底部、右边都有一个偏移。

如果最后一个 item 不绘制偏移量，怎么处理：

/**
 * @author yanjun.zhao
 * @time 2020/12/21 2:57 PM
 * @desc 自定义 ItemDecoration
 */
class MyListItemDecoration extends RecyclerView.ItemDecoration {

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

        int childPosition = parent.getChildAdapterPosition(view);
        int itemCount = parent.getAdapter().getItemCount();

        //最后一个item 不绘制
        if (childPosition != itemCount - 1) {
            outRect.bottom = 10;  //底部偏移
            outRect.right = 10;    //右边偏移
        }
    }
}

效果如下：
在这里插入图片描述

自定义 ItemDecoration onDraw onDrawOver

在官方的开发文档中有指出，onDraw 是在itemview 绘制之前，onDrawOver 是在 itemview 绘制之后。

可以看看下面的部分源码：

/**
     * RecyclerView的draw方法
     * @param c
     */
    @Override
    public void draw(Canvas c) {
        // 调用父类也就是View的draw方法
        super.draw(c);
        final int count = mItemDecorations.size();
        for (int i = 0; i < count; i++) {
            // 执行ItemDecorations的onDrawOver方法
            mItemDecorations.get(i).onDrawOver(c, this, mState);
        }
    }

    /**
     *  View的draw方法
     * @param canvas
     */
    @CallSuper
    public void draw(Canvas canvas) {
        ....
        // View会继续调用onDraw
        if (!dirtyOpaque) onDraw(canvas);
        ....
    }

    /**
     * RecyclerView的onDraw方法
     * @param c
     */
    @Override
    public void onDraw(Canvas c) {
        super.onDraw(c);
        final int count = mItemDecorations.size();
        for (int i = 0; i < count; i++) {
            // 执行ItemDecorations的onDraw方法
            mItemDecorations.get(i).onDraw(c, this, mState);
        }
    }

实战1：使用 onDrawOver() 方法在 item 的上画一个半透明的蒙版

效果如下：
在这里插入图片描述
颜色值：

<resources>
    <!--半透明-->
    <color name="item_bg">#80000000</color>
</resources>

MyListItemDecoration 源码如下：

package com.cootek.recyclerviewdemo;

import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.Log;
import android.view.View;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

/**
 * @author yanjun.zhao
 * @time 2020/12/21 2:57 PM
 * @desc 自定义 ItemDecoration
 */
class MyListItemDecoration extends RecyclerView.ItemDecoration {

    private Paint mPaint;   //分割线画笔

    MyListItemDecoration() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
    }

    @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 = 20;  //底部偏移量
        outRect.right = 10; //右边偏移量
        outRect.left = 10; //左边偏移量
    }

    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDrawOver(c, parent, state);

        //设置半透明颜色
        mPaint.setColor(parent.getResources().getColor(R.color.item_bg));


        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {

            if (i % 2 == 0) {
                continue;
            }

            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getTop();
            final int bottom = top + params.height;
            final int left = child.getLeft();
            final int right = child.getWidth() + left;
            //在recyclerView item 上画一个半透明的蒙版
            c.drawRect(left, top, right, bottom, mPaint);
        }
    }

}

使用如下：

var dividerItemDecoration = MyListItemDecoration()
recyclerView.addItemDecoration(dividerItemDecoration)
recyclerView.adapter = UserAdapter(getData())
recyclerView.layoutManager = GridLayoutManager(this, 1)

//两列
findViewById<Button>(R.id.bt1).setOnClickListener {
       recyclerView.layoutManager = GridLayoutManager(this, 2)
}

//三列
findViewById<Button>(R.id.bt2).setOnClickListener {
       recyclerView.layoutManager = GridLayoutManager(this, 3)
}

//四列
findViewById<Button>(R.id.bt3).setOnClickListener {
      recyclerView.layoutManager = GridLayoutManager(this, 4)
}

实战2：自定义分割线颜色

废话不多说，线上效果图：
在这里插入图片描述

package com.cootek.recyclerviewdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.view.View;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

/**
 * @author yanjun.zhao
 * @time 2020/12/21 2:57 PM
 * @desc 自定义 ItemDecoration
 */
class MyListItemDecoration extends RecyclerView.ItemDecoration {

    private Paint mPaint;   //分割线画笔
    private int lingHeight = 0;  //分割线高度

    MyListItemDecoration(Context context) {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK); //设置分割线颜色
        lingHeight = dpToPx(context, 1);
    }

    @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 = lingHeight;  //底部偏移量
    }

    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDrawOver(c, parent, state);

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + lingHeight;
            final int left = child.getLeft();
            final int right = child.getWidth() + left;
            c.drawRect(left, top, right, bottom, mPaint);
        }
    }

    int dpToPx(Context context, int dps) {
        return Math.round(context.getResources().getDisplayMetrics().density * dps);
    }
}

实战3：自定义分割线左侧偏移量

先看一个 iphone 设置页面，请认真观察分割线，如下图：
在这里插入图片描述
我们注意到一个细节，分割线的宽度不是充满屏幕的，而是在左边有一个偏移量，这种效果怎么做呢？

代码如下：

package com.cootek.recyclerviewdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.view.View;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

/**
 * @author yanjun.zhao
 * @time 2020/12/21 2:57 PM
 * @desc 自定义 ItemDecoration
 */
class MyListItemDecoration extends RecyclerView.ItemDecoration {

    private Paint mPaint;   //分割线画笔
    private int lingHeight = 0;  //分割线高度
    private int lineMarginLeft = 0;

    MyListItemDecoration(Context context) {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK); //设置分割线颜色
        lingHeight = dpToPx(context, 1);
        lineMarginLeft = dpToPx(context, 20);  //设置左侧偏移量
    }

    @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 = lingHeight;  //底部偏移量
    }

    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDrawOver(c, parent, state);

        final int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            final int top = child.getBottom() + params.bottomMargin;
            final int bottom = top + lingHeight;
            final int left = child.getLeft() + lineMarginLeft;
            final int right = child.getWidth() + left - lineMarginLeft;
            c.drawRect(left, top, right, bottom, mPaint);
        }
    }

    int dpToPx(Context context, int dps) {
        return Math.round(context.getResources().getDisplayMetrics().density * dps);
    }
}

运行效果图如下：
在这里插入图片描述

Android RecyclerView —— 自定义分割线
ITRenj的博客
06-17 3591
Android RecyclerView —— 自定义分割线 Android RecyclerView —— 基本使用 Android RecyclerView —— 适配器封装探索 前面说了 RecyclerView 的基本使用以及对适配器的封装，但是在使用 ListView 时，有 dividerHeight 和 divider 属性用来设置分割线的高度和颜色(Drawable)，但是在 Re...
Android RecyclerView ItemDecoration 类解析
weixin_38478780的博客
10-01 918
一、前言 毫无疑问，RecyclerView\color{red}{RecyclerView }RecyclerView 是现在 Android\color{red}{Android}Android 中最重要的系统组件之一，它的出现就是为了高效代替 ListView 和 GridView。 RecyclerView 虽然比 ListView 更好用，但是某些地方也更复杂了，它将更多的权力交给了开发者自己，比如布局，比如 ITEM 的分割线，比如点击监听等等。大部分情况下，RecyclerView 的基本用法
Android IRecyclerView 设置分割线
03-05
IReyclerView 与RecyclerView 的分割线不同，IRecyclerView headerView 和 footerView 中都默认有两个View，分割线设置也不一样 使用： //添加分割线 IRecyclerLinearVerticalDivider recyclerViewDivider = new IRecyclerLinearVerticalDivider(this, LinearLayoutManager.VERTICAL); recyclerViewDivider.setDrawable(getResources().getDrawable(R.drawable.divider_line_ed_0_5dp), DisplayUtil.dip2px(this, 15), DisplayUtil.dip2px(this, 15), false); mRecyclerView.addItemDecoration(recyclerViewDivider);
Android RecyclerView添加分隔线 DividerItemDecoration
热门推荐
打渔还是晒网 —— stone
04-09 1万+
RecyclerView的分隔线需要自定义设置 DividerItemDecoration 是一个官方的例子中的 mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL_LIST)); mRecyclerView.addItemDecoration
Android中RecycleView自定义网格分割线ItemDecoration
最新发布
derek_chou的博客
03-18 173
【代码】Android中RecycleView自定义网格分割线ItemDecoration。
Android 最强RecyclerView分割线XRecyclerViewDivider重磅来袭！！
黄小梁的博客
06-02 3317
目录前言一、分割线绘制原理二、XRecyclerViewDivider的功能1.LinearLayoutManager2.GridLayoutManager2.StaggeredGridLayoutManager总结 前言 沉浸在Android前端这几年里，接触最多的业务就是RecyclerView列表展示数据了，每次写到需要分割线时都是到网上copy，有时候一些分割线又不能满足需求，只能在布局上做文章。 虽然这样可以实现需求，但是总感觉这样写会写很多重复的代码，这边添加了View，那边又设置paddin
Android RecyclerView分割线
Agnoi丶军
03-16 413
1.分割线public class RecycleViewDivider extends RecyclerView.ItemDecoration { private Paint mPaint; private Drawable mDivider; private int mDividerHeight = 2;//分割线高度，默认为2px private int m...
Android实现RecyclerView添加分割线的简便方法
08-29
Android 实现 RecyclerView 添加分割线的简便方法 RecyclerView 是 Android 开发中常用的控件之一，用于显示列表数据。但是，RecyclerView 默认情况下不具备分割线功能，需要开发者自己添加。今天，我们将讨论 ...
RecyclerView底部分割线去除的方法
08-30
首先，我们要理解RecyclerView的分割线是通过`DividerItemDecoration`类实现的，它在`onDraw()`方法中绘制分割线，并在`getItemOffsets()`方法中为每个Item设置额外的间距，以容纳分割线。因此，要移除底部的分割线...
Android RecyclerView网格布局（支持多种分割线）详解(2)
08-31
总的来说，Android的RecyclerView网格布局通过结合`GridLayoutManager`和`RecyclerView.ItemDecoration`，可以轻松实现定制化的分割线效果。开发者可以根据项目的具体需求，选择颜色分割线或图片分割线，以及设置...
Android RecyclerView实现水平、垂直方向分割线
08-30
Android RecyclerView实现水平、垂直方向分割线 Android RecyclerView是Android系统中一个强大的控件，能够帮助开发者快速构建复杂的列表控件。然而，在使用RecyclerView时，往往需要添加分割线来提高用户体验。...
Android RecyclerView万能分割线
08-23
android recyclerview的万能分割线。由于android的recyclerview不带分割线效果，花了一段时间整理出了一份最强的万能分割线工具类。与大家分享
自定义RecyclerView.ItemDecoration，实现Item的等间距分割以及分割线效果Demo
07-27
自定义RecyclerView.ItemDecoration，实现Item的等间距分割以及分割线效果
安卓RecyclerView使用及添加自定义分割线
10-30
安卓RecyclerView添加自定义分割线,使用以及2种分割线用法,系统自带以及自定义分割线
Android Recyclerview分割线
油焖茄子 的博客
07-18 524
package gzy.storemanager.Utils; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Rect; imp
android中RecyclerView的简单使用（二）——分割线
2301_76352508的博客
04-08 1069
i < 100;i++) {list.add("数据 " + i);//将适配器放到recyclerView上//创建线性布局管理者对象//通过manager对象设置显示方向//将管理者对象给recyclerView// 声明两个属性，接收传递过来的数据// 创建一个构造方法，将数据和activity的上下文传递过来// 返回显示的条目个数@Override@Override// 将父类的对象强转为子类对象。
Android-->RecyclerView.ItemDecoration分割线详解
<angcyo>菜鸟视角
10-16 3852
RecyclerView.ItemDecoration不仅仅只是用来画线实现分割线这么简单;你可以绘制everything, 只要你想要; 都可以;最常用的: 绘制分割线; 绘制分组标题;点这里查看效果图参考文档: http://blog.youkuaiyun.com/pengkv/article/details/50538121ItemDecoration有3个重要的方法:@Override publi
RecyclerView分割线的ItemDecoration实现教程
虽然RecyclerView本身并不包含分割线，但开发者可以通过自定义的方式来为RecyclerView中的Item添加分割线，这就是ItemDecoration类的作用。 RecyclerView的ItemDecoration允许开发者在Adapter提供的Item布局之间...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值