深入理解 RecyclerView之ItemDecoration
RecyclerView已经推出了两年多了，大家也都领教了它的强大，但是它也有不足之处，没有分割线！现通过官方给的样例和画一些图帮助分析RecyclerView是如何绘制间隔线的。
学习思路：
一.基本知识点
二.Item和间隔线的绘制流程
三.ItemDecoration代码讲解
1.item垂直排列分析
2.item横向排列分析
3.网格间隔线分析
一、基本知识点
偏移量的概念，看清下图每张图中设置的四个参数，分别代表了（左，上，右，下）的偏移量。红色部分就是偏移出去的部分，其实就是我们需要的间隔线，不过我们只需要一个方向的偏移量就够了，就是在下面的或者右边的偏移量，后面会细讲。
image.png
内边距padding，和外边距margin，分析代码的时候会用到。
image.png
二、Item和间隔线的绘制流程
RecyclerView绘制item和间隔线的流程：item1——间隔线——Item2——间隔线...如此往复，所以绘制完item每次绘制间隔线的时候都需要测量绘制。
image.png
一定要把间隔线想象成矩形，就是图中黑色矩形
三、ItemDecoration代码讲解
RecyclerView没有像之前ListView提供divider属性，而是提供了方法recyclerView.addItemDecoration()，其中ItemDecoration需要我们自己写，有的童鞋可能会偷懒去网上找别人写好的，但是如果功能稍加改动就不之所错了，所以了解原理很重要。
ItemDecoration类主要是三个方法：
public void onDraw(Canvas c, RecyclerView parent, State state)
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, State state)
public void onDrawOver(Canvas c, RecyclerView parent, State state)
主要讲解前面两个方法。
我们自己写的类需要继承ItemDecoration且重写onDraw（），getItemOffsets（）方法才能完成我们需要的间隔线。getItemOffsets（）方法第一个参数可以看出，绘制线条其实就是绘制一个矩形，通过方法名可以看出是获得条目的偏移量，只需要实现outRect.set(left,top,right,bottom);四个参数就是左上右下四个方向的偏移量，
我们可以通过LinearLayoutManager.VERTICAL来判断是绘制横向线条还是纵向线条。
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
State state) {
if(mOrientation == LinearLayoutManager.VERTICAL){
//item垂直排放，所以绘制水平线条，左上右偏移量都是0
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
}else{//item水平排放，所以绘制处置线条，左上下偏移量都是0
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0 );
}
}
mDivider.getIntrinsicWidth()是需要绘制的Drawable的高度。
再来看onDraw（）方法
@Override
public void onDraw(Canvas c, RecyclerView parent, State state) {
if(mOrientation == LinearLayoutManager.VERTICAL){
//垂直，这里的垂直是item垂直，画水平线
drawVertical(c,parent);
}else{//水平，这里的水平是item水平，画垂直线条
drawHorizontal(c,parent);
}
super.onDraw(c, parent, state);
}
private void drawHorizontal(Canvas c, RecyclerView parent) {
//这里的水平是item水平，画垂直线条
int top = parent.getPaddingTop();
int bottom = parent.getHeight() - parent.getPaddingBottom();
int childCount = parent.getChildCount();
for (int i = 0; i < childCount ; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
int left = child.getRight() + params.rightMargin + Math.round(ViewCompat.getTranslationX(child));
int right = left + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top , right, bottom);
mDivider.draw(c);
}
}
private void drawVertical(Canvas c, RecyclerView parent) {
// 这里的垂直是item垂直，画水平线
int left = parent.getPaddingLeft();
int right = parent.getWidth() - parent.getPaddingRight();
int childCount = parent.getChildCount();
for (int i = 0; i < childCount ; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
int top = child.getBottom() + params.bottomMargin + Math.round(ViewCompat.getTranslationY(child));
int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top , right, bottom);
mDivider.draw(c);
}
}
看清楚代码里的注解，不要搞混了。
（一）item垂直排列分析
查看drawVertical(Canvas c, RecyclerView parent)方法
private void drawVertical(Canvas c, RecyclerView parent) {
// 这里的垂直是item垂直，画水平线
int left = parent.getPaddingLeft();
int right = parent.getWidth() - parent.getPaddingRight();
int childCount = parent.getChildCount();
//循环的意思是：每个item就是一个child，每个item下面有一个线条
for (int i = 0; i < childCount ; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
int top = child.getBottom() + params.bottomMargin + Math.round(ViewCompat.getTranslationY(child));
int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top , right, bottom);
mDivider.draw(c);
}
}
本来是想把注解写在代码里的，发现写完之后代码很乱很多，显得很困难的样子，为了不造成视觉困难就在下面解析代码吧，先看最后两行很好理解，
mDivider.setBounds(left, top , right, bottom);
mDivider.draw(c);
setBounds(int left, int top, int right, int bottom),
这个四参数指的是drawable将在被绘制在canvas的哪个矩形区域内，这个区域就是下图中黑色矩形的区域！核心代码就是这四个int值left、right、top、bottom。
image.png
int left = parent.getPaddingLeft();
很好理解，父组件RecyclerView左内边距，理解为左侧开始的地方。
int right = parent.getWidth() - parent.getPaddingRight();
宽度减去右内边距，理解为右侧结束的地方。
int top = child.getBottom() + params.bottomMargin + Math.round(ViewCompat.getTranslationY(child));
image.png
需要竖着滑动，垂直方向的属性动画的平移，要加上ViewCompat.getTranslationY(child)，Math.round()四舍五入。
上图中有三条红线，第一条就是child.getBottom的位置，第二条跟第一条之间的距离就是params.bottomMargin（图中稍稍有误），不要被三条红线误导了，黑色的矩形框才是我们的间隔线！！！所以bottom就很好写了，它就是top加间隔线的高度啦！就是图中第三条线。此时间隔线绘制结束，尽管去调用吧~如果理解了画横线的过程，那么画竖线就很简单了，其实就是把上图逆时针旋转90度，然后做分析。
（二）item横向排列分析
这次我们反过来做，先不看代码，先来看图分析left、right、top、bottom这几个值该怎么写。
image.png
可以想到top和bottom很好写：
1、int top = parent.getPaddingTop();
2、int bottom = parent.getHeight- parent.getPaddingBottom();
来看图中第一条红线的位置：child.getRight
第一条红线和第二条红线的距离：params.rightMargin，不难写出：
3、int left = child.getRight() + params.rightMargin + Math.round(ViewCompat.getTranslationX(child));
左右滑动需要加上水平方向动画的平移ViewCompat.getTranslationX(child)
right就是left加上mDivider的宽度~
4、int right = left + mDivider.getIntrinsicHeight();
查看drawHorizontal(Canvas c, RecyclerView parent) 方法做一下对比：
private void drawHorizontal(Canvas c, RecyclerView parent) {
//这里的水平是item水平，画垂直线条
int top = parent.getPaddingTop();
int bottom = parent.getHeight() - parent.getPaddingBottom();
int childCount = parent.getChildCount();
for (int i = 0; i < childCount ; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
int left = child.getRight() + params.rightMargin + Math.round(ViewCompat.getTranslationX(child));
int right = left + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top , right, bottom);
mDivider.draw(c);
}
}
是不是完全一样？
（三）网格间隔线分析
网格间隔线虽然有点复杂，但如果慢慢分析，还是可以写出来的，要注意细节。其实就是横线和竖线都画，对于某一个item来说就是右边添加偏移量和下边添加偏移量。
@Override
@Deprecated
public void getItemOffsets(Rect outRect, int itemPosition,
RecyclerView parent) {
int right = mDivider.getIntrinsicWidth();
int bottom = mDivider.getIntrinsicHeight();
outRect.set(0, 0, right, bottom);
}
onDraw(Canvas c, RecyclerView parent, State state)方法里就不用做判断if(mOrientation == LinearLayoutManager.VERTICAL){}，因为横竖线都要画的。
drawVertical(c,parent);// 绘制水平间隔线
drawHorizontal(c,parent);//绘制垂直间隔线
先上图，一定要画图。
image.png
private void drawVertical(Canvas c, RecyclerView parent) {
//绘制垂直间隔线(垂直的矩形)
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
int left = child.getRight() + params.rightMargin;
int right = left + mDivider.getIntrinsicWidth();
int top = child.getTop() - params.topMargin;
int bottom = child.getBottom() + params.bottomMargin;
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
获得的图形是这样的：
image.png
绘制横线间隔线：
private void drawHorizontal(Canvas c, RecyclerView parent) {
// 绘制水平间隔线
int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
RecyclerView.LayoutParams params = (LayoutParams) child.getLayoutParams();
int left = child.getLeft() - params.leftMargin;
int right = child.getRight()+ params.rightMargin;
int top = child.getBottom() + params.bottomMargin;
int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top, right, bottom);
mDivider.draw(c);
}
}
image.png
最终绘制结果是这样的：
image.png
哎呦？线条交叉的地方为什么没有绘制呢？其实如果分割线非常的细这样写是没有问题的，已经实现了网格的分割。如果非要写的完美把交叉区域也写上话，也很简单——只需要在drawVertical或者drawHorizontal的其中一个加入mDivider的宽或高即可(如果两个里面都加的话就会出现重叠绘制交叉处的bug)；
那么我们来修改drawVertical方法里的right就行了：
int right = child.getRight()+ params.rightMargin+mDivider.getIntrinsicWidth();
当然，在实际开发的过程中会涉及到分别判断出首行，末行，首列，末列，根据是否绘制边界线(drawBorderLine)来进行处理偏移，这里就不多说了。
