教你玩轉 Android RecyclerView：深入解析 RecyclerView ItemDecoration類

Carson_Ho發表於2017-06-10

AndroidView

教你玩轉 Android RecyclerView：深入解析 RecyclerView ItemDecoration類

前言

RecyclerView在 Android開發中非常常用，如果能結合ItemDecoration類使用，那麼將大大提高RecyclerView的表現效果
本文全面解析了ItemDecoration類，包括ItemDecoration類簡介、使用方法 & 例項講解，希望你們會喜歡。

ItemDecoration類屬於RecyclerView的高階用法，閱讀本文前請先學習RecyclerView的使用：Android開發：ListView、AdapterView、RecyclerView全面解析

1. ItemDecoration類簡介

1.1 定義

RecyclerView類的靜態內部類

###1.2 作用
向 RecyclerView中的 ItemView 新增裝飾

即繪製更多內容，豐富ItemView的UI效果

2. 具體使用

ItemDecoration類中僅有3個方法，具體如下：

public class TestDividerItemDecoration extends RecyclerView.ItemDecoration {

    // 方法1：getItemOffsets（）
    // 作用：設定ItemView的內嵌偏移長度（inset）
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
       ...
  }

    // 方法2：onDraw（）
    // 作用：在子檢視上設定繪製範圍，並繪製內容
    // 類似平時自定義View時寫onDraw()一樣
    // 繪製圖層在ItemView以下，所以如果繪製區域與ItemView區域相重疊，會被遮擋
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
    ...
  }

    // 方法3：onDrawOver（）
    // 作用：同樣是繪製內容，但與onDraw（）的區別是：繪製在圖層的最上層
    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
      ...
}複製程式碼

下面，我將詳細介紹這3個方法。

2.1 getItemOffsets（）

2.1.1 作用

設定ItemView的內嵌偏移長度（inset）

如圖，其實RecyclerView 中的 ItemView 外面會包裹著一個矩形（outRect）
內嵌偏移長度 是指：該矩形（outRect）與 ItemView的間隔

內嵌偏移長度分為4個方向：上、下、左、右，並由outRect 中的 top、left、right、bottom引數控制

top、left、right、bottom引數預設 = 0，即矩形和Item重疊，所以看起來矩形就消失了

2.1.2 具體使用


    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
      // 引數說明：
        // 1. outRect：全為 0 的 Rect（包括著Item）
        // 2. view：RecyclerView 中的 檢視Item
        // 3. parent：RecyclerView 本身
        // 4. state：狀態

      outRect.set(50, 0, 0,50);
      // 4個引數分別對應左（Left）、上（Top）、右（Right）、下（Bottom）
      // 上述語句代表：左&下偏移長度=50px，右 & 上 偏移長度 = 0
       ...
  }複製程式碼

2.1.3 原始碼分析

RecyclerView本質上是一個自定義ViewGroup，子檢視child = 每個ItemView
其通過 LayoutManager測量並佈局 ItemView

public void measureChild(View child, int widthUsed, int heightUsed) {

// 引數說明：
  // 1. child：要測量的子view(ItemView)
  // 2. widthUsed： 一個ItemView的所有ItemDecoration佔用的寬度(px)
  // 3. heightUsed：一個ItemView的所有ItemDecoration佔用的高度(px)

    final LayoutParams lp = (LayoutParams) child.getLayoutParams();

    final Rect insets = mRecyclerView.getItemDecorInsetsForChild(child);
    // 累加當前ItemDecoration 4個屬性值->>分析1

    widthUsed += insets.left + insets.right;
    // 計算每個ItemView的所有ItemDecoration的寬度
    heightUsed += insets.top + insets.bottom;
    // 計算每個ItemView的所有ItemDecoration的高度

    final int widthSpec = getChildMeasureSpec(getWidth(), getWidthMode(),
            getPaddingLeft() + getPaddingRight() + widthUsed, lp.width,
            canScrollHorizontally());
    // 測量child view（ItemView）的寬度
    // 第三個引數設定 child view 的 padding，即ItemView的Padding
    // 而該引數把 insets 的值算進去，所以insets 值影響了每個 ItemView 的 padding值

    // 高度同上
    final int heightSpec = getChildMeasureSpec(getHeight(), getHeightMode(),
            getPaddingTop() + getPaddingBottom() + heightUsed, lp.height,
            canScrollVertically());
    if (shouldMeasureChild(child, widthSpec, heightSpec, lp)) {
        child.measure(widthSpec, heightSpec);
    }
}

