【RecyclerView】 七、RecyclerView.ItemDecoration 条目装饰 ( getItemOffsets 边距设置 )

最新推荐文章于 2022-05-14 17:54:15 发布
最新推荐文章于 2022-05-14 17:54:15 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： # RecyclerView 文章标签： RecyclerView ItemDecoration
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shulianghan/article/details/113310440
版权

文章目录





一、RecyclerView.ItemDecoration 方法说明


RecyclerView.ItemDecoration 是抽象类 , 当前使用的 onDraw , onDrawOver , getItemOffsets 3 3 3 个方法 , 上一篇博客 【RecyclerView】 五、RecyclerView.ItemDecoration 条目装饰 ( 简介 | onDraw | onDrawOver | getItemOffsets ) 二、RecyclerView.ItemDecoration 源码注释解析 中已经分析了 RecyclerView.ItemDecoration 方法 , 并查看了其源码 , 这 3 3 3 个方法都是空方法 , 因此这里实现方法时 , 不必再使用 super 调用父类方法 ;

public class ItemDecoration extends RecyclerView.ItemDecoration {

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent,
                       @NonNull RecyclerView.State state) {
    }

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

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




三、getItemOffsets 设置要点


使用 RecyclerView.ItemDecoration 给 RecyclerView 的 item 设置 " 上 , 下 , 左 , 右 " 4 4 4 个边距 , 通过调用 RecyclerView 的 getChildAdapterPosition 方法 , 可以给指定位置的 item 设置不同的边距 ;

这里为 RecyclerView 网格布局设置边距 , 普通的 item 组件上下左右边距都是 5 5 5 像素 , 整个网格布局的左侧 , 右侧 边距是 20 20 20 像素 , 网格布局每排 4 4 4 个元素 ;

为不同位置的 item 设置不同的边距 , 这里就需要对当前设置边距的位置进行查询与甄别 ;

调用 RecyclerView 对象的 getChildAdapterPosition 方法 , 传入 item 组件 View 参数 , 就可以获取当前的位置 ;

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

        // 1. 获取当前设置边距的位置
        int currentPosition = parent.getChildAdapterPosition(view);
}

获取到当前设置位置之后 , 根据不同的位置设置不同的偏移量 ;

表格布局中每行有 4 4 4 个元素 ,

所有的元素上下左右边距都设置 5 5 5 像素偏移量 , 每行中最左侧的元素距离左边界 20 20 20 像素 , 每行中最右侧元素距离右边界 20 20 20 像素 ;

使用 currentPosition % 4 == 0 可以筛选出每行最左侧的元素 , 使用 currentPosition %4 == 3 可以筛选出每行最右侧的元素 ;

public class ItemDecoration extends RecyclerView.ItemDecoration {
    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view,
                               @NonNull RecyclerView parent,
                               @NonNull RecyclerView.State state) {

        // 1. 获取当前设置边距的位置
        int currentPosition = parent.getChildAdapterPosition(view);

        // 2. 针对不同的位置设置不同的边距
        // 每排最左侧和最右侧的左右边距设置成 20 像素, 其余 4 个边距一律设置成 5
        if (currentPosition % 4 == 0){
            // 每排最左侧的边距
            outRect.left = 20;
            outRect.top = 5;
            outRect.right = 5;
            outRect.bottom = 5;

        }else if (currentPosition %4 == 3){
            // 每排最右侧的边距
            outRect.left = 5;
            outRect.top = 5;
            outRect.right = 20;
            outRect.bottom = 5;

        }else{
            // 普通元素的边距都是 5
            outRect.left = 5;
            outRect.top = 5;
            outRect.right = 5;
            outRect.bottom = 5;
        }

    }
}

运行效果 : 下面的 RecyclerView 中每行最左侧元素距离左边距 20 20 20 像素 , 每行最右侧元素距离右边距 20 20 20 像素 , 其余边距都是 5 5 5 像素 ;

在这里插入图片描述





四、完整代码示例


自定义 RecyclerView.ItemDecoration 代码示例 :

package kim.hsl.recyclerview;

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

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

public class ItemDecoration extends RecyclerView.ItemDecoration {

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent,
                       @NonNull RecyclerView.State state) {
    }

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

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

        // 1. 获取当前设置边距的位置
        int currentPosition = parent.getChildAdapterPosition(view);

        // 2. 针对不同的位置设置不同的边距
        // 每排最左侧和最右侧的左右边距设置成 20 像素, 其余 4 个边距一律设置成 5
        if (currentPosition % 4 == 0){
            // 每排最左侧的边距
            outRect.left = 20;
            outRect.top = 5;
            outRect.right = 5;
            outRect.bottom = 5;

        }else if (currentPosition %4 == 3){
            // 每排最右侧的边距
            outRect.left = 5;
            outRect.top = 5;
            outRect.right = 20;
            outRect.bottom = 5;

        }else{
            // 普通元素的边距都是 5
            outRect.left = 5;
            outRect.top = 5;
            outRect.right = 5;
            outRect.bottom = 5;
        }

    }
}

