前言

RecyclerView在 Android開發中非常常用，如果能結合ItemDecoration類使用，那么將大大提高RecyclerView的表現效果
本文全面解析了ItemDecoration類，包括ItemDecoration類簡介、使用方法 & 實例講解，最終結合 自定義View實現時間軸UI開發，希望你們會喜歡。

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（）可繪制的區域

通過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()繪制

即不需要考慮繪制內容被ItemView遮擋的問題，反而 ItemView會被onDrawOver（）繪制的內容遮擋

繪制時機比較：
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

3. 使用總結

我用一張圖總結RecyclerView ItemDecoration類的使用

示意圖

4. 結合自定義View的實踐應用：時間軸

Android開發中，時間軸的 UI需求非常常見，如下圖：

示意圖
本次實例將結合自定義View & RecyclerView的知識，手把手教你實現該常見 & 實用的自定義View：時間軸

具體請看文章：Android 自定義View實戰系列：時間軸

下一篇文章我將繼續結合 自定義View & RecyclerView.ItemDecoration類進行一些有趣的自定義View實例講解，感興趣的同學可以繼續關注本人運營的Wechat Public Account：
我想給你們介紹一個與眾不同的Android微信公眾號（福利回贈）
我想邀請您和我一起寫Android（福利回贈）

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

相關文章閱讀
Android開發：最全面、最易懂的Android屏幕適配解決方案
 Android事件分發機制詳解：史上最全面、最易懂
 Android開發：史上最全的Android消息推送解決方案
 Android開發：最全面、最易懂的Webview詳解
 Android開發：JSON簡介及最全面解析方法!
Android四大組件：Service服務史上最全面解析
 Android四大組件：BroadcastReceiver史上最全面解析

歡迎關注Carson_Ho的簡書！

不定期分享關于安卓開發的干貨，追求短、平、快，但卻不缺深度。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

教你玩轉 Android RecyclerView：深入解析 RecyclerView.ItemDecoration類（含實例講解）

教你玩轉 Android RecyclerView：深入解析 RecyclerView.ItemDecoration類（含實例講解）

前言

目錄

1. ItemDecoration類簡介

1.1 定義

1.2 作用

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. 使用總結

4. 結合自定義View的實踐應用：時間軸

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

歡迎關注Carson_Ho的簡書！

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

教你玩轉 Android RecyclerView：深入解析 RecyclerView.ItemDecoration類（含實例講解）

前言

目錄

1. ItemDecoration類 簡介

1.1 定義

1.2 作用

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. 使用總結

4. 結合自定義View的實踐應用：時間軸

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

歡迎關注Carson_Ho的簡書！

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

1. ItemDecoration類簡介