RecyclerView之ItemDecoration使用教程

九路 等级 701 0 0

译文的GitHub地址:RecyclerView之ItemDecoration由浅入深

译者注:RecyclerView第一篇,希望后面坚持下来

RecyclerView没有像之前ListView提供divider属性,而是提供了方法

recyclerView.addItemDecoration() 

其中ItemDecoration需要我们自己去定制重写,一开始可能有人会觉得麻烦不好用,最后你会发现这种可插拔设计不仅好用,而且功能强大。

ItemDecoration类主要是三个方法:

public void onDraw(Canvas c, RecyclerView parent, State state)
public void onDrawOver(Canvas c, RecyclerView parent, State state)
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state) 

官方源码虽然都写的很清楚,但还不少小伙伴不知道怎么理解,怎么用或用哪个方法,下面我画个简单的图来帮你们理解一下。

RecyclerView之ItemDecoration使用教程

ItemDecoration

图画的丑请见谅,首先我们假设绿色区域代表的是我们的内容,红色区域代表我们自己绘制的装饰,可以看到:

图1:代表了getItemOffsets(),可以实现类似padding的效果

图2:代表了onDraw(),可以实现类似绘制背景的效果,内容在上面

图3:代表了onDrawOver(),可以绘制在内容的上面,覆盖内容

注意上面是我个人从应用角度的看法,事实上实现上面的效果可能三个方法每个方法都可以实现。只不过这种方法更好理解。

下面是我们没有添加任何ItemDecoration的界面

RecyclerView之ItemDecoration使用教程

Activity

主页布局界面很简单,背景设成灰色

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/gray">//灰色背景


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

</android.support.design.widget.CoordinatorLayout> 

ok 接下来,让我们来实现实际开发中常遇到的场景。

padding

从前面的图可以看到实现这个效果,需要重写getItemOffsets方法。

public class SimplePaddingDecoration extends RecyclerView.ItemDecoration {

    private int dividerHeight;


    public SimplePaddingDecoration(Context context) {
        dividerHeight = context.getResources().getDimensionPixelSize(R.dimen.divider_height);
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.bottom = dividerHeight;//类似加了一个bottom padding
    }
} 

没错,就这么2行代码,然后添加到RecyclerView

recyclerView.addItemDecoration(new SimplePaddingDecoration(this)); 

实现效果:

RecyclerView之ItemDecoration使用教程

Padding ItemDecoration

分割线

分割线在app中是经常用到的,用ItemDecoration怎么实现呢,其实上面padding改成1dp就实现了分割线的效果,但是分割线的颜色只能是背景灰色,所以不能用这种方法。

要实现分割线效果需要 getItemOffsets()和 onDraw()2个方法,首先用 getItemOffsets给item下方空出一定高度的空间(例子中是1dp),然后用onDraw绘制这个空间

public class SimpleDividerDecoration extends RecyclerView.ItemDecoration {

    private int dividerHeight;
    private Paint dividerPaint;

    public SimpleDividerDecoration(Context context) {
        dividerPaint = new Paint();
        dividerPaint.setColor(context.getResources().getColor(R.color.colorAccent));
        dividerHeight = context.getResources().getDimensionPixelSize(R.dimen.divider_height);
    }


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

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        int childCount = parent.getChildCount();
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();

        for (int i = 0; i < childCount - 1; i++) {
            View view = parent.getChildAt(i);
            float top = view.getBottom();
            float bottom = view.getBottom() + dividerHeight;
            c.drawRect(left, top, right, bottom, dividerPaint);
        }
    }
} 

实现效果:

RecyclerView之ItemDecoration使用教程

Divider ItemDecoration

标签

现在很多电商app会给商品加上一个标签,比如“推荐”,“热卖”,“秒杀”等等,可以看到这些标签都是覆盖在内容之上的,这就可以用onDrawOver()来实现,我们这里简单实现一个有趣的标签

public class LeftAndRightTagDecoration extends RecyclerView.ItemDecoration {
    private int tagWidth;
    private Paint leftPaint;
    private Paint rightPaint;

    public LeftAndRightTagDecoration(Context context) {
        leftPaint = new Paint();
        leftPaint.setColor(context.getResources().getColor(R.color.colorAccent));
        rightPaint = new Paint();
        rightPaint.setColor(context.getResources().getColor(R.color.colorPrimary));
        tagWidth = context.getResources().getDimensionPixelSize(R.dimen.tag_width);
    }

    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = parent.getChildAt(i);
            int pos = parent.getChildAdapterPosition(child);
            boolean isLeft = pos % 2 == 0;
            if (isLeft) {
                float left = child.getLeft();
                float right = left + tagWidth;
                float top = child.getTop();
                float bottom = child.getBottom();
                c.drawRect(left, top, right, bottom, leftPaint);
            } else {
                float right = child.getRight();
                float left = right - tagWidth;
                float top = child.getTop();
                float bottom = child.getBottom();
                c.drawRect(left, top, right, bottom, rightPaint);

            }
        }
    }
} 

