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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 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 个回复

倒序浏览
66666666666
回复 使用道具 举报
收藏的不错哦
回复 使用道具 举报
下来卡卡可能  谢谢分享
回复 使用道具 举报
ztq_2020 来自手机 初级黑马 2016-6-14 16:10:23
报纸
66666666666666666666666666666666666666666666666666666
回复 使用道具 举报
感谢好东西
回复 使用道具 举报
henhaohenqiangda
回复 使用道具 举报
很好很强大
回复 使用道具 举报
0000000000000000000000000000000000000
回复 使用道具 举报
感谢分享!!!!
回复 使用道具 举报
给力呀,参考参考
回复 使用道具 举报
6666666666666666666666666666666666666666666666666666666666
回复 使用道具 举报
谢谢分享
回复 使用道具 举报
RecyclerView的妙用
回复 使用道具 举报
ydyw 初级黑马 2016-12-7 14:55:10
15#
66666666666666666666
回复 使用道具 举报
学习学习。。。。。。。。。。。。。。。
回复 使用道具 举报
哈哈哈哈哈哈
回复 使用道具 举报
方法是范德萨发生打发第三方的范范
回复 使用道具 举报
666666666666666
回复 使用道具 举报
很好很好很好
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 加入黑马