// 分析完畢，請跳出
<-- 分析1：getItemDecorInsetsForChild（）-->
Rect getItemDecorInsetsForChild(View child) {
    final LayoutParams lp = (LayoutParams) child.getLayoutParams();

    insets.set(0, 0, 0, 0);
    for (int i = 0; i < decorCount; i++) {
        mTempRect.set(0, 0, 0, 0);

        // 獲取getItemOffsets（） 中設定的值
        mItemDecorations.get(i).getItemOffsets(mTempRect, child, this, mState);
        // 將getItemOffsets（） 中設定的值新增到insets 變數中

        insets.left += mTempRect.left;
        insets.top += mTempRect.top;
        insets.right += mTempRect.right;
        insets.bottom += mTempRect.bottom;
    }
    // 最終返回
    return insets;
}

// insets介紹
  // 1. 作用：
    // a. 把每個ItemView的所有 ItemDecoration 的 getItemOffsets 中設定的值累加起來，（每個ItemView可新增多個ItemDecoration）
    // 即把每個ItemDecoration的left, top, right, bottom 4個屬性分別累加
    // b. 記錄上述結果
    // c. inset就像padding和margin一樣，會影響view的尺寸和位置

  // 2. 使用場景：設定View的邊界大小，使得其大小>View的背景大小
  // 如 按鈕圖示（View的背景）較小，但是我們希望按鈕有較大的點選熱區（View的邊界大小）

// 返回到分析1進來的原處複製程式碼

總結

結論：outRect4個屬性值影響著ItemView的Padding值
具體過程：在RecyclerView進行子View寬高測量時（measureChild（）），會將getItemOffsets（）裡設定的 outRect4個屬性值（Top、Bottom、Left、Right）通過insert值累加，並最終新增到子View的 Padding屬性中

2.2 onDraw()

2.2.1 作用

通過 Canvas 物件繪製內容

2.2.2 具體使用

使用方法類似自定義View時的onDraw（）

請看我寫的自定義View文章：自定義View Draw過程- 最易懂的自定義View原理系列（4）

@Override
    public void onDraw(Canvas c, RecyclerView parent, 
                                  RecyclerView.State state) {
      ....
      // 使用類似自定義View時的 onDraw（）

}複製程式碼

2.2.3 特別注意

注意點1：Itemdecoration的onDraw()繪製會先於ItemView的onDraw()繪製，所以如果在Itemdecoration的onDraw()中繪製的內容在ItemView邊界內，就會被ItemView遮擋住。如下圖：

此現象稱為onDraw()的 OverDraw現象

解決方案：配合前面的 getItemOffsets（） 一起使用在outRect矩形與 ItemView的間隔區域繪製內容

即：通過getItemOffsets（） 設定與 Item 的間隔區域，從而獲得與ItemView不重疊的繪製區域

注意點2： getItemOffsets() 針對是每一個 ItemView的，而 onDraw（） 針對 RecyclerView 本身

解決方案：在使用onDraw（）繪製時，需要先遍歷RecyclerView 的所有ItemView分別獲取它們的位置資訊，然後再繪製內容

此處遍歷的RecyclerView的ItemView（即Child view），並不是 Adapter 設定的每一個 item，而是可見的 item

因為只有可見的Item 才是RecyclerView的 Child view

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

    // RecyclerView 的左邊界加上 paddingLeft距離 後的座標位置
    final int left = parent.getPaddingLeft();
    // RecyclerView 的右邊界減去 paddingRight 後的座標位置
    final int right = parent.getWidth() - parent.getPaddingRight();
    // 即左右邊界就是 RecyclerView 的 ItemView區域

    // 獲取RecyclerView的Child view的個數
    final int childCount = parent.getChildCount();

    // 設定佈局引數
    final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                .getLayoutParams();

    // 遍歷每個RecyclerView的Child view
    // 分別獲取它們的位置資訊，然後再繪製內容
    for (int i = 0; i < childCount; i++) {
        final View child = parent.getChildAt(i);
        int index = parent.getChildAdapterPosition(view);
            // 第一個Item不需要繪製
            if ( index == 0 ) {
                continue;
            }
        // ItemView的下邊界：ItemView 的 bottom座標 + 距離RecyclerView底部距離 +translationY
        final int top = child.getBottom() + params.bottomMargin +
                Math.round(ViewCompat.getTranslationY(child));
        // 繪製分割線的下邊界 = ItemView的下邊界+分割線的高度
        final int bottom = top + mDivider.getIntrinsicHeight();
        mDivider.setBounds(left, top, right, bottom);
        mDivider.draw(c);
    }
}

}複製程式碼