实现效果:

RecyclerView之ItemDecoration使用教程

Tag ItemDecoration

组合

不要忘记的是ItemDecoration是可以叠加的

 recyclerView.addItemDecoration(new LeftAndRightTagDecoration(this));
recyclerView.addItemDecoration(new SimpleDividerDecoration(this)); 

我们把上面2个ItemDecoration同时添加到RecyclerView看下什么效果

RecyclerView之ItemDecoration使用教程

ItemDecoration

是不是有种狂拽炫酷吊炸天的赶脚。。。

三个方法都用了一遍,你以为这就结束了?呵呵 并没有

section

这个是什么呢,先看下我们实现的效果

RecyclerView之ItemDecoration使用教程

Section ItemDecoration

一看这个就很熟悉吧,手机上面的通讯录联系人,知乎日报都是这样效果,可以叫分组,也可以叫section分块 先不管它叫什么。

这个怎么实现呢? 其实和实现分割线是一样的道理 ,只是不是所有的item都需要分割线,只有同组的第一个需要。

我们首先定义一个接口给activity进行回调用来进行数据分组和获取首字母

public interface DecorationCallback {

        long getGroupId(int position);

        String getGroupFirstLine(int position);
    } 

然后再来看我们的ItemDecoration

public class SectionDecoration extends RecyclerView.ItemDecoration {
    private static final String TAG = "SectionDecoration";

    private DecorationCallback callback;
    private TextPaint textPaint;
    private Paint paint;
    private int topGap;
    private Paint.FontMetrics fontMetrics;


    public SectionDecoration(Context context, DecorationCallback decorationCallback) {
        Resources res = context.getResources();
        this.callback = decorationCallback;

        paint = new Paint();
        paint.setColor(res.getColor(R.color.colorAccent));

        textPaint = new TextPaint();
        textPaint.setTypeface(Typeface.DEFAULT_BOLD);
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(80);
        textPaint.setColor(Color.BLACK);
        textPaint.getFontMetrics(fontMetrics);
        textPaint.setTextAlign(Paint.Align.LEFT);
        fontMetrics = new Paint.FontMetrics();
        topGap = res.getDimensionPixelSize(R.dimen.sectioned_top);//32dp


    }


    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        int pos = parent.getChildAdapterPosition(view);
        Log.i(TAG, "getItemOffsets:" + pos);
        long groupId = callback.getGroupId(pos);
        if (groupId < 0) return;
        if (pos == 0 || isFirstInGroup(pos)) {//同组的第一个才添加padding
            outRect.top = topGap;
        } else {
            outRect.top = 0;
        }
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View view = parent.getChildAt(i);
            int position = parent.getChildAdapterPosition(view);
            long groupId = callback.getGroupId(position);
            if (groupId < 0) return;
            String textLine = callback.getGroupFirstLine(position).toUpperCase();
            if (position == 0 || isFirstInGroup(position)) {
                float top = view.getTop() - topGap;
                float bottom = view.getTop();
                c.drawRect(left, top, right, bottom, paint);//绘制红色矩形
                c.drawText(textLine, left, bottom, textPaint);//绘制文本
            }
        }
    }


    private boolean isFirstInGroup(int pos) {
        if (pos == 0) {
            return true;
        } else {
            long prevGroupId = callback.getGroupId(pos - 1);
            long groupId = callback.getGroupId(pos);
            return prevGroupId != groupId;
        }
    }

    public interface DecorationCallback {

        long getGroupId(int position);

        String getGroupFirstLine(int position);
    }
} 

可以看到和divider实现一样,都是重写getItemOffsets()和onDraw()2个方法,不同的是根据数据做了处理。

在Activity中使用

 recyclerView.addItemDecoration(new SectionDecoration(this, new SectionDecoration.DecorationCallback() {
            @Override
            public long getGroupId(int position) {
                return Character.toUpperCase(dataList.get(position).getName().charAt(0));
            }

            @Override
            public String getGroupFirstLine(int position) {
                return dataList.get(position).getName().substring(0, 1).toUpperCase();
            }
        })); 

干净舒服,不少github类似的库都是去adapter进行处理 侵入性太强 或许ItemDecoration是个更好的选择,可插拔,可替换。

