Android开发之RecyclerView的间隔线处理

RecyclerView没有默认的分割线，需要自己绘制，接下来我会为大家绘制三种线：水平线、竖直线、和网格线。

废话少说，马上开车！！！

---------------------------------------------华丽的分割线------------------------------------------------------------

水平线实现：在原来的代码中添加

mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));

即可实现分割线，不过默认的分割线颜色个人感觉有点不太漂亮，大家看图说话：

想要改变分割线的颜色只能在theme中添加该属性

<!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:listDivider">@drawable/divider_bg</item>
    </style>

然后在drawable中添加背景色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:centerColor="#ffff0000"
        android:endColor="#ffff0000"
        android:startColor="#ffff0000"
        android:type="linear" />
    <size android:height="1dp" />
</shape>

为了看起来更亮眼我全部设置成了骚红色，来大家看效果图：

看一下gridview和瀑布流的效果：

---------------------------------------------华丽的分割线------------------------------------------------------------

竖直线：和水平线同样的道理只需要改动一点代码即可只需要把vertical改成horizontal即可。

mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL));

看效果图：

---------------------------------------------华丽的分割线------------------------------------------------------------

网格线：大家估计该注意到问题了，像gridView网格状的该怎么搞啊其实有个很简单的方法，写一个水平的然后在写一个竖直的不就ok了嘛。。。

mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.HORIZONTAL));
mRecyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));

这是一种偷懒的方法，效果嘛就只能呵呵了，大家看效果图：

丑丑丑。。。

---------------------------------------------华丽的分割线------------------------------------------------------------

网格线的优雅写法：其实想解决这个问题，没办法只有看源码了，源码分析我就不带大家分析了，大家有兴趣的自己可以ctrl+鼠标左键自行查看，我这里的思路是：重写ItemDecoration类，同时绘制水平和竖直线，当然了为了保证下面的线不能超过你的内容，需要加以判断有多少行多少列。。。具体怎么实现的，代码奉上：(感谢一下dn学院的ricky老师)

public class DividerGridViewItemDecoration extends RecyclerView.ItemDecoration {

    private Drawable mDivider;
    private int[] attrs = new int[]{android.R.attr.listDivider};

    public DividerGridViewItemDecoration(Context context) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs);
        mDivider = typedArray.getDrawable(0);
        typedArray.recycle();
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        drawVertical(c, parent);
        drawHorizontal(c, parent);
    }

    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 = (RecyclerView.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);
        }


    }

    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 = (RecyclerView.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);
        }

    }

    @Override
    @Deprecated
    public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
        // 四个方向的偏移值
        int right = mDivider.getIntrinsicWidth();
        int bottom = mDivider.getIntrinsicHeight();
        if (isLastColum(itemPosition, parent)) {//是否是最后一列
            right = 0;
        }
        if (isLastRow(itemPosition, parent)) {//是最后一行
            bottom = 0;
        }
        outRect.set(0, 0, right, bottom);

    }

    /**
     * 是否是最后一行
     */
    private boolean isLastRow(int itemPosition, RecyclerView parent) {
        int spanCount = getSpanCount(parent);
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        //有多少列
        if (layoutManager instanceof GridLayoutManager) {
            int childCount = parent.getAdapter().getItemCount();
            int lastRowCount = childCount % spanCount;
            //最后一行的数量小于spanCount
            if (lastRowCount == 0 || lastRowCount < spanCount) {
                return true;
            }
        }
        return false;
    }

    /**
     * 判断是否是最后一列
     */
    private boolean isLastColum(int itemPosition, RecyclerView parent) {
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        //有多少列
        if (layoutManager instanceof GridLayoutManager) {
            int spanCount = getSpanCount(parent);
            if ((itemPosition + 1) % spanCount == 0) {
                return true;
            }
        }
        return false;
    }

    private int getSpanCount(RecyclerView parent) {
        RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
        if (layoutManager instanceof GridLayoutManager) {
            GridLayoutManager lm = (GridLayoutManager) layoutManager;
            int spanCount = lm.getSpanCount();
            return spanCount;
        }
        return 0;
    }
}

然后添加一下代码即可优雅的实现网格效果的线

DividerGridViewItemDecoration dividerGridViewItemDecoration = new DividerGridViewItemDecoration(this);
mRecyclerView.addItemDecoration(dividerGridViewItemDecoration);

效果图走起：

---------------------------------------------华丽的分割线------------------------------------------------------------

下一节还是带领大家继续处理recyclerView的相关问题，还望大家支持。。。