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

前言

  • RecyclerView在 Android開發中非常常用，如果能結合ItemDecoration類使用，那么將大大提高RecyclerView的表現效果
  • 本文全面解析了ItemDecoration類，包括ItemDecoration類簡介、使用方法 & 實例講解，最終結合 自定義View實現 時間軸UI開發，希望你們會喜歡。
  1. ItemDecoration類屬于RecyclerView的高級用法
  2. 閱讀本文前請先學習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分別獲取它們的位置信息，然后再繪制內容

  1. 此處遍歷的RecyclerView的ItemView（即Child view），并不是 Adapter 設置的每一個 item，而是可見的 item
  2. 因為只有可見的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（）可繪制的區域

  1. 通過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

3. 使用總結

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

示意圖

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

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

    示意圖

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

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

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

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

歡迎關注Carson_Ho的簡書！

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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 227,283評論 6贊 530
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 97,947評論 3贊 413
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
    開封第一講書人閱讀 175,094評論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,485評論 1贊 308
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,268評論 6贊 405
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 54,817評論 1贊 321
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 42,906評論 3贊 440
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,039評論 0贊 285
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,551評論 1贊 331
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,502評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,662評論 1贊 366
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,188評論 5贊 356
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 43,907評論 3贊 345
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,304評論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,563評論 1贊 281
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,255評論 3贊 389
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,637評論 2贊 370

推薦閱讀更多精彩內容