到这里细心的人就会发现了,header不会动啊,我手机上的通讯录可是会随的滑动而变动呢,这个可以实现么?

StickyHeader

这个东西怎么叫我也不知道啊 粘性头部?英文也有叫 pinned section 取名字真是个麻烦事。

先看下我们简单实现的效果

RecyclerView之ItemDecoration使用教程

stickyheader

首先一看到图,我们就应该想到header不动肯定是要绘制item内容之上的,需要重写onDrawOver()方法,其他地方和section实现一样。

public class PinnedSectionDecoration extends RecyclerView.ItemDecoration {
    private static final String TAG = "PinnedSectionDecoration";

    private DecorationCallback callback;
    private TextPaint textPaint;
    private Paint paint;
    private int topGap;
    private Paint.FontMetrics fontMetrics;


    public PinnedSectionDecoration(Context context, DecorationCallback decorationCallback) {
        Resources res = context.getResources();
        this.callback = decorationCallback;

        paint = new Paint();
        paint.setColor(res.getColor(R.color.colorAccent));

        textPaint = new TextPaint();
        textPaint.setTypeface(Typeface.DEFAULT_BOLD);
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(80);
        textPaint.setColor(Color.BLACK);
        textPaint.getFontMetrics(fontMetrics);
        textPaint.setTextAlign(Paint.Align.LEFT);
        fontMetrics = new Paint.FontMetrics();
        topGap = res.getDimensionPixelSize(R.dimen.sectioned_top);


    }


    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        int pos = parent.getChildAdapterPosition(view);
        long groupId = callback.getGroupId(pos);
        if (groupId < 0) return;
        if (pos == 0 || isFirstInGroup(pos)) {
            outRect.top = topGap;
        } else {
            outRect.top = 0;
        }
    }


    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        int itemCount = state.getItemCount();
        int childCount = parent.getChildCount();
        int left = parent.getPaddingLeft();
        int right = parent.getWidth() - parent.getPaddingRight();
        float lineHeight = textPaint.getTextSize() + fontMetrics.descent;

        long preGroupId, groupId = -1;
        for (int i = 0; i < childCount; i++) {
            View view = parent.getChildAt(i);
            int position = parent.getChildAdapterPosition(view);

            preGroupId = groupId;
            groupId = callback.getGroupId(position);
            if (groupId < 0 || groupId == preGroupId) continue;

            String textLine = callback.getGroupFirstLine(position).toUpperCase();
            if (TextUtils.isEmpty(textLine)) continue;

            int viewBottom = view.getBottom();
            float textY = Math.max(topGap, view.getTop());
            if (position + 1 < itemCount) { //下一个和当前不一样移动当前
                long nextGroupId = callback.getGroupId(position + 1);
                if (nextGroupId != groupId && viewBottom < textY ) {//组内最后一个view进入了header
                    textY = viewBottom;
                }
            }
            c.drawRect(left, textY - topGap, right, textY, paint);
            c.drawText(textLine, left, textY, textPaint);
        }

    }

} 

好了,现在发现ItemDecoration有多强大了吧! 当然还有更多就需要你自己去发现了。

收藏
评论区

相关推荐

