【Android進階】RecyclerView之ItemDecoration（一）

歡子發表於2019-03-07

前言

RecyclerView 對大家來說，基本使用應該已經比較熟悉，這裡就直接跳過，說說ItemDecoration，也算是溫故而知新。

什麼是`ItemDecoration`

從字面意思來說，就是裝飾，裝飾RecyclerView 。這個怎麼理解？舉幾個例子就明白了。比如說，RecyclerView 如果要加間隔線應該如何做？這裡就要用到ItemDecoration

 DividerItemDecoration mDivider = new DividerItemDecoration(this, DividerItemDecoration.VERTICAL);
 rvDemo.addItemDecoration(mDivider);
複製程式碼

DividerItemDecoration 繼承於ItemDecoration

public class DividerItemDecoration extends ItemDecoration {}
複製程式碼

如何寫出比較炫酷的效果？

這裡就涉及到自定義ItemDecoration

自定義 ItemDecoration，主要涉及到3個方法

1.getItemOffsets

public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, 
@NonNull RecyclerView parent, @NonNull RecyclerView.State state) {}
複製程式碼

其中，outRect為該item在上下左右撐開的距離，預設為 0；view為item；parent為RecyclerView本身；state為RecyclerView狀態，也可以通過其在各元件之間傳遞引數，這裡暫時涉及不到。

舉個例子

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ff0000"
    tools:context=".deco.DecoActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_demo"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>
複製程式碼

定義一個DemoAdapter，這裡使用的是 BaseRecyclerViewAdapterHelper

public class DemoAdapter extends BaseQuickAdapter<String, BaseViewHolder> {


    public DemoAdapter(@Nullable List<String> data) {
        super(R.layout.item_demo, data);
    }

    @Override
    protected void convert(BaseViewHolder helper, String item) {
        helper.setText(R.id.tv_demo, item);
    }
}
複製程式碼

然後組裝資料，新增ItemDecoration

         List<String> list = new ArrayList<>();

        for (int i = 0; i < 100; i++) {
            list.add("第" + i + "個item");
        }

        DemoAdapter demoAdapter = new DemoAdapter(list);
        rvDemo.setLayoutManager(new LinearLayoutManager(this));
        rvDemo.addItemDecoration(new DemoDecoration());
        rvDemo.setAdapter(demoAdapter);
複製程式碼

DemoDecoration#getItemOffsets

          @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            //outRect就是表示在item的上下左右所撐開的距離,預設值為0
            outRect.set(10, 20, 30, 40);
      }
複製程式碼

可以看到，每個item都會執行getItemOffsets方法，所以，我們可以用這個，為RecyclerView新增間隔線。比如設定bottom為1，這裡就不演示了，有興趣的同學可以自己試試。

2.onDraw

 public void onDraw(@NonNull Canvas c, @NonNull RecyclerView
                parent, @NonNull RecyclerView.State state) {}
複製程式碼

其中，c為getItemOffsets所撐開區域的畫布，可以在區域內任意繪圖，區域外的話，會被item所遮擋。

舉個例子，

        @Override
        public void onDraw(@NonNull Canvas c, @NonNull RecyclerView
                parent, @NonNull RecyclerView.State state) {
            super.onDraw(c, parent, state);
            //getItemOffsets撐開的空白區域所對應的畫布,可以在getItemOffsets所撐出來的區域任意繪圖。

          c.drawCircle(50, 50, 30, mPaint);
      }

       @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            //outRect就是表示在item的上下左右所撐開的距離,預設值為0
          outRect.set(100, 0, 0, 5);
}
複製程式碼

效果圖如下

可以看到，onDraw方法只會執行一次，如果要每個item 前都繪製一個圓，怎麼寫？

         @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
             int itemCount = parent.getChildCount();

            for (int i = 0; i < itemCount; i++) {
                    View child = parent.getChildAt(i);
                    int cx = child.getWidth() / 2;
                    int cy = child.getTop() + child.getHeight() / 2;
                    c.drawCircle(cx, cy, 30, mPaint);
                }
            }
}
複製程式碼