Java 主界面代码 :

package kim.hsl.recyclerview;

import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //1 . 从布局中获取 RecyclerView
        RecyclerView recycler_view = findViewById(R.id.recycler_view);

        //2 . 创建并设置布局管理器
        //创建布局管理器

        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(
                4,
                RecyclerView.VERTICAL);

        //设置布局管理器
        recycler_view.setLayoutManager(layoutManager);

        // 设置边距
        recycler_view.addItemDecoration(new ItemDecoration());

        //3 . 创建并设置列表适配器
        Adapter adapter = new Adapter();
        recycler_view.setAdapter(adapter);
    }

    /**
     * RecyclerView 适配器
     */
    public class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {

        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View root_view = LayoutInflater.from(MainActivity.this)
                    .inflate(R.layout.item_recyclerview, parent, false);
            return new ViewHolder(root_view);
        }

        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
            holder.text.setText("" + position);
        }

        @Override
        public int getItemCount() {
            return 10;
        }

        public class ViewHolder extends RecyclerView.ViewHolder {
            TextView text;
            public ViewHolder(@NonNull View itemView) {
                super(itemView);
                text = itemView.findViewById(R.id.text);
            }
        }
    }

}

运行效果 :

在这里插入图片描述





五、RecyclerView 相关资料


官方文档 :

使用 RecyclerView 创建动态列表 : https://developer.android.google.cn/guide/topics/ui/layout/recyclerview

高级 RecyclerView 自定义 : https://developer.android.google.cn/guide/topics/ui/layout/recyclerview-custom


代码示例 :

GitHub 源码地址 : https://github.com/han1202012/001_RecyclerView

博客源码快照 : https://download.csdn.net/download/han1202012/14951713

( 使用 Android Studio 打开 )

