A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

本帖最后由 Android_Robot 于 2016-5-10 14:15 编辑

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

时间都去哪了;时间你走慢一点吧~

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

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


效果

先来看看效果。


分析

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

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

这里自定义布局部分也就是把旁边的线条与圆圈封装到一起,并使用简单的方法来控制是否显示。
当封装好了后,与旁边的文字部分也就是水瓶方向的线性布局了,然后设置为每一个的RecyclerView 的Item的布局也就完成了。


控件

控件很简单,首先我们继承View,取名为 TimeLineMarker 就OK。


Attrs 属性

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

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


属性

两个大小属性,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代码部分

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


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

TimeLineModel.java

一个名字,一个年龄。

ItemType.java


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

TimeLineViewHolder.java

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


TimeLineAdapter.java

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


在这里需要着重说一下:我复写了getItemViewType方法;在该方法中我们需要设置对应的Item的类型;在这里传入的是item的坐标,需要返回的是item的具体状态,该状态标示是int类型;在这里我使用的是ItemType的静态属性。
该方法会在调用onCreateViewHolder方法之前调用;而onCreateViewHolder方法中的第二个参数int值也就是从getItemViewType之中来;所以我们可以在这里进行对应的数据状态标示。
而在onCreateViewHolder方法中我们返回一个:TimeLineViewHolder就OK,随后在onBindViewHolder方法中进行数据初始化操作。

MainActivity.java

上面所有都准备好了,下面就进行具体的显示。
在这里就只贴出核心代码了;篇幅也是有些长。


在这里就是傻瓜的操作了,流程就是准备好对应的数据,装进Adapter,准备好对应的布局方式,然后都设置到RecyclerView中就OK。

效果

来看看具体的效果:

这个自定义是可以扩展的,大家可以扩展为水平方向试试。

代码都开源到项目中了。 想获取完整项目,回帖可见github完整资源下载地址,导入项目可直接运行

如果需要在Android原生系统开发的项目资料可留言回复或者加Q交流:1441761649

下载地址:


本帖隐藏的内容地址
游客,如果您要查看本帖隐藏内容请回复


其他精华资源推荐:
[持续更新]2016最新Android视频教程+源码+技巧/经验+软件+面试
Android开发之嵌入浏览器
java教程下载——非常受大家关注的java教程集锦【汇总】
[官方秀] 为什么你要报传智·黑马学Android

41 个回复

正序浏览
chenzhiyuan 来自手机 中级黑马 2019-1-25 14:41:00
42#
你好,可以下载完整demo吗,现在被eclipse中使用控件recyclerview,卡这里三天了要疯了,……
回复 使用道具 举报
给楼主赞一个
回复 使用道具 举报
666666666666666666666666666666666666
回复 使用道具 举报
正好能用的上
回复 使用道具 举报
学习下  以前做过一个这样的效果
回复 使用道具 举报
谢谢分享
回复 使用道具 举报
好像可以
回复 使用道具 举报
哈哈哈哈哈
回复 使用道具 举报
和不错,不知道能不能用
回复 使用道具 举报
回复 使用道具 举报
hi 啦啦啦拉拉啦啦啦
回复 使用道具 举报
66666666666666666666666666666666666666666666666666666666
回复 使用道具 举报
wrg 初级黑马 2017-12-26 19:06:10
30#
发发大水饭卡舒服
回复 使用道具 举报
正在做时间轴设计,可以用来参考了,谢谢
回复 使用道具 举报
啊打发打发打发
回复 使用道具 举报
newu 黑马帝 2017-10-19 23:28:34
27#
给力呀,参考参考
回复 使用道具 举报
厉害大佬
回复 使用道具 举报
谢谢分享
回复 使用道具 举报
1111111111111111111111111111111111111
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 加入黑马