列表的分割線算是必會的技能了,大家都會遇到的,這里我們用 ItemDecoration 來實現
非常好的 ItemDecoration 練習項目:
1. 系統默認實現
DividerItemDecoration 是系統提供給我們的實現,可以實現 LinearLayoutManager 中的分割線效果,但是其他的 LayoutManager 就得我們自己寫了
//初始化分隔線、添加分隔線
mDivider = new DividerItemDecoration(this,DividerItemDecoration.VERTICAL);
mRecyclerView.addItemDecoration(mDivider);
DividerItemDecoration 我們可以通過修改系統參數的情況下自定義分割線效果
- 找到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>
- 在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 就行
下面是我們找到的解釋最清楚,最簡單的實現了: