RecyclerView（2）-自定义Decoration打造时光轴效果

上一节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偏移量

可以看出规律吗？
所有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

---

希望我的文章不会误导在观看的你，如果有异议的地方欢迎讨论和指正。
如果能给观看的你带来收获，那就是最好不过了。

人生得意须尽欢, 桃花坞里桃花庵

点个关注呗，对，不信你点试试？