【RecyclerView】七、RecyclerView.ItemDecoration 条目装饰 ( getItemOffsets 边距设置 )-阿里云开发者社区

相关文章推荐

焦虑的扁豆 · webClient请求JAVA超时解决方案_ ...· 2 月前 ·

独立的饺子 · Pytorch 基础-tensor ...· 1 年前 ·

爱旅游的红茶 · 排查解决RestTemplate发起的POS ...· 1 年前 ·

卖萌的海豚 · Spring Cloud ...· 1 年前 ·

爱旅游的柠檬 · 允许WordPress对Docker挂载的文 ...· 1 年前 ·

文章目录

一、RecyclerView.ItemDecoration 方法说明

三、getItemOffsets 设置要点

四、完整代码示例

五、RecyclerView 相关资料

一、RecyclerView.ItemDecoration 方法说明

RecyclerView.ItemDecoration 是抽象类 , 当前使用的 onDraw , onDrawOver , getItemOffsets 3 33 个方法 , 上一篇博客【RecyclerView】五、RecyclerView.ItemDecoration 条目装饰 ( 简介 | onDraw | onDrawOver | getItemOffsets ) 二、RecyclerView.ItemDecoration 源码注释解析中已经分析了 RecyclerView.ItemDecoration 方法 , 并查看了其源码 , 这 3 33 个方法都是空方法 , 因此这里实现方法时 , 不必再使用 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 44 个边距 , 通过调用 RecyclerView 的 getChildAdapterPosition 方法 , 可以给指定位置的 item 设置不同的边距 ;

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

为不同位置的 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 44 个元素 ,

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

使用 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 2020 像素 , 每行最右侧元素距离右边距 20 2020 像素 , 其余边距都是 5 55 像素 ;

四、完整代码示例

自定义 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(
                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 打开 )

【Groovy】xml 序列化 ( 使用 StreamingMarkupBuilder 生成 xml 数据 | mkp.xmlDeclaration() 生成 xml 版本数据 ) 【Groovy】xml 序列化 ( 使用 MarkupBuilder 生成 xml 数据 | 标签闭包下创建子标签 | 使用 MarkupBuilderHelper 添加 xml 注释 ) 【Groovy】xml 序列化 ( 使用 MarkupBuilder 生成 xml 数据 | 设置 xml 标签内容 | 设置 xml 标签属性 ) 【Groovy】json 字符串反序列化 ( 使用 JsonSlurper 进行 json 字符串反序列化 | 根据 map 集合构造相关类 ) 【Groovy】json 序列化 ( 类对象转为 json 字符串 | 使用 JsonBuilder 进行转换 | 使用 JsonOutput 进行转换 | 将 json 字符串格式化输出 ) RecyclerView定制：通用ItemDecoration及全展开RecyclerView的实现

RecyclerView定制：通用ItemDecoration及全展开RecyclerView的实现

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

【RecyclerView】六、RecyclerView.ItemDecoration 条目装饰 ( 简介 | onDraw | onDrawOver | getItemOffsets )

【RecyclerView】八、RecyclerView.ItemDecoration 条目装饰 ( onDraw 和 onDrawOver 绘制要点 )（一）

【RecyclerView】八、RecyclerView.ItemDecoration 条目装饰 ( onDraw 和 onDrawOver 绘制要点 )（二）

【RecyclerView】三、RecyclerView 布局 ( 线性布局管理器 LinearLayoutManager )

【RecyclerView】十五、使用 ItemTouchHelper 实现 RecyclerView 拖动排序 ( ItemTouchHelper 简介 )