Android RecyclerView ItemDecoration 类解析


一、前言

毫无疑问,RecyclerView 是 Android 中最重要的系统组件之一,它的出现就是为了高效代替 ListView 和 GridView。

今天,我们来讲讲 RecyclerView 中的静态内部类 ItemDecoration。顾名思义 ItemDecoration 就是 Item 的装饰,我们可以在 Item 的上下左右添加自定义的装饰,从而丰富 Item 的 UI 效果。

二、RecyclerView 基础知识

我们都知道 RecyclerView 里面就是一个又一个的 Item,但是其实这些 Item 外面包裹着一个矩形,只是我们再使用 RecyclerView 的时候 Left、Right、Top 和 Bottom 默认都是 0,所以我们看不到这些矩形,具体如下图所示:
Android RecyclerView ItemDecoration 类解析

三、DividerItemDecoration(系统提供)

我们都知道,使用 RecyclerView 时 ,我们不能像 ListView 那样通过 setDivider() 的方式来设置分割线,但是系统已经为我们提供了一个 DividerItemDecoration 类来设置分割线,这个类就是继承 RecyclerView.ItemDecoration,我们来看下源码:

public class DividerItemDecoration extends RecyclerView.ItemDecoration {
public static final int HORIZONTAL = LinearLayout.HORIZONTAL;
public static final int VERTICAL = LinearLayout.VERTICAL;

private static final String TAG = "DividerItem";
private static final int[] ATTRS = new int[]{ android.R.attr.listDivider };
... ...
... ...

3.1、RecyclerView 简单使用

不设置分割线,效果如下所示:

Android RecyclerView ItemDecoration 类解析

3.2、使用 DividerItemDecoration 设置分割线

DividerItemDecoration 的使用非常简单,只需添加下面代码即可:

DividerItemDecoration decoration = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
recyclerView.addItemDecoration(decoration);

具体效果如下所示:

Android RecyclerView ItemDecoration 类解析
一般情况下以上 RecyclerView 的基本用法便可以实现绝大多数需求,但是某些场景下却远远不够,特别是需要实现比较复杂的 UI 效果的时候,所以这时候就需要利用 ItemDecoration,接下来我们就学习一下 ItemDecoration 的具体使用。

四、ItemDecoration 源码

首先,我们来看一下 ItemDecoration 的源码,这里的源码已经把注释和三个已经被弃用的方法去掉了,具体如下所示:

public abstract static class ItemDecoration {

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

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

public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull State state) {
getItemOffsets(outRect, ((LayoutParams) view.getLayoutParams()).getViewLayoutPosition(), parent);
}
}

从源码中我们可以看出 ItemDecoration 类中就只有三个方法,分别是 onDraw()、onDrawOver() 和 getItemOffsets(),具体作用如下:

onDraw(): 在子视图上绘制内容,绘制图层在 Item 以下,所以如果绘制区域与 Item 区域相重叠,会被遮挡;onDrawOver():同样是绘制内容,但与onDraw() 的区别是,绘制图层在最上层;getItemOffsets():设置ItemView的内嵌偏移长度。
4.1、getItemOffsets()

getItemOffsets() 的作用就是设置 Item 的内嵌偏移长度,从上面我们已经知道,RecyclerView 的 Item 外面是包裹着一个矩形的,这个方法就是用来设置矩形与 Item 之间的间隔的。

具体使用:

public class RectItemDecoration extends RecyclerView.ItemDecoration {

// 参数说明:
// 1. outRect:全为 0 的 Rect(包括着Item)
// 2. view:RecyclerView 中的 视图 Item
// 3. parent:RecyclerView 本身
// 4. state:状态
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
// 4个参数分别对应左(Left)、上(Top)、右(Right)、下(Bottom)
// 上述语句代表:左、右、上和下偏移长度=100px
outRect.set(100, 100, 100,100);
}
}

//用自定义分割线类设置分割线
recyclerView.addItemDecoration(new RectItemDecoration());

