RecyclerView使用指南（四）—— 使用ItemDecoration

聲明：原創作品，轉載請註明出處：https://www.jianshu.com/p/b2654f4a63a2

這次我將對RecyclerView的ItemDecoration類進行講解。
ItemDecoration是RecyclerView類中的一個內部抽象類，我們可以通過繼承這個類並將它設置給RecyclerView來裝飾我們的條目。

在講解之前，我們先做一些準備工作：

1. 將RecyclerView顯示出來，並把它的條目背景色設爲綠色。
2. 寫一個DemoItemDecoration類，繼承ItemDecoration類。
3. 給RecyclerView添加DemoItemDecoration。
4. 改一下Activity的佈局，加個背景。

OK，我們實現了這個效果：

接下來，我們看一下ItemDecoration類，在這個類中，我們可以重寫的方法有3個，分別是getItemOffsets()，onDraw()以及onDrawOver()方法。我們嘗試一下，看看它們都有什麼作用。

一、getItemOffsets()

這個方法本身有4個參數，起到主要作用的是outRect，我們可以通過設置outRect參數的屬性值（left、top、right、bottom），來改變整個條目的偏移量。
看下例子：

public class DemoItemDecoration extends RecyclerView.ItemDecoration {
    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.left = 40;
        outRect.right = 40;
        //第一個條目，我們不給它設置上邊距
        if (parent.getChildAdapterPosition(view) != 0) {
            outRect.top = 40;
        }
    }

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

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

運行看下效果：

其實，這時候我們每個條目所對應的區域已經變成非透明的區域了。（這裏你不理解也沒關係，請繼續往下看）

二、onDraw()

通過重寫這個方法，我們可以更改item圖層下面的圖層，emmm....
我們給RecyclerView更換一個背景吧，這樣你可能更能理解上一句話的意思。
上代碼：

@Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
        Bitmap pic = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.j);
        c.drawBitmap(pic, parent.getLeft(), parent.getTop(), mPaint);
    }

運行效果：

注意：這個例子只是爲了展示我們可以通過onDraw方法改變item圖層下面的圖層，請不要在開發中這樣做。

我們來一個常規一點的例子，比如：給我們的條目加上分割線。代碼如下：

public class DemoItemDecoration extends RecyclerView.ItemDecoration {
    private int mDividerHeight = 40;
    private Paint mPaint;

    public DemoItemDecoration() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.YELLOW);
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.left = 40;
        outRect.right = 40;
        //第一個條目，我們不給它設置上邊距
        if (parent.getChildAdapterPosition(view) != 0) {
            outRect.top = mDividerHeight;
        }
    }

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
        int childCount= parent.getChildCount();
        //遍歷RecyclerView的所有子view
        for (int i = 0; i < childCount; i++) {
            //看看子view是否是列表中的條目，如果是的話，我們獲取它的位置
            View view = parent.getChildAt(i);
            int position = parent.getChildAdapterPosition(view);
            //因爲第一個條目我們沒有設置上邊距，所以我們在畫圖的時候也要排除掉它
            if (position != 0) {
                float dividerTop = view.getTop() - mDividerHeight;
                float dividerLeft = parent.getLeft();
                float dividerBottom = view.getTop();
                float dividerRight = parent.getWidth();
                c.drawRect(dividerLeft, dividerTop, dividerRight, dividerBottom, mPaint);
            }
        }
    }

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

運行效果：

請將變量dividerLeft賦值爲view.getLeft()試試，你就會理解爲什麼我說“其實，這時候我們每個條目所對應的區域已經變成非透明的區域了。”這句話了。
再給RecyclerView設一個左側內邊距，將變量dividerLeft賦值爲parent.getPaddingLeft()試試。

三、onDrawOver()

通過onDraw()方法的運行效果，我們發現它畫出來的圖案是位於item底部的，而onDrawOver()這個方法繪製的圖案是位於item上層的。我們先寫個示例代碼：

public class DemoItemDecoration extends RecyclerView.ItemDecoration {
    private int mDividerHeight = 40;
    private Paint mPaint;

    public DemoItemDecoration() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.YELLOW);
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
        outRect.left = 40;
        outRect.right = 40;
        //第一個條目，我們不給它設置上邊距
        if (parent.getChildAdapterPosition(view) != 0) {
            outRect.top = mDividerHeight;
        }
    }

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

    @Override
    public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDrawOver(c, parent, state);
        int childCount = parent.getChildCount();
        //遍歷RecyclerView的所有子view
        for (int i = 0; i < childCount; i++) {
            //看看子view是否是列表中的條目，如果是的話，我們獲取它的位置
            View view = parent.getChildAt(i);
            float dividerTop = view.getTop() + 40;
            float dividerLeft = view.getLeft();
            float dividerBottom = view.getTop() + 60;
            float dividerRight = parent.getWidth();
            c.drawRect(dividerLeft, dividerTop, dividerRight, dividerBottom, mPaint);
        }
    }
}

效果：

總結

好了，這一篇講了如何使用ItemDecoration，我們再重新捋一捋：

1. 寫一個類繼承ItemDecoration。
2. 按需求重寫getItemOffsets()，onDraw()以及onDrawOver()方法。
3. 爲RecyclerView添加ItemDecoration。

系列文章

《RecyclerView使用指南（一）—— 基本使用》
《RecyclerView使用指南（二）—— 多種ItemLayout》
《RecyclerView使用指南（三）—— 添加分割線和點擊事件》
《RecyclerView使用指南（四）—— 使用ItemDecoration》
《RecyclerView使用指南（五）—— 實現吸頂效果》