2.2.4 應用場景

在豐富 ItemView 的顯示效果，即在ItemView 的基礎上繪製內容

如分割線等等

2.2.5 例項講解

例項說明：在ItemView設計一個高度為 10 px 的紅色分割線
思路
1. 通過getItemOffsets（）設定與 Item 的下間隔區域 = 10 px
  
  設定好onDraw（）可繪製的區域
2. 通過onDraw（）繪製一個高度 = 10px的矩形（填充顏色=紅色）

具體實現

步驟1：自定義ItemDecoration類

ItemDecoration.java

public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    private Paint mPaint;

    // 在建構函式裡進行繪製的初始化，如畫筆屬性設定等
    public DividerItemDecoration() {

        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        // 畫筆顏色設定為紅色
    }

    // 重寫getItemOffsets（）方法
    // 作用：設定矩形OutRect 與 Item 的間隔區域
    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);


        int itemPosition = parent.getChildAdapterPosition(view);
        // 獲得每個Item的位置

        // 第1個Item不繪製分割線
        if (itemPosition != 0) {
            outRect.set(0, 0, 0, 10);
            // 設定間隔區域為10px,即onDraw()可繪製的區域為10px
        }
    }

    // 重寫onDraw（）
    // 作用:在間隔區域裡繪製一個矩形，即分割線
    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDraw(c, parent, state);

        // 獲取RecyclerView的Child view的個數
        int childCount = parent.getChildCount();

        // 遍歷每個Item，分別獲取它們的位置資訊，然後再繪製對應的分割線
        for ( int i = 0; i < childCount; i++ ) {
            // 獲取每個Item的位置
            final View child = parent.getChildAt(i);
            int index = parent.getChildAdapterPosition(child);
            // 第1個Item不需要繪製
            if ( index == 0 ) {
                continue;
            }

            // 獲取佈局引數
            final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
                    .getLayoutParams();
            // 設定矩形(分割線)的寬度為10px
            final int mDivider = 10;

            // 根據子檢視的位置 & 間隔區域，設定矩形（分割線）的2個頂點座標(左上 & 右下)

            // 矩形左上頂點 = (ItemView的左邊界,ItemView的下邊界)
            // ItemView的左邊界 = RecyclerView 的左邊界 + paddingLeft距離 後的位置
            final int left = parent.getPaddingLeft();
            // ItemView的下邊界：ItemView 的 bottom座標 + 距離RecyclerView底部距離 +translationY
            final int top = child.getBottom() + params.bottomMargin +
                    Math.round(ViewCompat.getTranslationY(child));

            // 矩形右下頂點 = (ItemView的右邊界,矩形的下邊界)
            // ItemView的右邊界 = RecyclerView 的右邊界減去 paddingRight 後的座標位置
            final int right = parent.getWidth() - parent.getPaddingRight();
            // 繪製分割線的下邊界 = ItemView的下邊界+分割線的高度
            final int bottom = top + mDivider;


            // 通過Canvas繪製矩形（分割線）
            c.drawRect(left,top,right,bottom,mPaint);
        }
    }
}複製程式碼

步驟2：在設定RecyclerView時新增該分割線即可

        Rv = (RecyclerView) findViewById(R.id.my_recycler_view);
        //使用線性佈局
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        Rv.setLayoutManager(layoutManager);
        Rv.setHasFixedSize(true);

        // 通過自定義分割線類 新增分割線
        Rv.addItemDecoration(new DividerItemDecoration());

        //為ListView繫結介面卡
        myAdapter = new MyAdapter(this,listItem);
        Rv.setAdapter(myAdapter);
        myAdapter.setOnItemClickListener(this);複製程式碼

2.2.6 結果展示

2.2.7 原始碼地址

