RecyclerView 列表控件中简单实现时间线

时间

时间,时间,时间啊;走慢一点吧~

看见很多软件中都有时间线的东西,貌似天气啊,旅游啊什么的最多了;具体实现方式很多,在本篇文章中讲解一种自定义View封装的方式。

效果

先来看看效果。 

RecyclerView 列表控件中简单实现时间线

分析

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

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

RecyclerView 列表控件中简单实现时间线

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

构造与属性初始化

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

Drawable 的位置与大小初始化

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

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

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

其他设置方法

在设置中,首先判断是否更改,如果更改那么就更新并重新计算位置;随后刷新界面。

到这里,控件差不多准备OK了,其中还有很多可以完善的地方,比如加上快捷设置颜色什么的,也可以加上大小计算的东西。同时还可以加上时间线是水瓶还是垂直等等。在这里就不累赘介绍哪些了。下面来看看如何使用。

使用

XML布局

ITEM布局item_time_line.xml

在这里我们之间使用顺序布局,左边是TimelIne控件,右边是一个简单的字体控件,具体使用中可以细化一些。 
在TImeLine控件中我们的Mark是使用的drawable/ic_timeline_default_marker;这个就是一个简单的圆圈而已;对于自己美化可以使用一张图片代替或者更加复杂的布局;当然上面的线条就更加简单了,就直接使用颜色代替。

主界面XML RecyclerView

在这里就是加上了一个RecyclerView 控件在主界面就OK。

Java代码部分

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

RecyclerView 列表控件中简单实现时间线

一个名字,一个年龄也就OK。

ItemType.java

分别定义了几个静态值,分别代表普通、头部、底部、开始、结束、原子;当然其中有些可以不用定义。

TimeLineViewHolder.java

该文件为RecyclerView 的Adapter中每个Item需要实现的Holder类。 
在该类中,我们在构造函数中需要传入一个根View同时传入一个当然item的状态。 
随后使用find….找到控件,在这里我们把TextView保存起来,而TimeLineView找到后直接进行初始化设置。 
根据传入的ItemType来判断是否是第一个,最后一个,以及原子;然后设置TimeLineView的属性。 
在下面的setData方法中我们显示具体的Model数据。

来源:shotaSu

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2016年1月23日
下一篇 2016年1月24日

相关推荐