RecyclerView添加自定义ItemDecoration实现(1)

对于RecyclerView的使用想必大家都很熟悉,下面先看两张LinearLayoutManager和GridLayoutManager的示例

LinearLayoutManager_GridLayoutManager.png

上面展示的是没有分割线的示例，一般情况下我们是通过继承RecyclerView.ItemDecoration类并重写 getItemOffsets 与 onDraw 来实现自定义分割线。

代码:

 public class CommonDecoration extends RecyclerView.ItemDecoration {
     public CommonDecoration() {

     }
    
    /**
     * @param outRect 用于规定分割线的范围
     * @param view    进行分割线操作的子view
     * @param parent  父view
     * @param state   (这里暂时不使用)
     */
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent,    RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
    }

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

SquareTextView.java

public class SquareTextView extends AppCompatTextView {
    public SquareTextView(Context context) {
        super(context);
    }

    public SquareTextView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int size = MeasureSpec.getSize(widthMeasureSpec);
        setMeasuredDimension(size, size);
    }
}

item_grid.xml

<?xml version="1.0" encoding="utf-8"?>
<com.zzz.recyclerviewdemo.view.SquareTextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv_letter"
    android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_red_light"
    android:gravity="center"
    android:text="A"
    android:textColor="@android:color/white"
    android:textSize="20dp" />

item_linear.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tv_letter"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="@android:color/holo_red_light"
    android:gravity="center"
    android:text="A"
    android:textColor="@android:color/white"
    android:textSize="20dp" />

分割线使用:

mRecyclerView.addItemDecoration(new CommonDecoration(this, R.drawable.drawable_item_decoration));

LinearLayoutManager实现分割线

drawable_itemdecoration.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!--用于设置分割线的宽-->
    <size android:width="5dp" />
    <solid android:color="@android:color/holo_orange_dark" />
</shape>

代码：

public class CommonDecoration extends RecyclerView.ItemDecoration {

    private Context mContext;
    private Drawable mDrawable;
    
    public CommonDecoration(Context context, int drawableId) {
        this.mContext = context;
        this.mDrawable = ContextCompat.getDrawable(this.mContext, drawableId);
    }
    
    /**
     * @param outRect 用于规定分割线的范围
     * @param view    进行分割线操作的子view
     * @param parent  父view
     * @param state   (这里暂时不使用)
     */
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        outRect.bottom = mDrawable.getIntrinsicHeight();
    }
    
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        for (int i = 0; i < parent.getChildCount(); i++) {
            drawHorizontalDecoration(c, parent.getChildAt(i));
        }
    }
    
    private void drawHorizontalDecoration(Canvas canvas, View childView) {
        Rect rect = new Rect(0, 0, 0, 0);
        rect.top = childView.getBottom();
        rect.bottom = rect.top + mDrawable.getIntrinsicHeight();
        rect.left = childView.getLeft();
        rect.right = childView.getRight();
        mDrawable.setBounds(rect);
        mDrawable.draw(canvas);
    }
}

简单的分割线的截图

linearLayoutManager_without_isLastRow.png

问题:很明显可以看出在最后一个Item("Z")也出现了分割线，即对于显示LinearLayoutManager的最后一个子view的时候不应该存在分割线。

解决:在getItemOffsets方法中进行判断是否为最后一行，使用(currentItemPosition + 1) 与 totalItems比较(currentItemPosition从0开始计数)。如果是最后一行就不给其留出空间，即让outRect.bottom = 0。

代码：

public class CommonDecoration extends RecyclerView.ItemDecoration {

    private Context mContext;
    private Drawable mDrawable;
    //
    private int mTotalItems;//总Item数

    public CommonDecoration(Context context, int drawableId) {
        this.mContext = context;
        this.mDrawable = ContextCompat.getDrawable(this.mContext, drawableId);
    }

    /**
     * @param outRect 用于规定分割线的范围
     * @param view    进行分割线操作的子view
     * @param parent  父view
     * @param state   (这里暂时不使用)
     */
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (0 == mTotalItems)
            mTotalItems = parent.getAdapter().getItemCount();
        //在源码中有一个过时的方法，里面有获取当前ItemPosition
        int currentItemPosition = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition();
        if (!isLastRow(currentItemPosition, mTotalItems))
            outRect.bottom = mDrawable.getIntrinsicWidth();
        else
            outRect.bottom = 0;
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        for (int i = 0; i < parent.getChildCount(); i++) {
            drawHorizontalDecoration(c, parent.getChildAt(i));
        }
    }

    private void drawHorizontalDecoration(Canvas canvas, View childView) {
        Rect rect = new Rect(0, 0, 0, 0);
        rect.top = childView.getBottom();
        rect.bottom = rect.top + mDrawable.getIntrinsicWidth();
        rect.left = childView.getLeft();
        rect.right = childView.getRight();
        mDrawable.setBounds(rect);
        mDrawable.draw(canvas);
    }

    private boolean isLastRow(int currentItemPosition, int totalItems) {
        boolean result = false;
        if (currentItemPosition + 1 >= totalItems)
            result = true;
        return result;
    }
}