Carson_Ho的Github地址：RecyclerView_ItemDecoration

2.3 onDrawOver（）

2.3.1 作用

與onDraw（）類似，都是繪製內容
但與onDraw（）的區別是：Itemdecoration的onDrawOver（）繪製是後於 ItemView的onDraw()繪製
1. 即不需要考慮繪製內容被ItemView遮擋的問題，反而 ItemView會被onDrawOver（）繪製的內容遮擋
2. 繪製時機比較：
  Itemdecoration.onDraw（）> ItemView.onDraw() > Itemdecoration.onDrawOver（）

2.3.2 具體使用

使用方法類似自定義View時的onDraw（）

請看我寫的自定義View文章：自定義View Draw過程- 最易懂的自定義View原理系列（4）

@Override
    public void onDrawOver(Canvas c, RecyclerView parent, 
                                  RecyclerView.State state) {
      ....
      // 使用類似自定義View時的 onDraw（）

}複製程式碼

2.3.3 應用場景

在 RecyclerView / 特定的 ItemView 上繪製內容，如蒙層、重疊內容等等

2.3.4 例項講解

例項說明：在 RecyclerView 上每個 ItemView 上疊加一個角標

具體程式碼實現

步驟1：自定義 ItemDecoration類

public class DividerItemDecoration extends RecyclerView.ItemDecoration {
    private Paint mPaint;
    private Bitmap mIcon;

    // 在建構函式裡進行繪製的初始化，如畫筆屬性設定等
    public DividerItemDecoration(Context context) {

        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        // 畫筆顏色設定為紅色

        // 獲取圖片資源
        mIcon = BitmapFactory.decodeResource(context.getResources(), R.mipmap.logo);
    }

    // 重寫onDrawOver（）
    // 將角度繪製到ItemView上
    @Override
    public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
        super.onDrawOver(c, parent, state);

        // 獲取Item的總數
        int childCount = parent.getChildCount();
        // 遍歷Item
        for ( int i = 0; i < childCount; i++ ) {
            // 獲取每個Item的位置
            View view = parent.getChildAt(i);
            int index = parent.getChildAdapterPosition(view);

            // 設定繪製內容的座標(ItemView的左邊界,ItemView的上邊界)
            // ItemView的左邊界 = RecyclerView 的左邊界 = paddingLeft距離 後的位置
            final int left = parent.getWidth()/2;
            // ItemView的上邊界
            float top = view.getTop();

            // 第1個ItemView不繪製
            if ( index == 0 ) {
                continue;
            }
                // 通過Canvas繪製角標
                c.drawBitmap(mIcon,left,top,mPaint);
        }
    }

}複製程式碼

步驟2：在設定RecyclerView時新增即可

  Rv = (RecyclerView) findViewById(R.id.my_recycler_view);
        //使用線性佈局
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        Rv.setLayoutManager(layoutManager);
        Rv.setHasFixedSize(true);

        //用自定義分割線類設定分割線
        Rv.addItemDecoration(new DividerItemDecoration());

        //為ListView繫結介面卡
        myAdapter = new MyAdapter(this,listItem);
        Rv.setAdapter(myAdapter);
        myAdapter.setOnItemClickListener(this);複製程式碼

2.3.5 結果展示

2.3.6 原始碼地址

Carson_Ho的Github地址：RecyclerView_ItemDecoration

有一個非常使用的自定義View是基於RecyclerView ItemDecoration類的，具體請看文章Android 自定義View實戰系列：時間軸

3. 總結

我用一張圖總結RecyclerView ItemDecoration類的使用
示意圖
下一篇文章我將對講解Android 的相關知識，有興趣可以繼續關注Carson_Ho的安卓開發筆記

請點贊！因為你的鼓勵是我寫作的最大動力！