效果圖如下

結合這2個方法，我們是不是可以做個分組效果？先看效果圖


 public DemoDecoration() {
            mPaint = new Paint();
            mPaint.setColor(Color.GREEN);
            mPaint.setTextSize(DensityUtils.dp2px(DecoActivity.this, 16));
        }
  @Override
        public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            //outRect就是表示在item的上下左右所撐開的距離,預設值為0

            int index = parent.getChildAdapterPosition(view);
            if (index % 3 == 0) {
                outRect.set(0, 100, 0, 5);
            } else {
                outRect.set(0, 0, 0, 5);
            }
        }
        @Override
        public void onDraw(@NonNull Canvas c, @NonNull RecyclerView
                parent, @NonNull RecyclerView.State state) {
            super.onDraw(c, parent, state);
            //getItemOffsets撐開的空白區域所對應的畫布,可以在getItemOffsets所撐出來的區域任意繪圖。
            int itemCount = parent.getChildCount();
            for (int i = 0; i < itemCount; i++) {
                View child = parent.getChildAt(i);
                int cx = child.getWidth() / 2 - 50;
                int cy = child.getTop() - 50 + DensityUtils.dp2px(DecoActivity.this, 16) / 2;
                int index = parent.getChildAdapterPosition(child);
                if (index % 3 == 0) {
                    String text = "第" + index / 3 + "組";
                    c.drawText(text, 0, text.length(), cx, cy, mPaint);
                }
            }

        }
複製程式碼

當然，分組的標題位置算的不太準備，這裡只是展示下效果。比較理想的效果，可以參考【Android檢視效果】分組列表實現吸頂效果

3.onDrawOver

public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {}
複製程式碼

onDrawOver和onDraw類似，也只會執行一次，並且它是最後繪製的，可以繪製到item上面。

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

            int itemCount = parent.getChildCount();
            for (int i = 0; i < itemCount; i++) {
                View child = parent.getChildAt(i);
                int cx = child.getWidth() / 2;
                int cy = child.getTop() + child.getHeight()/2 ;
                c.drawCircle(cx, cy, 30, mPaint);
            }

        }
複製程式碼

效果圖如下

這個方法又可以做什麼效果呢？先看效果圖

可以看到，列表的最上邊有一個漸隱效果。完整程式碼如下

public class TransDecoration extends RecyclerView.ItemDecoration {
    private Paint mPaint;
    private Xfermode xfermode;
    private LinearGradient linearGradient;
    private int layerId;

    public TransDecoration() {
        mPaint = new Paint();
        xfermode = new PorterDuffXfermode(PorterDuff.Mode.DST_IN);
        linearGradient = new LinearGradient(0.0f, 0.0f, 0.0f, 100.0f, new int[]{0, Color.BLACK}, null, Shader.TileMode.CLAMP);
    }

    @Override
    public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDraw(c, parent, state);
        // 此處 Paint的引數這裡傳的null， 在傳入 mPaint 時會出現第一次開啟黑屏閃現的問題
        // 注意 saveLayer 不能省也不能移動到onDrawOver方法裡
        layerId = c.saveLayer(0.0f, 0.0f, (float) parent.getWidth(), (float) parent.getHeight(), null, Canvas.ALL_SAVE_FLAG);
    }

    @Override
    public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.getItemOffsets(outRect, view, parent, state);
    }

    @Override
    public void onDrawOver(@NonNull Canvas canvas, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
        super.onDrawOver(canvas, parent, state);
        mPaint.setXfermode(xfermode);
        mPaint.setShader(linearGradient);
        canvas.drawRect(0.0f, 0.0f, parent.getRight(), 200.0f, mPaint);
        mPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
    }
}
複製程式碼

其中，PorterDuffXfermode為影象的混合模式，詳情可參考各個擊破搞明白PorterDuff.Mode LinearGradient為漸變效果，詳情可參考自定義控制元件三部曲之繪圖篇(十九)——LinearGradient與閃動文字效果

