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

will20151115發表於2018-11-27
View

宣告：原創作品，轉載請註明出處：www.jianshu.com/p/b2654f4a6…

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

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

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

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

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

接下來，我們看一下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);
    }
}
複製程式碼

執行看下效果：

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

二、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);
    }
複製程式碼

執行效果：

RecyclerView使用指南（四）—— 使用ItemDecoration
注意：這個例子只是為了展示我們可以通過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);
    }
}
複製程式碼

執行效果：

RecyclerView使用指南（四）—— 使用ItemDecoration
請將變數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);
        }
    }
}
複製程式碼

效果：

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

總結

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

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

系列文章

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

相關文章