【笔记】ItemDecoration——网格布局GridItemDecoration

RecyclerView可以说是ListView和GridView的升级综合版，在Android5.0推出，其特点如下：

1、支持不同方向、不同排版模式，实现多种数据展示形式（包含ListView、GridView、瀑布流）；

2、装载了ViewHolder的回收机制，无需我们考虑View的复用；

3、取消了OnItemClick点击事件，需自己实现；

4、可控制Item增删动画；

5、可以设置Item的间隔样式；

它的优点很多，但也给我们带来了一定的不便，ItemDecoration用于实现Item之间的分割样式。谷歌官方提供了DividerItemDecoration方便大家对横向纵向列表进行分割线的添加，但是网格布局GridLayoutManager模式下的分割线布局依然需要自己实现，而且它的实现还是有一定复杂度，需要好好计算的。

以下实现有边框和无边框的网格布局GridItemDecoration：

1 getItemOffsets

设置每个Item的上下左右偏移，因为每行每列item个数与分割线条数都是不一样的，所以在每两个item之间都有分割线，但绘制的其实终止位置都需要计算。

1.1无边框

左右方向上，每个item内分割线占的宽度 = ( item个数 - 1 ) * 分割线宽度 / item个数

每两个item之间的分割线宽度是固定的，所有每个分割线宽度都被相邻两个item瓜分，其左右偏移计算如下：

left = 行中位置 * ( 分割线宽度 - 每个item内分割线占用的宽度 ) ；

right = 每个item内分割线占用的宽度 - left；

而上下分割线相对可以简单点，上下相邻的Item各占一半即可，第一行和最后一行不需要偏移，设置成0。

1.2 有边框

对于有边框的网状分割线，左右方向上，每个item内分割线占的宽度 = ( item个数 + 1 ) * 分割线宽度 / item个数

第一列与最后一列都需要一条完整的分割线，中间部分分割线宽度则被相邻的item瓜分，左右偏移计算如下：

left = ( 行中位置 + 1 ) * 分割线宽度 - 行中位置 * 每个item内分割线占用的宽度；

right = 每个item内分割线占用的宽度 - left；

上下偏移也是各占分割线的一半，第一行和最后一行需要有完整的分割线高度。

1.3 代码化

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
//        super.getItemOffsets(outRect, view, parent, state);
        if (mVerticalDivider == null && mHorizontalDivider == null) {
            outRect.set(0, 0, 0, 0);
            return;
        }
        //列表中item个数
        int itemCount = parent.getAdapter().getItemCount();
        //列表中位置
        int position = parent.getChildAdapterPosition(view);
        //列数
        int spanCount = getSpanCount(parent);

        //左右偏移
        //行中位置
        int indexHorizontal = position % spanCount;
        //纵向分割线宽度
        int dividerWidth = mVerticalDivider.getIntrinsicWidth();
        //有边界  itemWidth = ( 列数 + 1 ) * 分割线宽度 / 列数
        //无边界  itemWidth = ( 列数 - 1 ) * 分割线宽度 / 列数
        //每个item内分割线占用的宽度,
        // 无边框：每个item内分割线占的宽度 = ( item个数 - 1 ) * 分割线宽度 / item个数
        // 有边框：每个item内分割线占的宽度 = ( item个数 + 1 ) * 分割线宽度 / item个数
        int itemDividerWidth = (spanCount + (hasBorder ? 1 : -1)) * dividerWidth / spanCount;
        int left;
        int right;
        if (hasBorder) {
            //有边框
            // left = ( 行中位置 + 1 ) * 分割线宽度 - 行中位置 * 每个item内分割线占用的宽度
            left = (indexHorizontal + 1) * dividerWidth - indexHorizontal * itemDividerWidth;
            //right = 每个item内分割线占用的宽度 - left
            right = itemDividerWidth - left;
        } else {
            //无边框
            //left = 行中位置 * ( 分割线宽度 - 每个item内分割线占用的宽度 )
            left = indexHorizontal * (dividerWidth - itemDividerWidth);
            //right = 每个item内分割线占用的宽度 - left
            right = itemDividerWidth - left;
        }

        //上下偏移
        //横向分割线高度
        int dividerHeight = mHorizontalDivider.getIntrinsicHeight();
        int top;
        int bottom;
        if (hasBorder) {
            //有边框，最上面偏移分割线高度，最下面偏移分割线高度，其他都上下各偏移分割线一半的高度
            top = isFirstRow(position, spanCount) ? dividerHeight : (dividerHeight / 2);
            bottom = isLastRow(position, itemCount, spanCount) ? dividerHeight : (dividerHeight / 2);
        } else {
            //无边框，最上面高度偏移0，最下面高度偏移0，其他上下各偏移分割线一半高度
            top = isFirstRow(position, spanCount) ? 0 : (dividerHeight / 2);
            bottom = isLastRow(position, itemCount, spanCount) ? 0 : (dividerHeight / 2);
        }
        outRect.set(left, top, right, bottom);
    }

2 onDraw

绘制的时候，一般情况下绘制一个item的下和左分割线（之所以绘制左分割线是因为在item的layout_width=“wrap_content”时获取到每个item的右边位置就是item的右边位置而不是平分后的右边位置），只有在第一行需要再次绘制上分割线，最后一列需要绘制最右侧分割线。

2.1 绘制水平分割线

先获取每个item的上下左右位置，左边位置就是分割线的左边，右边就是左边位置加上左边位置+每个item的均分宽度：

left = mBounds.left;

right = left + itemWidth;

每个item下分割线的位置就是当前item下边位置向上移动分割线的一半高度（之前设置偏移量的时候就设置了一半的高度）：