完整原始碼 PicRvDemo

你的認可，是我堅持更新部落格的動力，如果覺得有用，就請點個贊，謝謝

RecyclerView之ItemDecoration
2017-05-03
View
【Android進階】RecyclerView之快取（二）
2019-03-12
AndroidView快取
教你玩轉 Android RecyclerView：深入解析 RecyclerView ItemDecoration類
2017-06-10
AndroidView
RecyclerView.ItemDecoration
2016-08-15
View
自定義View 之 RecyclerView.ItemDecoration
2019-03-02
View
【Android進階】RecyclerView之繪製流程（三）
2019-04-10
AndroidView
RecyclerView 知識梳理(4) ItemDecoration
2017-12-21
View
RecyclerView進階之層疊列表（上）
2017-12-12
View
RecyclerView進階之層疊列表（下）
2017-12-13
View
Android UI進階之旅2 Material Design之RecyclerView的使用
2017-12-21
AndroidUIMaterial DesignView
RecyclerView進階(一)RecyclerView實現雙列表聯動
2017-11-06
View
RecyclerView使用指南（四）—— 使用ItemDecoration
2018-11-27
View
關於RecyclerView.ItemDecoration的自定義
2019-01-30
View
RecyclerView定製：通用ItemDecoration及全展開RecyclerView的實現
2019-02-28
View
用RecyclerView打造一個輪播圖（進階版）
2017-11-22
View
Android自我進階——JAVA之JVM
2020-11-04
AndroidJavaJVM
Android RecyclerView-使用Itemdecoration實現粘性頭部功能,詳細到具體步驟.
2018-02-01
AndroidView
JavaScript進階之(一) this指標
2020-11-06
JavaScript指標
Android進階2之WebView（瀏覽器）
2012-03-25
AndroidWebView瀏覽器
Android進階一個專案，一個Toolbar
2019-03-04
Android
Android初步進階之Design Support Library庫簡單使用(一)
2020-10-22
Android
Android高階進階之路【一】Android中View繪製流程淺析
2021-11-03
AndroidView
Android動畫效果之Property Animation進階（屬性動畫）
2016-08-24
Android動畫
Android UI進階之旅7 Material Design之Palette
2017-12-21
AndroidUIMaterial Design
【Android 進階】仿抖音系列之翻頁上下滑切換視訊（一）
2019-02-22
Android
Android高手進階教程(二十五)之---Android 中的AIDL!!!
2011-05-17
AndroidAI
Android高手進階教程(二十四)之---Android WebView的快取!!!
2011-03-10
AndroidWebView快取
Android高手進階教程(二十)之---Android與JavaScript方法相互呼叫！
2010-08-31
AndroidJavaScript
ItemDecoration深入解析與實戰（一）
2018-11-29
Android進階——自定義View之雙向選擇Seekbar
2019-03-30
AndroidView
Android進階之Walle多渠道打包&Tinker熱修復
2019-03-26
Android
Android高手進階之兩幅圖搞定DilogFragment
2019-01-12
AndroidFragment
Android 進階 ———— Handler系列之建立子執行緒Handler
2018-05-11
Android執行緒
Android UI進階之旅7--Material Design之Palette
2017-05-17
AndroidUIMaterial Design
MultiItem進階使用DataBinding 讓 RecyclerView程式碼更簡潔清爽
2017-04-09
View
Django 進階之 celery
2018-08-27
Django
javascript 進階之 - Promise
2018-06-03
JavaScriptPromise
IOS 進階之 WKWebView
2016-10-12
iOSWebView

【Android進階】RecyclerView之ItemDecoration（一）

前言

什麼是ItemDecoration

如何寫出比較炫酷的效果？

完整原始碼 PicRvDemo

你的認可，是我堅持更新部落格的動力，如果覺得有用，就請點個贊，謝謝

相關文章

什麼是`ItemDecoration`