RecyclerView分割线——万能分割线

来源：互联网发布：网络电视盒编辑：程序博客网时间：2024/05/01 15:39

参照网络上众多的分割线设计方法，对方法进行调整和修改，最终完成的比较通用的RecyclerView分割线，底部会附上参考网址，大家可以去看一下。

在正文之前，先说一下个人看法：研究下来，我发现，其实最简单的办法就是直接去设置ItemView的Margin，如果需要分割线有颜色，大可直接在ItemView父级容器的Background属性上做文章。
虽然这个文章是本人发表的，但是我并不推荐大家使用，本身算法过于复杂，能解决大部分问题，但不是全部，我也更热衷于通过Margin+Background的方式解决，而且感觉不加边框才是最好看的。

效果图：

这里写图片描述 !

知识点

本身没多少知识点，就是一大堆的计算问题，代码注释我写得很详尽了，大家可以直接从底部源码开始

设置分割线需要继承ItemDecoration，然后重写以下几个方法：

getItemOffsets:就直接理解成绘制Margin吧。因为绘制分割线是有宽度的，要调整两个ItemView直接的间距，间距为 outRect 设置的4个方向的值，将被计算进所有 decoration 的尺寸中，而这个尺寸，被计入了 RecyclerView 每个item view 的 padding 中，
onDraw：把边分割线在ItemView下面。 为 divider 设置绘制范围，并绘制到 canvas 上，而这个绘制范围可以超出在 getItemOffsets 中设置的范围，但由于 decoration 最终是绘制在 ItemView的底下
onDrawOver：是绘制在最上层的，所以它的绘制位置并不受限制

代码使用方法：

添加水平分割线：高度为2px，颜色为灰色

        //水平分割线        recyclerView.addItemDecoration(new DividerItemDecoration(                ListRecycle.this, DividerItemDecoration.HORIZONTAL_LIST));

添加垂直分割线：高度为2px，颜色为灰色

    //垂直分割线    recyclerView.addItemDecoration(new DividerItemDecoration(                ListRecycle.this, DividerItemDecoration.VERTICAL_LIST));

水平+垂直分割线：高度为2px，颜色为灰色

      //垂直+水平分割线      recyclerView.addItemDecoration(new DividerItemDecoration(                ListRecycle.this, DividerItemDecoration.BOTH_SET));

带颜色的分割线

    //添加带颜色分割线    recyclerView.addItemDecoration(new DividerItemDecoration(                ListRecycle.this, DividerItemDecoration.BOTH_SET,5,Color.BLUE));

自定义图片的分割线(图片必须有高度，比如说Xml文件，就可能没设置高度)：

    //添加图片分割线    recyclerView.addItemDecoration(new DividerItemDecoration(                ListRecycle.this, DividerItemDecoration.HORIZONTAL_LIST,R.mipmap.ic_launcher));

代码缺陷

错误的打开方式:

        //如果希望横竖都是图片边框，那可能要失望了        recyclerView.addItemDecoration(new DividerItemDecoration(                ListRecycle.this, DividerItemDecoration.BOTH_SET,R.mipmap.ic_launcher));

这里写图片描述

原因分析：

假如我们有两个ItemView，明显只需要写一个分割线，分割线是有宽度的，而分割线的宽度是通过调整其中一个ItemView的宽度，然后空出间隙来绘制这个分割线，从原理上来讲，其中一个ItemView会比另一个小，当分割线比较窄的时候，视觉是不易察觉的，当它过宽的时候，就开始崩了。
对于RecycleView的瀑布流的边框，表示确实有些无能为力，原因是getItemOffsets会绘制整占满屏幕的边框，假如ItemView只有半个屏幕大小，明显不合适。

解决方案推荐：

直接调整ItemView的Margin的大小，放弃使用分割线，采用之前说的Margin+Background方式。
调整代码，对onDraw绘制的位置进行微调，这里需要一个有耐心去测试修改代码的人

源码：

/** * 万能分割线 * Created by ChenSS on 2016/9/21. */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;    }}

如果还有什么不懂的，请参考网址：
http://www.2cto.com/kf/201511/450814.html
http://blog.csdn.net/fuhao476200/article/details/51488650
http://www.cnblogs.com/baiqiantao/p/5585345.html
http://blog.csdn.net/lmj623565791/article/details/45059587
http://blog.csdn.net/skykingf/article/details/50827141
http://www.jianshu.com/p/4eff036360da

0 0