RecyclerView.ItemDecoration
2016-08-15
View
RecyclerView之ItemDecoration
2017-05-03
View
【Android進階】RecyclerView之ItemDecoration（一）
2019-03-07
AndroidView
玩轉RecyclerView
2018-01-08
View
RecyclerView 知識梳理(4) ItemDecoration
2017-12-21
View
自定義View 之 RecyclerView.ItemDecoration
2019-03-02
View
RecyclerView使用指南（四）—— 使用ItemDecoration
2018-11-27
View
RecyclerView定製：通用ItemDecoration及全展開RecyclerView的實現
2019-02-28
View
關於RecyclerView.ItemDecoration的自定義
2019-01-30
View
RecyclerView原始碼解析
2019-07-23
View原始碼
Android中的RecyclerView
2020-03-09
AndroidView
Android RecyclerView詳解
2018-01-09
AndroidView
Android RecyclerView的使用
2016-03-11
AndroidView
Android RecyclerView-使用Itemdecoration實現粘性頭部功能,詳細到具體步驟.
2018-02-01
AndroidView
值得深入學習的控制元件-RecyclerView（原始碼解析篇）
2021-09-09
控制元件View原始碼
ItemDecoration深入解析與實戰（一）
2018-11-29
RecyclerView
2018-01-11
View
RecyclerView用法和原始碼深度解析
2019-02-18
View原始碼
Android中使用RecyclerView + SnapHelper實現類似ViewPager效果
2017-03-30
AndroidViewpager
RecyclerView 原始碼深入解析——繪製流程、快取機制、動畫等
2018-11-10
View原始碼快取動畫
手把手教你實現Android RecyclerView上拉載入功能
2017-04-13
AndroidView
[轉]Android輕鬆實現RecyclerView懸浮條
2019-01-04
AndroidView
Android TV開發——RecyclerView For TV
2018-07-19
AndroidView
RecyclerView使用
2019-04-08
View
RecyclerView系列
2017-12-13
View
RecyclerView Adapter 系列（1）：RecyclerView Array Adapter
2015-10-22
ViewAPT
RecyclerView Adapters 系列（2）：RecyclerView Cursor Adapter
2015-11-06
ViewAPT
Android RecyclerView中Adapter和ViewHo
2021-09-09
AndroidViewAPT
Android RecyclerView的簡便寫法
2018-01-04
AndroidView
Android RecyclerView 簡介與例項
2016-03-05
AndroidView
RecyclerView 原始碼分析（一） —— 繪製流程解析
2021-01-17
View原始碼
（轉） Android 優雅的為RecyclerView新增HeaderView和FooterView
2016-07-20
AndroidViewHeader
安卓RecyclerView的使用以及抽取基類
2017-06-28
安卓View
RecyclerView總結
2017-04-13
View
RecyclerView的使用
2017-12-13
View
Android中RecyclerView用法，一步一步教你如何使用RecyclerView以及帶你走過編碼中可能會出現的坑~
2020-08-24
AndroidView
ItemDecoration深入解析與實戰（一）——原始碼分析
2019-02-22
原始碼
【Android進階】RecyclerView之快取（二）
2019-03-12
AndroidView快取

教你玩轉 Android RecyclerView：深入解析 RecyclerView ItemDecoration類

前言

目錄

1. ItemDecoration類簡介

1.1 定義

2. 具體使用

2.1 getItemOffsets（）

2.1.1 作用

2.1.2 具體使用

2.1.3 原始碼分析

總結

2.2 onDraw()

2.2.1 作用

2.2.2 具體使用

2.2.3 特別注意

2.2.4 應用場景

2.2.5 例項講解

2.2.6 結果展示

2.2.7 原始碼地址

2.3 onDrawOver（）

2.3.1 作用

2.3.2 具體使用

2.3.3 應用場景

2.3.4 例項講解

2.3.5 結果展示

2.3.6 原始碼地址

3. 總結

請點贊！因為你的鼓勵是我寫作的最大動力！

相關文章

教你玩轉 Android RecyclerView：深入解析 RecyclerView ItemDecoration類

前言

目錄

1. ItemDecoration類 簡介

1.1 定義

2. 具體使用

2.1 getItemOffsets（）

2.1.1 作用

2.1.2 具體使用

2.1.3 原始碼分析

總結

2.2 onDraw()

2.2.1 作用

2.2.2 具體使用

2.2.3 特別注意

2.2.4 應用場景

2.2.5 例項講解

2.2.6 結果展示

2.2.7 原始碼地址

2.3 onDrawOver（）

2.3.1 作用

2.3.2 具體使用

2.3.3 應用場景

2.3.4 例項講解

2.3.5 結果展示

2.3.6 原始碼地址

3. 總結

請點贊！因為你的鼓勵是我寫作的最大動力！

相關文章

1. ItemDecoration類簡介