效果如下所示:(上下左右都设置了 100px 的偏移量)

Android RecyclerView ItemDecoration 类解析

4.2、onDraw()

onDraw() 的作用是通过 Canvas 对象绘制内容,需要注意的是 onDraw() 绘制会先于 Item 的绘制,所以如果在 onDraw() 中绘制的内容在 Item 边界内,就会被 Item 遮挡住,所以 onDraw() 一般会和 getItemOffsets() 结合一起使用,即在矩形与 Item 的间隔区域内绘制内容。

实例1:在左侧间隔区域绘制一个空心圆,并在下侧间隔区域绘制一个 20px 的红色分割线。

我们先来看效果:

Android RecyclerView ItemDecoration 类解析
具体代码如下所示:

public class CircleRectDecoration extends RecyclerView.ItemDecoration {

private Paint colorPaint;
private Paint dividerPaint;

// 初始化
public RectItemDecoration() {
colorPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
colorPaint.setColor(Color.BLUE);
colorPaint.setStyle(Paint.Style.STROKE);
colorPaint.setStrokeWidth(5);

dividerPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
dividerPaint.setColor(Color.RED);
dividerPaint.setStyle(Paint.Style.FILL);
}

@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
outRect.set(100, 0, 0, 20);
}

@Override
public void onDraw(@NonNull Canvas canvas, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDraw(canvas, parent, state);
RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
// 需要遍历每个 Item 进行绘制
for (int i = 0; i < parent.getChildCount(); i++) {
View childView = parent.getChildAt(i);
int leftItemWidth = layoutManager.getLeftDecorationWidth(childView);
int bottomItemHeight = layoutManager.getBottomDecorationHeight(childView);
int left = leftItemWidth / 2;
canvas.drawCircle(left, childView.getTop() + childView.getHeight() / 2, 20, colorPaint);
// getItemOffsets() 中的设置的是 bottom = 20px;所以在 drawRect 时,top 为 childView.getBottom, bottom 为top + bottomDecorationHeight
canvas.drawRect(new Rect(leftItemWidth, childView.getBottom(),
childView.getWidth() + leftItemWidth,
childView.getBottom() + bottomItemHeight), dividerPaint);
}
}

getItemOffsets() 是针对每个 item 都会执行一次,也就是说每个 item 的 outRect 可以设置为不同值,但是 onDraw() 是针对 ItemDecoration 的,不是针对 item 的,只执行一次。所以我们在 onDraw() 中绘制的时候,需要遍历每个 item 进行绘制。

4.2、onDrawOver()

onDrawOver() 的作用与 onDraw() 类似,都是通过 Canvas 对象绘制内容,但与onDraw() 的区别是:onDrawOver() 绘制是后于 onDraw() 的,所以绘制内容是不会被 Item 所遮挡的,反而 Item 会被 onDrawOver() 绘制的内容所遮挡。

实例2:在实例1的基础上,绘制一个角标到 Item 上。

我们先来看效果:

Android RecyclerView ItemDecoration 类解析
具体代码如下所示:

@Override
public void onDrawOver(@NonNull Canvas canvas, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDrawOver(canvas, parent, state);

int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View view = parent.getChildAt(i);
int index = parent.getChildAdapterPosition(view);
float top = view.getTop();
if (index < 3) {
canvas.drawBitmap(mIcon, 120, top, flagPaint);
}
}
}

五、小结

自定义 ItemDecoration 通常要根据需要,复写它的 3 个方法。

getItemOffsets 撑开 Item 上、下、左、右四个方向的空间;onDraw 在 Item 内容之下绘制图形;onDrawOver 在 Item 内容之上绘制图形。

ItemDecoration 的作用远不止以上这么一点,我这里只是简单的介绍了下 ItemDecoration 中三个方法的使用,从而使得 RecyclerView 中的 Item 的 UI 更加丰富。

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

Android RecyclerView ItemDecoration 类解析

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » Android RecyclerView ItemDecoration 类解析
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