android水平时间轴控件_[Android] 【github项目分享】RecyclerView 列表控件漂亮时间线实现...

àì夳堔傛蜴生んèń 2023-01-08 08:09 164阅读 0赞

本帖最后由 Android\_Robot 于 2016-5-10 14:15 编辑

【github优秀项目开源分享】敬请期待开发与面试中的高频率项目连载

时间都去哪了；时间你走慢一点吧～

很多软件中都有时间线的东西，比如天气，计划，旅游等时间线最多了；具体实现方式很多，

在本篇文章中讲解一种自定义View封装的方式实现时间线效果，PS：这也是面试中也时常会问到的知识点。效果

先来看看效果。

![Image 1][]

分析

软件中，可以看见前面的时间线也就是线条加上圆圈组成；当然这里的圆圈与线条也都是可以随意换成其他的，比如图片等等。

当然这里最简单的来说，是上面一个线条，然后一个圆圈，然后下面一个线条；上线条在第一条数据时不做显示，下线条在最后一条数据时不做显示。

![Image 1][]

这里自定义布局部分也就是把旁边的线条与圆圈封装到一起，并使用简单的方法来控制是否显示。

当封装好了后，与旁边的文字部分也就是水瓶方向的线性布局了，然后设置为每一个的RecyclerView 的Item的布局也就完成了。控件

控件很简单，首先我们继承View，取名为 TimeLineMarker 就OK。Attrs 属性

开始控件之前先准备好需要的属性。

在这里也就准备了线条的大小、开始线条、结束线条、中间标示部分及大小。属性

两个大小属性，3个具体的Drawable，然后在onDraw方法中进行具体的显示也就OK。

构造与属性初始化

在上面我们定义了属性，在这里我们在构造函数中获取XML所设置的属性。

![Image 1][]

Drawable 的位置与大小初始化

属性啥的有了，具体的Drawable 也有了，要显示的地方调用也是OK了；但是如果没有进行进行具体的位置调整这一切也都没有意义。

![Image 1][]

initDrawableSize 方法进行具体的运算，而运算的时间点就是当控件的大小改变(onSizeChanged)的时候。

在初始化中采用了一定的投机取巧；这里利用了上内边距与下内边距分别作为上线条与下线条的长度；而线条与中间的标识都采用了水平距中。

其他设置方法

![Image 1][]

在设置中，首先判断是否更改，如果更改那么就更新并重新计算位置；随后刷新界面。到这里，控件差不多准备OK了，其中还有很多可以完善的地方，比如加上快捷设置颜色什么的，也可以加上大小计算的东西。同时还可以加上时间线是水瓶还是垂直等等。在这里就不累赘介绍哪些了。下面来看看如何使用。使用XML布局ITEM布局item\_time\_line.xml

![Image 1][]

在这里我们之间使用顺序布局，左边是TimelIne控件，右边是一个简单的字体控件，具体使用中可以细化一些。

在TImeLine控件中我们的Mark是使用的drawable/ic\_timeline\_default\_marker；这个就是一个简单的圆圈而已；对于自己美化可以使用一张图片代替或者更加复杂的布局；当然上面的线条就更加简单了，就直接使用颜色代替。

![Image 1][]

主界面XML RecyclerView

![Image 1][]

在这里就是加上了一个RecyclerView 控件在主界面就OK。Java代码部分

在开始之前先来看看我们的文件具体有些神马。

![Image 1][]widget中就是具体的自定义控件，model是具体的数据模型，adapter部分，这里有一个Recyclerview的adapter文件，以及一个具体的Item TimeLineViewHolder，当然在这里还定义了一个ItemType类，该类用来标示每个Item的类型，比如头部，第一个，普通，最后一个，底部等等。TimeLineModel.java

![Image 1][]

一个名字，一个年龄。ItemType.java

![Image 1][]

分别定义了几个静态值，分别代表普通、头部、底部、开始、结束、原子；当然其中有些可以不用定义。TimeLineViewHolder.java![Image 1][]

该文件为RecyclerView 的Adapter中每个Item需要实现的Holder类。

在该类中，我们在构造函数中需要传入一个根View同时传入一个当然item的状态。

随后使用find….找到控件，在这里我们把TextView保存起来，而TimeLineView找到后直接进行初始化设置。

根据传入的ItemType来判断是否是第一个，最后一个，以及原子；然后设置TimeLineView的属性。

在下面的setData方法中我们显示具体的Model数据。

TimeLineAdapter.java

适配器部分，我们需要做的工作是；根据具体的数据渲染上对应的界面。

![Image 1][]