RecyclerView — ItemDecoration

列表的分割線算是必會的技能了,大家都會遇到的,這里我們用 ItemDecoration 來實現

非常好的 ItemDecoration 練習項目:

1. 系統默認實現

DividerItemDecoration 是系統提供給我們的實現,可以實現 LinearLayoutManager 中的分割線效果,但是其他的 LayoutManager 就得我們自己寫了

//初始化分隔線、添加分隔線
        mDivider = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
        mRecyclerView.addItemDecoration(mDivider);

DividerItemDecoration 我們可以通過修改系統參數的情況下自定義分割線效果

  1. 找到res/values/styles.xml,在其中聲明android:listDivider屬性,然后使用我們自己的樣式
<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="android:listDivider">@drawable/my_divider</item>
    </style>
</resources>
  1. 在res/drawable目錄下聲明我們自己的樣式my_divider.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <gradient
        android:centerColor="#ff00ff"
        android:endColor="#00ff00"
        android:startColor="#0000ff"
        android:type="linear" />
    <size android:height="4dp"/>
</shape>

2. ItemDecoration 繪制順序

public static abstract class ItemDecoration {
       
        // 在itemView繪制完成之前調用,也就是說此方法draw出來的效果將會在itemView的下面
        public void onDraw(Canvas c, RecyclerView parent, State state) {
            onDraw(c, parent);
        }

        //與onDraw相反,draw出來的效果將疊加在itemView的上面
        public void onDrawOver(Canvas c, RecyclerView parent, State state) {
            onDrawOver(c, parent);
        }

         //算通過配置outRect來設置itemView的inset邊界,相當于設置itemView的margin
        @Deprecated
        public void getItemOffsets(Rect outRect, int itemPosition, RecyclerView parent) {
            outRect.set(0, 0, 0, 0);
        }
    }

看圖:


outRect 設置就是 item 4周的 magin ,然后配合 onDraw ,onDrawOver 方法操作

onDraw 相當于畫背景,在 item 之前繪制,onDrawOver 相當于畫前景,在 item 之后繪制


3. ItemDecoration 是可以添加多個的

recyclerView.addItemDecoration(new SimpleDividerDecoration(this));
recyclerView.addItemDecoration(new LeftAndRightTagDecoration(this));

比如上面這個,SimpleDividerDecoration 畫上下分割線,設置 item 4周 magin ,LeftAndRightTagDecoration 畫標簽


4. ItemDecoration 的詳細資料

知道這些就差不多了,詳細請看:

網格和線性 ItemDecoration 代碼實現看這個,我現在是沒時間寫了


5. ItemDecoration 的應用案例

ItemDecoration 首先肯定是畫分割線的,但是除了分割線還有更多可玩的

5.1 畫時光軸

時光軸,我們通過 getItemOffsets 設最 item 左 magin,然后在 ItemDecoration 的 onDraw 里面畫圓和線畫出來

詳細看文章,我就不再寫了,不難,真的是重在思路,之前我也是完全沒想到 ItemDecoration 可以這么玩


5.2 繪制標簽

先看效果:


熟悉了上面套路的同學現在看這個角標,明顯這也是可以通過 ItemDecoration 的 onDraw 畫的啊

具體案例請參考:


5.3 StickyHeader

這個也叫吸頂效果,不吸頂單單畫 head item 也是很有意義學習的

看效果:


這里就是通過 onDrawOver 繪制吸頂 item 的,如果不要求吸頂 onDraw 就行

下面是我們找到的解釋最清楚,最簡單的實現了:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容