【RecyclerView】 八、RecyclerView.ItemDecoration 条目装饰 ( onDraw 和 onDrawOver 绘制要点 )
文章目录
- 一、onDraw 和 onDrawOver 绘制要点
- 二、onDraw 方法示例
- 三、onDrawOver 方法示例
- 四、完整代码示例
- 五、RecyclerView 相关资料
一、onDraw 和 onDrawOver 绘制要点
onDraw 和 onDrawOver 方法原理类似 , 都是基于 Canvas 进行绘制 , 这个 Canvas 的画布大小与 RecyclerView 大小相同 , 这里要注意 , 每一次绘制时 , 都要先获取要绘制的 item 组件对应的坐标 ;
这里的用法与 getItemOffsets 完全不同 , 设置每个元素的边距偏移时 , 可以获取当前的序号 , 并针对不同的序号代表的 item 条目进行不同的边距设置 ;
Canvas 中绘图的坐标系的 ( 0, 0 ) 位置是 RecyclerView 的左上角位置 ;
使用 Canvas 绘图时 , 先获取指定组件 , 然后获取该组件相对于父容器 ( RecyclerView ) 的坐标 ;
绘图的流程 :
① 获取组件个数 ;
② 遍历组件 ;
③ 获取组件 View 对象 ;
④ 获取组件 View 对象相对于父容器 RecyclerView 的坐标值 , 也就是左上右下四个坐标 ;
⑤ 根据获取的坐标值进行绘图 ;
绘图代码示例 : 以 onDraw 方法为例 , onDrawOver 的绘图逻辑类似 ;
@Overridepublic void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {// 1. 获取当前的组件个数int itemCount = parent.getChildCount(); // 2. 遍历当前的所有组件 for (int i = 0; i < itemCount; i++) { // 3. 获取组件 View 对象 View view = parent.getChildAt(i);// 4. 获取 item 组件相对于父容器的坐标 int left = view.getLeft();int top = view.getTop(); int right = view.getRight(); int bottom = view.getBottom(); // 5. 根据上述坐标进行绘图 c.draw...}}
二、onDraw 方法示例
这里给出一个需求 , 为每一行的第一个元素 , 添加红色矩形背景 , 范围是每隔 item 向外延展 555 像素 ;
代码示例 :
@Overridepublic void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent,@NonNull RecyclerView.State state) {// 1. 获取当前的组件个数int itemCount = parent.getChildCount();// 2. 遍历当前的所有组件for (int i = 0; i < itemCount; i++) {// 3. 获取组件 View 对象View view = parent.getChildAt(i);// 4. 获取 item 组件相对于父容器的坐标int left = view.getLeft();int top = view.getTop();int right = view.getRight();int bottom = view.getBottom();// 5. 根据上述坐标进行绘图if (i % 4 == 0){// 给每一行的第一个元素绘制红色矩形背景, 向外延展 5 像素Paint paint = new Paint();paint.setColor(Color.RED);c.drawRect(left - 5, top - 5, right + 5, bottom + 5, paint);}}}
运行效果 : 绘制的矩形被 item 组件元素覆盖了 , 因此只显示出外层的一圈边框 ;
三、onDrawOver 方法示例
给每个 item 条目设置上绘制一个遮罩 , 偶数序号的元素绘制蓝色圆形遮罩 , 奇数序号的元素上绘制红色矩形遮罩 ;
@Overridepublic void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent,@NonNull RecyclerView.State state) {// 1. 获取当前的组件个数int itemCount = parent.getChildCount();// 2. 遍历当前的所有组件for (int i = 0; i < itemCount; i++) {// 3. 获取组件 View 对象View view = parent.getChildAt(i);// 4. 获取 item 组件相对于父容器的坐标int left = view.getLeft();int top = view.getTop();int right = view.getRight();int bottom = view.getBottom();// 5. 根据上述坐标进行绘图if (i % 2 == 0){// 偶数序号的元素绘制蓝色圆形遮罩Paint paint = new Paint();paint.setColor(Color.BLUE);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(5F);c.drawCircle((left + right) / 2F, (top + bottom) / 2F, (right - left) / 4F, paint);}else{// 奇数序号的元素绘制红色矩形遮罩Paint paint = new Paint();paint.setColor(Color.RED);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(5F);c.drawRect(left + 20, top + 20, right - 20, bottom - 20, paint);}}}
运行效果 : 偶数序号的元素绘制蓝色圆形遮罩 , 奇数序号的元素上绘制红色矩形遮罩 ; 该方法中绘制的元素覆盖 item 组件元素 ;
四、完整代码示例
RecyclerView.ItemDecoration 代码示例 :
package kim.hsl.recyclerview;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;public class ItemDecoration extends RecyclerView.ItemDecoration {@Overridepublic void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent,@NonNull RecyclerView.State state) {// 1. 获取当前的组件个数int itemCount = parent.getChildCount();// 2. 遍历当前的所有组件for (int i = 0; i < itemCount; i++) {// 3. 获取组件 View 对象View view = parent.getChildAt(i);// 4. 获取 item 组件相对于父容器的坐标int left = view.getLeft();int top = view.getTop();int right = view.getRight();int bottom = view.getBottom();// 5. 根据上述坐标进行绘图if (i % 4 == 0){// 给每一行的第一个元素绘制红色矩形背景, 向外延展 5 像素Paint paint = new Paint();paint.setColor(Color.RED);c.drawRect(left - 5, top - 5, right + 5, bottom + 5, paint);}}}@Overridepublic void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent,@NonNull RecyclerView.State state) {// 1. 获取当前的组件个数int itemCount = parent.getChildCount();// 2. 遍历当前的所有组件for (int i = 0; i < itemCount; i++) {// 3. 获取组件 View 对象View view = parent.getChildAt(i);// 4. 获取 item 组件相对于父容器的坐标int left = view.getLeft();int top = view.getTop();int right = view.getRight();int bottom = view.getBottom();// 5. 根据上述坐标进行绘图if (i % 2 == 0){// 偶数序号的元素绘制蓝色圆形遮罩Paint paint = new Paint();paint.setColor(Color.BLUE);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(5F);c.drawCircle((left + right) / 2F, (top + bottom) / 2F, (right - left) / 4F, paint);}else{// 奇数序号的元素绘制红色矩形遮罩Paint paint = new Paint();paint.setColor(Color.RED);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(5F);c.drawRect(left + 20, top + 20, right - 20, bottom - 20, paint);}}}@Overridepublic void getItemOffsets(@NonNull Rect outRect, @NonNull View view,@NonNull RecyclerView parent,@NonNull RecyclerView.State state) {// 1. 获取当前设置边距的位置int currentPosition = parent.getChildAdapterPosition(view);// 2. 针对不同的位置设置不同的边距// 每排最左侧和最右侧的左右边距设置成 20 像素, 其余 4 个边距一律设置成 5if (currentPosition % 4 == 0){// 每排最左侧的边距outRect.left = 40;outRect.top = 20;outRect.right = 20;outRect.bottom = 20;}else if (currentPosition %4 == 3){// 每排最右侧的边距outRect.left = 20;outRect.top = 20;outRect.right = 40;outRect.bottom = 20;}else{// 普通元素的边距都是 5outRect.left = 20;outRect.top = 20;outRect.right = 20;outRect.bottom = 20;}}
}主界面代码示例 :
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 {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//1 . 从布局中获取 RecyclerViewRecyclerView 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> {@Overridepublic 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);}@Overridepublic void onBindViewHolder(@NonNull ViewHolder holder, int position) {holder.text.setText("" + position);}@Overridepublic int getItemCount() {return 100;}public class ViewHolder extends RecyclerView.ViewHolder {TextView text;public ViewHolder(@NonNull View itemView) {super(itemView);text = itemView.findViewById(R.id.text);}}}}运行效果 :
① 边距 : 正常的 item 边距设置都是 20 像素 , 每行最左侧距离左边 40 像素 , 每行最右侧边距距离右侧 40 像素 ;
① item 底部背景 : 使用 onDraw 方法绘制 , 给每行的第一个元素绘制一个底部背景 , 该背景会被 item 组件覆盖 ;
③ item 上层遮罩 : 使用 onDrawOver 方法绘制 , 给偶数序号的 item 元素绘制蓝色圆形遮罩 , 给奇数序号的 item 元素绘制红色矩形遮罩 ;
五、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/14951850
( 使用 Android Studio 打开 )
【RecyclerView】 八、RecyclerView.ItemDecoration 条目装饰 ( onDraw 和 onDrawOver 绘制要点 )相关推荐
- 【RecyclerView】 六、RecyclerView.ItemDecoration 条目装饰 ( 简介 | onDraw | onDrawOver | getItemOffsets )
文章目录 一.RecyclerView.ItemDecoration 简介 1.onDraw() 方法 2.onDrawOver () 方法 3.getItemOffsets () 方法 二.Recy ...
- 【RecyclerView】 七、RecyclerView.ItemDecoration 条目装饰 ( getItemOffsets 边距设置 )
文章目录 一.RecyclerView.ItemDecoration 方法说明 三.getItemOffsets 设置要点 四.完整代码示例 五.RecyclerView 相关资料 一.Recycle ...
- 解决安卓刷新recyclerView时导致itemDecoration分栏标题绘制错乱（重叠和隔空现象）
安卓的 itemDecoration 装饰器是个好东西,可以与adapter适配器一样闪耀.但是刷新的时候有可能发生重叠绘制或者莫名隔空的BUG. 三.原作 本文分栏标题装饰器的原作者为简书博主end ...
- RecyclerView之利用ItemDecoration实现万能分割线
上一篇文章讲了如何使用ItemDecoration去实现RecyclerView的万能间距,可是很多时候我们的需求里还会有分割线,有时候既要有合适的间距,也要有分割线,这种需求多出现在列表中,也就是网 ...
- recyclerview滚动到指定条目
android recyclerview滚动到指定条目 自从android5.0推出RecyclerView以后,RecyclerView越来越受广大程序员的热爱了!大家都知道RecyclerView ...
- 【RecyclerView】二、RecyclerView 简介 ( RecyclerView 特点 | RecyclerView 涉及到的类 )
文章目录 一.RecyclerView 简介 二.RecyclerView 特点 三.RecyclerView 涉及到的类 四.RecyclerView 相关资料 一.RecyclerView 简介 ...
- android view嵌套,Android RecyclerView嵌套RecyclerView点击事件
RecyclerView嵌套RecyclerView点击事件遇到取值错乱的问题 其实问题根本就是咱们没有处理好被嵌套的那层recycleview的position 那么解决思路也很简单,想办法把被嵌套 ...
- Android中RecyclerView嵌套RecyclerView或嵌套ListView
Android中RecyclerView嵌套RecyclerView或嵌套ListView
- 山西计算机信息技术八年级教案,八年级信息技术 1.2 简单的图形绘制教案 山西版...
<八年级信息技术 1.2 简单的图形绘制教案 山西版>由会员分享,可在线阅读,更多相关<八年级信息技术 1.2 简单的图形绘制教案 山西版(2页珍藏版)>请在人人文库网上搜索. ...
最新文章
- cath数据库fasta备注_数据库（同源）搜索软件 FASTA 和 BLAST
- 远期合约(Forwards/Forward Contract )
- Action framework - Table PPFTTRIGG
- java 文件分隔_java 实现大文件分隔成多个小文件
- python3安装教程配置配置阿里云
- [设计模式-行为型]解释器模式(Interpreter)
- java使用Pattern、Matcher调用正则表达式
- yaml和properties文件相互转换的网站
- 1008 - Fibsieve`s Fantabulous Birthday
- 数组中大于等于左侧所有数，小于等于右侧所有数的数
- 用了三天终于安装成功 jsv8 centos7.6 + 宝塔+ php7.2 安装V8js
- Python学习笔记-北京图灵学院-Python概述-20200525
- Android安装apk报错 问题记录
- mcu 与电量计 BQ40Z80 通信，读取电芯电量
- 同步上下文(SynchronizationContext)
- 2023年第十五届电工杯数学建模A题B题思路汇总
- 无为才能够无不为－曾仕强
- Vue3.2——vue-seamless-scroll的使用
- ldpc译码讲解_LDPC码编译码原理及应用
- 低压差线性稳压器简介