解决问题后的截图

linearLayoutManager_with_isLastRow.png

问题:对比两张图可以看出如果子view的数量充满整个屏幕的话是可以不显示分割线的，但是如果子view的数量无法充满整个屏幕的话，分割线又出现了。

解决:上一步我们只更改了getItemOffsets方法中如果是最后一行不给出画分割线的空间，但是如果子view的数量不够的话还是存在画分割线的空间。所以我们还要修改drawHorizontalDecoration方法，在该方法中同样判断是否为最后一行。

代码：

 private void drawHorizontalDecoration(Canvas canvas, View childView) {
    int currentItemPosition = ((RecyclerView.LayoutParams) childView.getLayoutParams()).getViewLayoutPosition();
    if (isLastRow(currentItemPosition, mTotalItems)) {
        return;
    }
    //
    Rect rect = new Rect(0, 0, 0, 0);
    rect.top = childView.getBottom();
    rect.bottom = rect.top + mDrawable.getIntrinsicWidth();
    rect.left = childView.getLeft();
    rect.right = childView.getRight();
    mDrawable.setBounds(rect);
    mDrawable.draw(canvas);
}

解决问题后的截图

linearLayoutManager_with_isLastRow_plus.png

GridLayoutManager实现分割线

使用LinearLayoutManager的Decoration截图

GridLayoutManager_use_LinearLayoutManager_decoration.png

问题:可以看出使用了LinearLayoutManager的话只有view的下部分存在分割线，而且它最后一行存在一些问题，我们只去掉了最后一个子view的分割线，而不是一行的分割线。

解决:

最后一行分割线的问题，所以需要更改 isLastRow 方法。从下示例图中可以看出最后一行跟RecyclerView的列数有关。所以只要判断(currentItemPosition + 1) > （(行数 - 1) x 列数）即可。这样也不会对LinearLayoutManger产生影响。
因为除了View在下部要有分割线，在子view右部也要有，所以必须设置outRect.right，为右部留出画分割线的空间。

statement.png

代码:

public class CommonDecoration extends RecyclerView.ItemDecoration {

    private Context mContext;
    private Drawable mDrawable;
    //
    private int mTotalItems;//总Item数
    private int mSpanCount;//总列数

    public CommonDecoration(Context context, int drawableId) {
        this.mContext = context;
        this.mDrawable = ContextCompat.getDrawable(this.mContext, drawableId);
    }

    /**
     * @param outRect 用于规定分割线的范围
     * @param view    进行分割线操作的子view
     * @param parent  父view
     * @param state   (这里暂时不使用)
     */
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (0 == mTotalItems)
            mTotalItems = parent.getAdapter().getItemCount();
        if (0 == mSpanCount) {
            RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
            //判断是否为GridLayoutManager
            if (layoutManager instanceof GridLayoutManager) {
                GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
                mSpanCount = gridLayoutManager.getSpanCount();
            } else {
                mSpanCount = 1;
            }
        }
        //在源码中有一个过时的方法，里面有获取当前ItemPosition
        int currentItemPosition = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition();
        //
        if (!isLastRow(currentItemPosition, mTotalItems, mSpanCount))
            outRect.bottom = mDrawable.getIntrinsicWidth();
        else
            outRect.bottom = 0;
        //
        outRect.right = mDrawable.getIntrinsicWidth();
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        for (int i = 0; i < parent.getChildCount(); i++) {
            drawHorizontalDecoration(c, parent.getChildAt(i));
            drawVerticalDecoration(c, parent.getChildAt(i));
        }
    }

    private void drawHorizontalDecoration(Canvas canvas, View childView) {
        int currentItemPosition = ((RecyclerView.LayoutParams) childView.getLayoutParams()).getViewLayoutPosition();
        if (isLastRow(currentItemPosition, mTotalItems, mSpanCount)) {
               return;
        }
        //
        Rect rect = new Rect(0, 0, 0, 0);

        rect.top = childView.getBottom();
        rect.bottom = rect.top + mDrawable.getIntrinsicWidth();
        rect.left = childView.getLeft();
        rect.right = childView.getRight();

        mDrawable.setBounds(rect);
        mDrawable.draw(canvas);
    }

    private void drawVerticalDecoration(Canvas canvas, View childView) {
        Rect rect = new Rect(0, 0, 0, 0);

        rect.top = childView.getTop();
        rect.bottom = childView.getBottom();
        rect.left = childView.getRight();
        rect.right = rect.left + mDrawable.getIntrinsicWidth();

        mDrawable.setBounds(rect);
        mDrawable.draw(canvas);
    }

    private boolean isLastRow(int currentItemPosition, int totalItems, int spanCount) {
        boolean result = false;
        int rowCount = 0;

        if (0 == totalItems % spanCount) {
            rowCount = totalItems / spanCount;
        } else {
            rowCount = totalItems / spanCount + 1;
        }
        if ((currentItemPosition + 1) > (rowCount - 1) * spanCount)
            result = true;

        return result;
    }
}