使用 Payload 提高 RecyclerView 渲染效率
RecyclerView.Adapter 中有个带有 payloads 参数的函数,由于这个函数不是抽象函数,被很多人忽略了。该函数定义如下: public void onBindViewHolder(VH holder, int position, List<Object payloads) { onBindViewHolder(holder,
RecyclerView之ItemDecoration使用教程
译文的GitHub地址:RecyclerView之ItemDecoration由浅入深(https://link.jianshu.com?thttps://github.com/thinkSky1206/androidblog/blob/master/RecyclerView%E4%B9%8BItemDecoration%E7%94%B1%E6%B5
Android RecyclerView如何获取滑动距离
获取RecyclerView滑动的距离。 本文演示如何获取RecyclerView的滑动距离。 要实现这个功能,需要给RecyclerView添加滑动时监听RecyclerView.OnScrollListener。 recyclerView.addOnScrollListener(new RecyclerView.OnScrollListene
完美解决Android RyclerView嵌套滑动事件冲突
在Android项目开发中,为了实现需求和兼并用户体验,相信很多人都碰到滑动事件冲突的问题。在Android系统中事件分发机制是一个很重要的组成部分,由于这事件分发机制不是本文重点,故不在此多述,如果有想详细了解的可以自己搜下,网上有很多相关资料详细描述了Android事件分发机制。 一、问题场景 由于RecyclerView自身的优点,使得它已经基本
JavaScript 代码整洁之道
作者:alivebao(https://github.com/alivebao/cleancodejs)
干货|详解位图算法在Android RecyclerView中的应用
1. 前言 1.1 关于算法金庸武侠小说中的主人公在成为绝世高手之前,都会学习一门玄门内功。郭靖有了全真派的内功才能修炼九阴真经、虚竹得到了无崖子的毕生功力后,武学造诣日渐精进、张无忌苦练五年九阳神功,日后才能融合乾坤大挪移。对于程序员,算法就是小说中的内功,编程语言就是不同门派的武功。张无忌因为有九阳神功加持仅用一天就学会了阳顶天几十年都学不成的乾
5分钟快速梳理你的HTTP体系
HTTP 定义 1. HTTP(超文本传输协议) 是 客户端 与 服务端 之间信息交流的 桥梁。 2. 在信息交流之前必须要做的就是 客户端通过连接TCP/IP协议 80 端口 ,以便 服务端侦听HTTP请求。 3.HTTP 是 一种通用的 , 无状态的应用层协议,基于标准客户机/服务器模型。 HTTP 特点 1.采用 “请求/
RecyclerView基础用法
是一款非常强大的 widget,它可以帮助您灵活地显示列表数据。当我开始学习 RecyclerView 的时候,我发现对于复杂的列表界面有很多资源可以参考,但是对于简单的列表展现就鲜有可参考的资源了。虽然 RecyclerView 的组成结构乍一看有些复杂,但是深入理解以后您会发现它其实非常简单明了。本文会通过创建一个简单的 RecyclerView 实现一
Javascript本地存储 - 入门指南
在讲解之前,我们需要明白之间的差别server side storage,并client side storage当涉及到网站和应用程序。服务器端意味着我们使用数据库将数据存储在服务器上,客户端包含JavaScript API,这些API可让您在客户端(在浏览器中)存储数据。什么是本地存储? 简而言之,local storage可以将其与数据库进行比较,只
前端开发进化之路
初级程序员仅能完成简单模块和项目的开发工作,难以胜任复杂模块的开发。通常是入行不久, 1 年及以下工作经验的同学。 能力要求1. 熟悉前端基础知识如 HTML、JS、CSS 。 2. 能够使用一门 MVVM 框架进行简单的业务开发。 3. 遇到复杂的组件和模块,会找现有的轮子使用。 4. 会使用百度、google 等检索工具搜索问题
RecyclerView更全解析之 - 基本使用和分割线解析
1.概述 昨天跟自己群里的人唠嗑的时候发现还有人在用Eclipse,我相信可能还是有很多人在用ListView,这里介绍一个已经出来的n年了的控件RecyclerView,实现ListView,GridView,瀑布流的效果。还可以轻松的实现一些复杂的功能,如QQ的拖动排序,侧滑删除等等。相关文章:                     
RecyclerView更全解析之 - 打造通用的万能Adapter
1.概述 离春节只有一个月,同时也在准备公司的节目所以每天有一段时间在练习吉他,刚刚群里有人问我什么时候开始分享仿内涵段子整个项目。算一下时间RecyclerView可能有4期左右的分享,自己又只能周末录讲解视频,所有可能会要等过完春节才能全部开始。   上一篇已经简单的讲解了一下。这一期我们来看一下怎么去打造一个万能的RecyclerView.Adap
RecyclerView更全解析之 - 打造通用的下拉刷新上拉加载
1.概述 这期我们在上一期的的基础上再去增加功能,我相信我们在真正的实践开发过程中肯定少不了下拉刷新和上拉加载。   我们需要思考一个问题上拉刷新下拉加载风格各式各样,淘宝和京东的列表刷新样式就肯定不一样,我们怎么样做到版本迭代的时候可以快速的更改样式。有时还需要显示正在加载数据或者无数据,比如筛选的时候有可能会出现没有数据的情况会显示无数据页面,怎么快
RecyclerView更全解析之 - 仿支付宝侧滑删除和拖动排序
1.概述 这是春节前的最后一篇分享技术的博客了,接下来的时间需要去完善视频讲解,至于今年都干了哪些事有什么成就吹牛的这里就不多说了,声明一下图片资源我是盗用的别人的。这是最后一期分享RecyclerView了,我们直接看这一期需要分享的效果:      这里写图片描述         视频讲解:相关文章:               
RecyclerView更全解析之 - 为它优雅的添加头部和底部
1.概述 上一期的,解决了几个坑。那么这一期我们来动态为RecyclerView去加载头部和底部,为上一期的RecyclerView列表数据添加广告轮播图,至于广告轮播大家可以看一下这一期 ,这里我就不多讲了,直接拿过来用。      视频讲解:相关文章: