Materail Design 入门（十）—— RecyclerView的使用（二）万能分隔线
来源：互联网 发布：税务师如何备考知乎 编辑：程序博客网 时间：2024/05/21 19:48
这篇博客作为上一章的补充，今天在总结一点Recyclerview分割线的使用，相信大家在网上已经看过了太多的万能分割线，真的万能吗？
大多数情况还是满足的，比如横向列表，竖向列表，用的还是挺好的，如果是一个GridView可能就尴尬了，大多数万能分割线画出来的都不那么完美，他会在没有内容的item上也画上分割线（如下图），这样的效果通常不是我们所需要的。
1、首先给大家找了一篇讲解Recyclerview分割线绘制原理的文章：RecyclerView系列之（2）：为RecyclerView添加分隔线
2、接着给大家贴上通常所谓的万能分割线的代码，这段代码中支持设置分隔线的位置（水平或垂直）、分割线的颜色、分隔线的宽度等。
public class DividerItemDecoration extends RecyclerView.ItemDecoration { private Paint mPaint; //取名mDivider似乎更恰当 private Drawable mDrawable; //分割线高度，默认为1px private int mDividerHeight = 2; //列表的方向 private int mOrientation; //系统自带的参数 private static final int[] ATTRS = new int[]{android.R.attr.listDivider}; //水平 public static final int HORIZONTAL_LIST = RecyclerView.HORIZONTAL; //垂直 public static final int VERTICAL_LIST = RecyclerView.VERTICAL; //水平+垂直 public static final int BOTH_SET = 2; /** * 默认分割线：高度为2px，颜色为灰色 * * @param context 上下文 * @param orientation 列表方向 */ public DividerItemDecoration(Context context, int orientation) { this.setOrientation(orientation); //获取xml配置的参数 final TypedArray a = context.obtainStyledAttributes(ATTRS); //typedArray.getDrawable(attr)这句是说我们可以通过我们的资源获得资源，使用我们的资源名attr去获得资源id //看不懂就用自己写一个分割线的图片吧，方法：ContextCompat.getDrawable(context, drawableId); mDrawable = a.getDrawable(0); //官方的解释是：回收TypedArray，以便后面重用。在调用这个函数后，你就不能再使用这个TypedArray。 //在TypedArray后调用recycle主要是为了缓存。 a.recycle(); } /** * 自定义分割线 * * @param context 上下文 * @param orientation 列表方向 * @param drawableId 分割线图片 */ public DividerItemDecoration(Context context, int orientation, int drawableId) { this.setOrientation(orientation); //旧的getDrawable方法弃用了，这个是新的 mDrawable = ContextCompat.getDrawable(context, drawableId); mDividerHeight = mDrawable.getIntrinsicHeight(); } /** * 自定义分割线 * * @param context 上下文 * @param orientation 列表方向 * @param dividerHeight 分割线高度 * @param dividerColor 分割线颜色 */ public DividerItemDecoration(Context context, int orientation, int dividerHeight, int dividerColor) { this.setOrientation(orientation); mDividerHeight = dividerHeight; Log.e("mDividerHeight", mDividerHeight + "==================="); //抗锯齿画笔 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(dividerColor); //填满颜色 mPaint.setStyle(Paint.Style.FILL); } /** * 设置方向 * * @param orientation */ public void setOrientation(int orientation) { if (orientation < 0 || orientation > 2) throw new IllegalArgumentException("invalid orientation"); mOrientation = orientation; } /** * 绘制分割线之后,需要留出一个外边框,就是说item之间的间距要换一下 * * @param outRect outRect.set(0, 0, 0, 0);的四个参数理解成margin就好了 * @param view 视图 * @param parent 父级view * @param state */ @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { //下面super...代码其实调用的就是那个过时的getItemOffsets,也就是说这个方法体内容也可以通通移到那个过时的getItemOffsets中 super.getItemOffsets(outRect, view, parent, state); //获取layoutParams参数 RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) view.getLayoutParams(); //当前位置 int itemPosition = layoutParams.getViewLayoutPosition(); //ItemView数量 int childCount = parent.getAdapter().getItemCount(); switch (mOrientation) { case BOTH_SET: //获取Layout的相关参数 int spanCount = this.getSpanCount(parent); if (isLastRaw(parent, itemPosition, spanCount, childCount)) { // 如果是最后一行，则不需要绘制底部 outRect.set(0, 0, mDividerHeight, 0); } else if (isLastColum(parent, itemPosition, spanCount, childCount)) { // 如果是最后一列，则不需要绘制右边 outRect.set(0, 0, 0, mDividerHeight); } else { outRect.set(0, 0, mDividerHeight, mDividerHeight); } break; case VERTICAL_LIST: childCount -= 1; //水平布局右侧留Margin,如果是最后一列,就不要留Margin了 outRect.set(0, 0, (itemPosition != childCount) ? mDividerHeight : 0, 0); break; case HORIZONTAL_LIST: childCount -= 1; //垂直布局底部留边，最后一行不留 outRect.set(0, 0, 0, (itemPosition != childCount) ? mDividerHeight : 0); break; } } /** * 绘制分割线 * * @param c * @param parent * @param state */ @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); if (mOrientation == VERTICAL_LIST) { drawVertical(c, parent); } else if (mOrientation == HORIZONTAL_LIST) { drawHorizontal(c, parent); } else { drawHorizontal(c, parent); drawVertical(c, parent); } } /** * 绘制横向 item 分割线 * * @param canvas 画布 * @param parent 父容器 */ private void drawHorizontal(Canvas canvas, RecyclerView parent) { final int x = parent.getPaddingLeft(); final int width = parent.getMeasuredWidth() - parent.getPaddingRight(); //getChildCount()(ViewGroup.getChildCount) 返回的是显示层面上的“所包含的子 View 个数”。 final int childSize = parent.getChildCount(); for (int i = 0; i < childSize; i++) { final View child = parent.getChildAt(i); RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams(); //item底部的Y轴坐标+margin值 final int y = child.getBottom() + layoutParams.bottomMargin; final int height = y + mDividerHeight; Log.e("height", height + "==================="); if (mDrawable != null) { //setBounds(x,y,width,height); x:组件在容器X轴上的起点 y:组件在容器Y轴上的起点 // width:组件的长度 height:组件的高度 mDrawable.setBounds(x, y, width, height); mDrawable.draw(canvas); } if (mPaint != null) { canvas.drawRect(x, y, width, height, mPaint); } } } /** * 绘制纵向 item 分割线 * * @param canvas * @param parent */ private void drawVertical(Canvas canvas, RecyclerView parent) { final int top = parent.getPaddingTop(); final int bottom = parent.getMeasuredHeight() - parent.getPaddingBottom(); final int childSize = parent.getChildCount(); for (int i = 0; i < childSize; i++) { final View child = parent.getChildAt(i); RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child.getLayoutParams(); final int left = child.getRight() + layoutParams.rightMargin; final int right = left + mDividerHeight; if (mDrawable != null) { mDrawable.setBounds(left, top, right, bottom); mDrawable.draw(canvas); } if (mPaint != null) { canvas.drawRect(left, top, right, bottom, mPaint); } } } /** * 获取列数 * * @param parent * @return */ private int getSpanCount(RecyclerView parent) { int spanCount = -1; RecyclerView.LayoutManager layoutManager = parent.getLayoutManager(); if (layoutManager instanceof GridLayoutManager) { spanCount = ((GridLayoutManager) layoutManager).getSpanCount(); } else if (layoutManager instanceof StaggeredGridLayoutManager) { spanCount = ((StaggeredGridLayoutManager) layoutManager) .getSpanCount(); } return spanCount; } private boolean isLastColum(RecyclerView parent, int pos, int spanCount, int childCount) { RecyclerView.LayoutManager layoutManager = parent.getLayoutManager(); if (layoutManager instanceof GridLayoutManager) { int orientation = ((GridLayoutManager) layoutManager) .getOrientation(); if (orientation == StaggeredGridLayoutManager.VERTICAL) { // 如果是最后一列，则不需要绘制右边 if ((pos + 1) % spanCount == 0) return true; } else { childCount = childCount - childCount % spanCount; // 如果是最后一列，则不需要绘制右边 if (pos >= childCount) return true; } } else if (layoutManager instanceof StaggeredGridLayoutManager) { int orientation = ((StaggeredGridLayoutManager) layoutManager) .getOrientation(); if (orientation == StaggeredGridLayoutManager.VERTICAL) { // 如果是最后一列，则不需要绘制右边 if ((pos + 1) % spanCount == 0) return true; } else { childCount = childCount - childCount % spanCount; // 如果是最后一列，则不需要绘制右边 if (pos >= childCount) return true; } } return false; } private boolean isLastRaw(RecyclerView parent, int pos, int spanCount, int childCount) { int orientation; RecyclerView.LayoutManager layoutManager = parent.getLayoutManager(); if (layoutManager instanceof GridLayoutManager) { childCount = childCount - childCount % spanCount; orientation = ((GridLayoutManager) layoutManager) .getOrientation(); if (orientation == StaggeredGridLayoutManager.VERTICAL) { // 如果是最后一行，则不需要绘制底部 childCount = childCount - childCount % spanCount; if (pos >= childCount) return true; } else {// StaggeredGridLayoutManager 横向滚动 // 如果是最后一行，则不需要绘制底部 if ((pos + 1) % spanCount == 0) return true; } } else if (layoutManager instanceof StaggeredGridLayoutManager) { orientation = ((StaggeredGridLayoutManager) layoutManager) .getOrientation(); if (orientation == StaggeredGridLayoutManager.VERTICAL) { // 如果是最后一行，则不需要绘制底部 childCount = childCount - childCount % spanCount; if (pos >= childCount) return true; } else {// StaggeredGridLayoutManager 横向滚动 // 如果是最后一行，则不需要绘制底部 if ((pos + 1) % spanCount == 0) return true; } } return false; }}3、最后我们来讨论下刚才所提出的问题，如何给Gridview画上完美的分割线。
我们来看下面这幅图，这样的效果相信大家一定很常见。 
由图可见，这个Gridview的分割线最左边和最右边不要画；最后一个item如果不是这一行的最后一个，需要画右边框和下边框；
这是我们的两个特殊需求。
首先分析下思路吧，我们可以理解为给每个item只画右边和底部的分隔线，当该item是该行的最后一个时则不画右边的分割线；
//绘制纵向 item 分割线 private void drawVertical(Canvas canvas, RecyclerView parent) { final int childSize = parent.getChildCount(); for (int i = 0; i < childSize; i++) { final View child = parent.getChildAt(i); RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child .getLayoutParams(); if ((i % getSpanCount(parent)) != getSpanCount(parent) - 1) {//最后一列不画右边 int top = child.getTop() - layoutParams.topMargin; int bottom = child.getBottom() + layoutParams.bottomMargin; int left = child.getRight() + layoutParams.rightMargin; int right = left + mDividerHeight; if (mDividerDarwable != null) { mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(canvas); } if (mPaint != null) { canvas.drawRect(left, top, right, bottom, mPaint); } } } }if ((i % getSpanCount(parent)) != getSpanCount(parent) - 1) 这句话判断是否是该行的最后一个item，getSpanCount（）方法获得列数；（注意：每行的position是0-getSpanCount() - 1）
//绘制底部横向 item 分割线 private void drawHorizontalBottom(Canvas canvas, RecyclerView parent) { final int childSize = parent.getChildCount(); for (int i = 0; i < childSize; i++) { final View child = parent.getChildAt(i); RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child .getLayoutParams(); int left = child.getLeft() - layoutParams.leftMargin - mDividerHeight; int right = child.getRight() + layoutParams.rightMargin; int top = child.getBottom() + layoutParams.bottomMargin; int bottom = top + mDividerHeight; if (mDividerDarwable != null) { mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(canvas); } if (mPaint != null) { canvas.drawRect(left, top, right, bottom, mPaint); } } }底部的分割线按正常情况画就好。下面贴上完整的代码。
public class DividerGridItemDecoration extends RecyclerView.ItemDecoration { private Drawable mDividerDarwable; private int mDividerHeight = 1; private Paint mPaint; public final int[] ATRRS = new int[]{android.R.attr.listDivider}; public DividerGridItemDecoration(Context context) { final TypedArray ta = context.obtainStyledAttributes(ATRRS); this.mDividerDarwable = ta.getDrawable(0); ta.recycle(); this.mDividerDarwable = ContextCompat.getDrawable(context, R.drawable.line_divier); } public DividerGridItemDecoration(Context context, int drawableId) { mDividerDarwable = ContextCompat.getDrawable(context, drawableId); } /* int dividerHight 分割线的线宽 int dividerColor 分割线的颜色 */ public DividerGridItemDecoration(Context context, int dividerHight, int dividerColor) { this(context); mDividerHeight = dividerHight; mPaint = new Paint(); mPaint.setColor(dividerColor); } /* int dividerHight 分割线的线宽 Drawable dividerDrawable 图片分割线 */ public DividerGridItemDecoration(Context context, int dividerHight, Drawable dividerDrawable) { this(context); mDividerHeight = dividerHight; mDividerDarwable = dividerDrawable; } //获取分割线尺寸 @Override public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); outRect.set(0, 0, 0, mDividerHeight); } //绘制分割线 @Override public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) { super.onDraw(c, parent, state); drawVertical(c, parent); //drawHorizontalTop(c, parent); drawHorizontalBottom(c, parent); } private int getSpanCount(RecyclerView parent) { // 列数 int spanCount = -1; RecyclerView.LayoutManager layoutManager = parent.getLayoutManager(); if (layoutManager instanceof GridLayoutManager) { spanCount = ((GridLayoutManager) layoutManager).getSpanCount(); } else if (layoutManager instanceof StaggeredGridLayoutManager) { spanCount = ((StaggeredGridLayoutManager) layoutManager).getSpanCount(); } else if (layoutManager instanceof LinearLayoutManager) { spanCount = ((LinearLayoutManager) layoutManager).getItemCount(); } return spanCount; } //绘制顶部横向 item 分割线 private void drawHorizontalTop(Canvas canvas, RecyclerView parent) { final int childSize = parent.getChildCount(); for (int i = 0; i < childSize; i++) { final View child = parent.getChildAt(i); RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child .getLayoutParams(); int left = child.getLeft() - layoutParams.leftMargin - mDividerHeight; int right = child.getRight() + layoutParams.rightMargin; int top = child.getTop() + layoutParams.topMargin; int bottom = top + mDividerHeight; if (mDividerDarwable != null) { mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(canvas); } if (mPaint != null) { canvas.drawRect(left, top, right, bottom, mPaint); } } } //绘制底部横向 item 分割线 private void drawHorizontalBottom(Canvas canvas, RecyclerView parent) { final int childSize = parent.getChildCount(); for (int i = 0; i < childSize; i++) { final View child = parent.getChildAt(i); RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child .getLayoutParams(); int left = child.getLeft() - layoutParams.leftMargin - mDividerHeight; int right = child.getRight() + layoutParams.rightMargin; int top = child.getBottom() + layoutParams.bottomMargin; int bottom = top + mDividerHeight; if (mDividerDarwable != null) { mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(canvas); } if (mPaint != null) { canvas.drawRect(left, top, right, bottom, mPaint); } } } //绘制纵向 item 分割线 private void drawVertical(Canvas canvas, RecyclerView parent) { final int childSize = parent.getChildCount(); for (int i = 0; i < childSize; i++) { final View child = parent.getChildAt(i); RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) child .getLayoutParams(); if ((i % getSpanCount(parent)) != getSpanCount(parent) - 1) {//最后一列不画右边 int top = child.getTop() - layoutParams.topMargin; int bottom = child.getBottom() + layoutParams.bottomMargin; int left = child.getRight() + layoutParams.rightMargin; int right = left + mDividerHeight; if (mDividerDarwable != null) { mDividerDarwable.setBounds(left, top, right, bottom); mDividerDarwable.draw(canvas); } if (mPaint != null) { canvas.drawRect(left, top, right, bottom, mPaint); } } } }}如果想写出一个完美的万能分割线的话，把这两个类的内容整理一下便可。(^o^)/~
4、接下来补充一点小知识，关于onDraw（）和onDrawOver（）的区别：
在官方的开发文档中有指出，onDraw是在itemview绘制之前，onDrawOver是在itemview绘制之后。
All ItemDecorations are drawn in the order they were added, before the item views (in onDraw() and after the items (in onDrawOver(Canvas, RecyclerView, RecyclerView.State).
Android中View的绘制流程是：View先会调用draw方法，在draw中又会调用onDraw方法。 而在RecyclerView的draw方法中会先通过super.draw() 调用父类也就是View的draw方法，进而继续调用RecyclerView的OnDraw方法，ItemDecorations的onDraw方法就在此时会被调用，RecyclerView执行完super.draw()之后，ItemDecorations的onDrawOver方法也被调用，这也就解释了为什么说onDraw会绘制在itemview之前，表现形式是在最底层（抽象的说法，最底层应该是background），onDrawOver是在itemview绘制之后，表现形式在最上层。
下面对照源码来看下：
/** * RecyclerView的draw方法 * @param c */ @Override public void draw(Canvas c) { // 调用父类也就是View的draw方法 super.draw(c); final int count = mItemDecorations.size(); for (int i = 0; i < count; i++) { // 执行ItemDecorations的onDrawOver方法 mItemDecorations.get(i).onDrawOver(c, this, mState); } } /** * View的draw方法 * @param canvas */ @CallSuper public void draw(Canvas canvas) { .... // View会继续调用onDraw if (!dirtyOpaque) onDraw(canvas); .... } /** * RecyclerView的onDraw方法 * @param c */ @Override public void onDraw(Canvas c) { super.onDraw(c); final int count = mItemDecorations.size(); for (int i = 0; i < count; i++) { // 执行ItemDecorations的onDraw方法 mItemDecorations.get(i).onDraw(c, this, mState); } }知道了他们的区别之后呢，我们就可以使用onDrawOver()来实现一些比较好玩的效果了，比如stickheader，如下图： 
推荐文章：
ItemDecoration解析(三) 实现stickyHeader效果
RecyclerView探索之通过ItemDecoration实现StickyHeader效果
阅读全文
0 0
- Materail Design 入门（十）—— RecyclerView的使用（二）万能分隔线
- Materail Design 入门（十）—— RecyclerView的使用（一）
- Materail Design 入门（九）—— NavigationView的使用
- Materail Design 入门（七）——AppBarLayout的使用方法
- Materail Design 入门（八）——CollapsingToolbarLayout的使用方法
- Materail Design 入门（三）——FloatingActionButton和Snackbar
- Materail Design 入门（五）—— 使用DrawerLayout实现仿qq6.0的侧滑菜单功能
- Materail Design 入门（五）—— 使用DrawerLayout实现仿qq6.0的侧滑菜单功能
- Materail Design 入门（六）—— TabLayout之使用介绍（1）
- Materail Design 入门（四）——Toolbar的使用方法（1）
- Materail Design 入门（四）——Toolbar的使用方法（2）
- Materail Design 入门（六）—— TabLayout之标题中添加自定义View（2）
- Materail Design学习跟随demo解读（三）
- Material Design之RecyclerView的使用（一）
- RecyclerView系列之（2）：为RecyclerView添加分隔线
- RecyclerView系列之（2）：为RecyclerView添加分隔线
- RecyclerView系列之（2）：为RecyclerView添加分隔线
- RecyclerView系列之（2）：为RecyclerView添加分隔线
- vb.net 教程 4-3 文件操作 FileInfo 2
- IntelliJ IDEA 安装插件 (vue)
- 垃圾回收参数
- “盛大游戏杯”—K 购买装备
- 类的初始化顺序（一）
- Materail Design 入门（十）—— RecyclerView的使用（二）万能分隔线
- 浅谈android、web混合开发
- Matlab中插值函数汇总和使用说明
- 最长单调递增子序列的长度
- 数据结构：（更新中）成员变量、成员函数和实例一般命名和定义方法
- 博客记录学习过程--win10与Ubuntu16.10双系统
- 好的面试是一次自我修行
- Oracle 查询出来的数据取第一条
- C语言作业-advance4-1-逆序输出
