开发者社区> 韩曙亮> 正文

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

简介: 【RecyclerView】 八、RecyclerView.ItemDecoration 条目装饰 ( onDraw 和 onDrawOver 绘制要点 )(二)
+关注继续查看

四、完整代码示例


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 {
    @Override
    public 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);
            }
        }
    }
    @Override
    public 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);
            }
        }
    }
    @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 = 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{
            // 普通元素的边距都是 5
            outRect.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 {
    @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 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 元素绘制红色矩形遮罩 ;


image.png






五、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 打开 )


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
13454 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
9685 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
33314 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
13886 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25056 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18643 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
13913 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
20361 0
+关注
韩曙亮
专注 Android 领域
2605
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载