列表的分割线算是必会的技能了,大家都会遇到的,这里我们用 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 就行
下面是我们找到的解释最清楚,最简单的实现了: