上一节RecyclerView（1）- Decoration源码解析主要过了一遍Decoration的源码,活学活用，我们来自定义一个时光轴效果。
· RecyclerView（1）- Decoration源码解析
· RecyclerView（2）- 自定义Decoration打造时光轴效果
· RecyclerView（3）- LayoutMagager源码解析,LinearLayoutManager
· RecyclerView（4）- 核心、Recycler复用机制_1
· RecyclerView（4）- 核心、Recycler复用机制_2
· RecyclerView（5）- 自定义LayoutManager（布局、复用）
· RecyclerView（6）- 自定义ItemAnimator
· RecyclerView（7）- ItemTouchHelper
· RecyclerView（8）- MultiTypeAdapter文章、MultiTypeAdapter Github地址
效果如下：
1、分析模块，定义元素
可以看到，一个完整的界面由以上五个元素组成。
2、位置分析
- 1、itemView的位置
我标记了一下图片，图中红色方框代表着偏移量
可以看出规律吗？
所有itemVIew的左、右、下边距都是相同的，只有第0项与第1项的top边距是大于0 的。
- 2、竖直线、水平线、图片位置
竖直线取中点，水平线取itemView三分之一处; 图片也是去itemVIew三分之一处。
- 3、 悬浮头部位置
没什么好说的 左上角给一点外边距。
3、代码结构、逻辑思路
先来一个伪代码。 先自定义一个RecyclerView.ItemDecoration
public class TimeLineDecoration extends RecyclerView.ItemDecoration {
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
// 计算itemVIew位置偏移量
}
@Override
public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
// 画竖直线
// 计算位置 画水平线
// 计算位置画时间图标
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
// 画头部
}
}
4、局部代码填充、编写。
由于这是一件重复而又繁琐的事情，就直接看视频吧，当然代码也在下面。
· RecyclerView（1）- Decoration源码解析
· RecyclerView（2）- 自定义Decoration打造时光轴效果
· RecyclerView（3）- LayoutMagager源码解析,LinearLayoutManager
· RecyclerView（4）- 核心、Recycler复用机制_1
· RecyclerView（4）- 核心、Recycler复用机制_2
· RecyclerView（5）- 自定义LayoutManager（布局、复用）
· RecyclerView（6）- 自定义ItemAnimator
· RecyclerView（7）- ItemTouchHelper
· RecyclerView（8）- MultiTypeAdapter文章、MultiTypeAdapter Github地址
文章视频地址：链接：http://pan.baidu.com/s/1hssvXC4 密码：18v1
希望我的文章不会误导在观看的你，如果有异议的地方欢迎讨论和指正。
如果能给观看的你带来收获，那就是最好不过了。