top = mBounds.bottom - dividerHeight / 2;

bottom = top + dividerHeight;

注：第一行和最后一行需要根据有无分割线做特殊处理，是否绘制。

    /**
     * 绘制水平分割线
     */
    private void drawHorizontal(Canvas canvas, RecyclerView parent) {
        canvas.save();
        //总item数
        int itemCount = parent.getAdapter().getItemCount();
        //列数
        int spanCount = getSpanCount(parent);
        //每个item宽度
        int itemWidth = (parent.getWidth() - parent.getPaddingLeft() - parent.getPaddingRight()) / spanCount;
        //分割线高度
        int dividerHeight = mVerticalDivider.getIntrinsicHeight();
        int left;
        int right;
        int bottom;
        int top;
        int position;

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View childView = parent.getChildAt(i);
            position = parent.getChildAdapterPosition(childView);
            parent.getDecoratedBoundsWithMargins(childView, mBounds);
            //分割线左右坐标
            left = mBounds.left;
            right = left + itemWidth;
            //每个item下边分割线上边沿（getItemOffsets时每个item多空了一个分割线高度的一半）
            top = mBounds.bottom - dividerHeight / 2;
            if (isLastRow(position, itemCount, spanCount)) {
                //最后一行，有边界需要完整分割线高度，没边界减掉
                top += hasBorder ? -dividerHeight / 2 : dividerHeight / 2;
            }
            if (position >= itemCount - spanCount && !hasBorder) {
                //最后几个，且没有边框
                bottom = top;
            } else {
                bottom = top + dividerHeight;
            }
            mVerticalDivider.setBounds(left, top, right, bottom);
            mVerticalDivider.draw(canvas);

            if (isFirstRow(position, spanCount) && hasBorder) {
                //第一行且有边界，需要最上面一条
                top = mBounds.top;
                bottom = top + dividerHeight;
                mVerticalDivider.setBounds(left, top, right, bottom);
                mVerticalDivider.draw(canvas);
            }
        }
        canvas.restore();
    }

2.2 绘制垂直分割线

垂直分割线稍微麻烦点，毕竟设置偏移量的时候也是通过计算得出的。

上下位置不用说就是每个item的上下位置：

top = mBounds.top;

bottom = mBounds.bottom;

这里有些需要特殊处理，比如：
1、无边框时，item不是整行数的时候，倒数第二行最后几个下分割线不需要绘制；

2、有边框时还需要绘制最后一列边框，最后一个item又分为是否是满格的最后一个；

左右位置可以和设置偏移时候的item对应计算，是每个item的左边位置再向左移动：

    if (hasBorder) {
        //有边界
        left = mBounds.left - (itemDividerWidth - dividerWidth) * indexHorizontal;
    } else {
        left = mBounds.left - (dividerWidth - indexHorizontal * (dividerWidth - itemDividerWidth));
    }

右边位置就是左边位置+分割线宽度：

right = left + dividerWidth;

    /**
     * 绘制垂直分割线
     */
    private void drawVertical(Canvas canvas, RecyclerView parent) {
        canvas.save();
        //总item数
        int itemCount = parent.getAdapter().getItemCount();
        //列数
        int spanCount = getSpanCount(parent);
        //每个item宽度
        int itemWidth = (parent.getWidth() - parent.getPaddingLeft() - parent.getPaddingRight()) / spanCount;
        //分割线宽度
        int dividerWidth = mHorizontalDivider.getIntrinsicWidth();
        //每个item中分割线占的宽度
        int itemDividerWidth = (spanCount + (hasBorder ? 1 : -1)) * dividerWidth / spanCount;

        int top;
        int bottom;
        int right;
        int left;
        int position;

        int childCount = parent.getChildCount();
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            parent.getLayoutManager().getDecoratedBoundsWithMargins(child, mBounds);
            position = parent.getChildAdapterPosition(child);
            //分割线上下坐标
            top = mBounds.top;
            bottom = mBounds.bottom;
            if (!hasBorder) {
                //没有边界时
                if (position + spanCount == itemCount) {
                    //最后一个item上面那个
                    bottom += mVerticalDivider.getIntrinsicHeight() / 2;
                } else if ((itemCount % spanCount != 0) && (itemCount % spanCount < position % spanCount) && (position > itemCount - spanCount)) {
                    //item不是整行数时，倒数第二行最后几个的下边界线需要减去
                    bottom -= mVerticalDivider.getIntrinsicHeight() / 2;
                }
            }
            //行中位置
            int indexHorizontal = position % spanCount;
            if (hasBorder) {
                //有边界
                left = mBounds.left - (itemDividerWidth - dividerWidth) * indexHorizontal;
            } else {
                left = mBounds.left - (dividerWidth - indexHorizontal * (dividerWidth - itemDividerWidth));
            }
            right = left + dividerWidth;
            //画左边纵向分割线
            mVerticalDivider.setBounds(left, top, right, bottom);
            mVerticalDivider.draw(canvas);
            if (hasBorder && isLastColumn(position, spanCount, itemCount)) {
                //最后一列
                if ((indexHorizontal + 1) % spanCount == 0) {
                    //每行满格最后一个
                    left = parent.getWidth() - parent.getPaddingRight() - dividerWidth;
                } else {
                    //不满格的最后一个
                    left = left + itemWidth - (itemDividerWidth - dividerWidth);
                }
                right = left + dividerWidth;
                mVerticalDivider.setBounds(left, top, right, bottom);
                mVerticalDivider.draw(canvas);
            }
        }
        canvas.restore();
    }

完整代码