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


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

人生得意须尽欢, 桃花坞里桃花庵
点个关注呗,对,不信你点试试?

推荐阅读更多精彩内容