解决问题后截图

GridLayoutManager_use_LinearLayoutManager_solve.png

问题: 从图中可以看出在水平与垂直方向相接处的分割线没有颜色填充；并且最后一列的的子view不应该有垂直方向的分割线。

解决:

在 drawHorizontalDecoration 方法中的 rect.right 添加上分割线的宽度。
添加一个方法判断是否为最后一列使用(currentItemPosition + 1) % 3是否等于0来判断，如果是最后一列的话，则不留出画垂直方向分割线的空间。

代码:

public class CommonDecoration extends RecyclerView.ItemDecoration {

    private Context mContext;
    private Drawable mDrawable;
    //
    private int mTotalItems;//总Item数
    private int mSpanCount;//总列数

    public CommonDecoration(Context context, int drawableId) {
        this.mContext = context;
        this.mDrawable = ContextCompat.getDrawable(this.mContext, drawableId);
    }

    /**
     * @param outRect 用于规定分割线的范围
     * @param view    进行分割线操作的子view
     * @param parent  父view
     * @param state   (这里暂时不使用)
     */
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        if (0 == mTotalItems)
            mTotalItems = parent.getAdapter().getItemCount();
        if (0 == mSpanCount) {
            RecyclerView.LayoutManager layoutManager = parent.getLayoutManager();
            //判断是否为GridLayoutManager
            if (layoutManager instanceof GridLayoutManager) {
                GridLayoutManager gridLayoutManager = (GridLayoutManager) layoutManager;
                mSpanCount = gridLayoutManager.getSpanCount();
            } else {
                mSpanCount = 1;
            }
        }
        //在源码中有一个过时的方法，里面有获取当前ItemPosition
        int currentItemPosition = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition();
        //
        if (!isLastRow(currentItemPosition, mTotalItems, mSpanCount))
            outRect.bottom = mDrawable.getIntrinsicWidth();
        else
            outRect.bottom = 0;
        //
        if (!isLastColumn(currentItemPosition, mSpanCount)) {
            outRect.right = mDrawable.getIntrinsicWidth();
        } else {
            outRect.right = 0;
        }

    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        for (int i = 0; i < parent.getChildCount(); i++) {
            drawHorizontalDecoration(c, parent.getChildAt(i));
            drawVerticalDecoration(c, parent.getChildAt(i));
        }
    }

    private void drawHorizontalDecoration(Canvas canvas, View childView) {
        int currentItemPosition = ((RecyclerView.LayoutParams) childView.getLayoutParams()).getViewLayoutPosition();
        if (isLastRow(currentItemPosition, mTotalItems, mSpanCount)) {
            return;
        }
        //
        Rect rect = new Rect(0, 0, 0, 0);

        rect.top = childView.getBottom();
        rect.bottom = rect.top + mDrawable.getIntrinsicWidth();
        rect.left = childView.getLeft();
        rect.right = childView.getRight() + mDrawable.getIntrinsicWidth();

        mDrawable.setBounds(rect);
        mDrawable.draw(canvas);
    }

    private void drawVerticalDecoration(Canvas canvas, View childView) {
        Rect rect = new Rect(0, 0, 0, 0);

        rect.top = childView.getTop();
        rect.bottom = childView.getBottom();
        rect.left = childView.getRight();
        rect.right = rect.left + mDrawable.getIntrinsicWidth();

        mDrawable.setBounds(rect);
        mDrawable.draw(canvas);
    }

    private boolean isLastRow(int currentItemPosition, int totalItems, int spanCount) {
        boolean result = false;
        int rowCount = 0;

        if (0 == totalItems % spanCount) {
            rowCount = totalItems / spanCount;
        } else {
            rowCount = totalItems / spanCount + 1;
        }
        if ((currentItemPosition + 1) > (rowCount - 1) * spanCount)
            result = true;

        return result;
    }

    private boolean isLastColumn(int currentItemPosition, int spanCount) {
        boolean result = false;
        if (0 == (currentItemPosition + 1) % spanCount)
            result = true;
        return result;
    }
}

解决问题后截图:

final.png

下一次将会从源码的角度，进一步分析当前存在的BUG。
RecyclerView添加自定义ItemDecoration实现(2)

最后编辑于：2018.02.08 23:01:58

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,456评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,370评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,337评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,583评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,596评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,572评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,936评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,595评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,850评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,601评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,685评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,371评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,951评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,934评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,167评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,636评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,411评论 2赞 342

RecyclerView添加自定义ItemDecoration实现(1)

LinearLayoutManager实现分割线

GridLayoutManager实现分割线

推荐阅读更多精彩内容