韩曙亮
关注
专栏目录
android item间距,RecyclerView 设置item之间的间距
weixin_35977444的博客
05-27 1161
RecyclerView没有可以直接设置间距的属性，但看了源码之后可以发现RecyclerView有个内部类ItemDecoration，可以用ItemDecoration来装饰一个item，所以继承重写ItemDecoration就可以实现间距了。我看了以下，网上很多类似的介绍，但是大多都只考虑到LinearLayoutManager这种这是LinearLayoutManager设置Item间距...
RecyclerView使用指南（四）—— 使用ItemDecoration
weixin_33984032的博客
11-27 179
声明：原创作品，转载请注明出处：www.jianshu.com/p/b2654f4a6… 这次我将对RecyclerView的ItemDecoration类进行讲解。 ItemDecoration是RecyclerView类中的一个内部抽象类，我们可以通过继承这个类并将它设置给RecyclerView来装饰我们的条目。 在讲解之前，我们先做一些准备工作： 将RecyclerView显示出来，...
【RecyclerView】 七、RecyclerView.ItemDecoration 条目装饰 ( getItemOffsets 边距设置 ).zip
01-28
【RecyclerView】 七、RecyclerView.ItemDecoration 条目装饰 ( getItemOffsets 边距设置 ) https://hanshuliang.blog.csdn.net/article/details/113310440 博客源码快照
ItemDecoration解析(一) getItemOffsets
Data的博客
07-14 4794
介绍 An ItemDecoration allows the application to add a special drawing and layout offset to specific item views from the adapter's data set. This can be useful for drawing dividers between items, hig
【RecyclerView】 六、RecyclerView.ItemDecoration 条目装饰 ( 简介 | onDraw | onDrawOver | getItemOffsets )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
01-28 1327
一、RecyclerView.ItemDecoration 简介、 1、onDraw() 方法、 2、onDrawOver () 方法、 3、getItemOffsets () 方法、 二、RecyclerView.ItemDecoration 源码注释解析、 三、RecyclerView 相关资料
关于RecyclerView的ItemDecoration
alcoholdi的专栏
05-31 577
之前用 ItemDecoration 一直都是用的源码里唯一附带的 DividerItemDecoration。 或者直接在每个Item里写分割线代码了。 一直没怎么管 ItemDecoration。 这段时间因为需要用到所以学习了下用法。 这个类需要继承 RecyclerView。ItemDecoration。 有3种方法可以重写 getItemOffsets 名字表示 item 的偏移，...
RecyclerView (二) ItemDecoration 详解
深耕技术
04-29 1065
RecyclerView 已经推出了n年了，日常开发中也已经彻底从 ListView 迁移到了 RecyclerView，但前两天有人在一个安卓群里面问了个关于最顶上的 item view 加蒙层的问题，被人用 ItemDecoration 完美解决。此时我发现自己对 RecyclerView 的使用一直太过基本，更深入更强大的功能完全没有涉及，像 ItemDecoration, ItemAnim...
自定义RecyclerView.ItemDecoration，实现Item的等间距分割以及分割线效果Demo
07-27
在`getItemOffsets`方法中，我们可以遍历RecyclerView的所有Item，根据需求为每个Item设置相同的边距，以实现等间距。例如，如果想要在每个Item之间添加10dp的间距，可以这样编写： ```java @Override public void ...
如何为RecyclerView添加分隔线
08-31
1. `void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state)`：此方法用于设置每个ChildView四周的空白区域，即我们所说的“偏移量”。在这里，我们可以根据需要为每个列表...
RecyclerView网格自定义间隔线
05-07
ItemDecoration允许我们在列表项之间插入额外的装饰，如边距或线条。创建一个新的类，继承自RecyclerView.ItemDecoration： ```java public class GridSpaceItemDecoration extends RecyclerView.ItemDecoration { ...
RecyclerView的ItemDecoration总结
wusj的博客
05-07 457
一、RecyclerView.ItemDecoration 基本用法 public class TestDividerItemDecoration extends RecyclerView.ItemDecoration { // 方法1：getItemOffsets （每出现一个position，调用一次） // 作用：设置ItemView的内嵌偏移长...
RecyclerView详解
kimlllll的博客
11-19 361
本文目录 RecyclerView是谷歌推出的代替ListView的列表控件。关于它的基本使用，它的封装，添加头脚布局等，比较简单就不再描述，这里主要是记录一些知识点。 一 . RecyclerView间隔线 RecyclerView并没有现成的间隔线，我们需要自己去绘制间隔线，创建一个类，继承RecyclerView.ItemDecoration，重写其中的两个方法，...
Android 活用RecyclerView分割线
热门推荐
crazyZhangxl的博客
07-14 1万+
1.前言 RecyclerVIew是我们日常开发中使用频率最高的控件了吧，之前由于比较马虎没好好整理过如何添加分割线，以前是通过文件或者在布局里投机取巧进行添加，现如今有空有必要好好的整理一番了。 宏观把控Recycyerview.ItemDecoration实现的方法 public class MyDecoration extends RecyclerView.ItemDecor...
RecyclerView之ItemDecoration
weixin_34256074的博客
05-03 130
本文已授权微信公众号：鸿洋（hongyangAndroid）原创首发。 一、简述 说到RecyclerView大家都很熟悉了，相比于ListView，它具有高度解耦、性能优化等优势，而且现在大多数安卓开发者都已经将RecyclerView用来完全替代ListView和GridView，因为它功能十分强大，但往往功能强大的东西，反而不太好控制，例如今天要说的这个ItemDecoration，I...
android getitem,android – ItemDecoration重写getItemOffsets()和动画
weixin_39625162的博客
05-27 562
我通过覆盖getItemOffsets()方法使用GridLayoutManager将相等的边距应用于我的RecyclerView(请参阅下面的代码).但是,从适配器中删除对象时,将调用删除动画而不使用偏移.因此,anmiation开始于与要移除的对象不同的位置.我尝试通过getSpanIndex(position)获取位置,但位置(parent.getChildAdapterPosition(v...
Android的RecyclerView.ItemDecoration使用
Silicon_Valley
05-14 2618
文章目录前言一、RecyclerView.ItemDecoration是什么？二、使用步骤1.引入库2.设置装饰器2.1 在Activity或者Fragment中设置装饰器2.2 实现MaintenanceItemDecoration，继承于RecyclerView.ItemDecoration()1、实现getItemOffsets方法，代码如下2、给底部留白部分加上节点，实现onDraw方法3、MaintenanceItemDecoration完整代码3.完成最终版带进度更新的装饰器3.1 设置装饰器3
Android: getItemOffsets设置outRect边距后，每次切换回画面边距增大的问题
Crystal_xing的专栏
09-16 1519
override fun getItemOffsets( outRect: Rect, view: View, parent: RecyclerView, state: RecyclerView.State ) { super.getItemOffsets(outRect, view, parent, state) outRect.set(0, headHeight, 0, 0) } ...
Android自定义RecyclerView分割线，打造无边缘分割线
宿罪的博客
05-02 4005
前言：  现在的RecyclerView几乎已经完全取代ListView和GridView了，已经几年没使用ListView和GridView了，想当年还需要自己在getView方法中复用convertView。而现在的RecyclerView一出生就被设计成convertView复用的，尽管你不想复用（才怪）。RecyclerView功能如此强大的同时就会面临许多需求，如给RecyclerVi...
Android实现RecyclerView的ItemDecoration
杜壁奇的博客
12-09 885
RecyclerView出来已经好久了,关于ItemDecoration的文章也一大堆,我也来讲讲ItemDecoration的使用方式. 源码 使用过ListView/GridView或多或少都有在每个Item中间添加间隔物这样的需求,也都提供了相应的添加方式.RecyclerView也不例外,只不过Google只是提供一个叫ItemDecoration的类,并没有提供比较好的实现类,所以这...
RecyclerView自定义分割线实现详解
`getItemOffsets()`用于设置分割线在每个条目周围的边缘空间，而`onDraw()`负责实际的绘制工作。 ```java public class CustomDecoration extends RecyclerView.ItemDecoration { // ...其他字段和构造函数 @...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值