黑马程序员技术交流社区
标题: [Android] 【github项目分享】RecyclerView 列表控件漂亮时间线实现 [打印本页]
作者: Android_Robot 时间: 2016-5-5 15:19
标题: [Android] 【github项目分享】RecyclerView 列表控件漂亮时间线实现
本帖最后由 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
作者: 天人之珠 时间: 2016-5-14 09:04
66666666666
作者: 天人之珠 时间: 2016-5-14 09:13
收藏的不错哦
作者: 林以 时间: 2016-5-29 00:02
下来卡卡可能 谢谢分享
作者: ztq_2020 时间: 2016-6-14 16:10
66666666666666666666666666666666666666666666666666666
作者: 云袭 时间: 2016-6-14 21:48
感谢好东西
作者: sanky915 时间: 2016-6-28 17:13
henhaohenqiangda
作者: sanky915 时间: 2016-6-28 17:16
很好很强大
作者: Vector1901 时间: 2016-8-21 03:30
0000000000000000000000000000000000000
作者: 大大史莱姆 时间: 2016-8-28 00:05
感谢分享!!!!
作者: z332406259 时间: 2016-9-19 08:13
给力呀，参考参考
作者: 浪漫天宇 时间: 2016-10-20 12:39
6666666666666666666666666666666666666666666666666666666666
作者: AllenIverson 时间: 2016-10-21 13:48
谢谢分享
作者: yu244934256 时间: 2016-11-13 02:05
RecyclerView的妙用
作者: ydyw 时间: 2016-12-7 14:55
66666666666666666666
作者: 蜉杰辰蝣 时间: 2017-2-5 15:05
学习学习。。。。。。。。。。。。。。。
作者: 黑马斯巴达 时间: 2017-2-22 17:51
哈哈哈哈哈哈
作者: 呵呵哒哒哒 时间: 2017-3-26 20:15
方法是范德萨发生打发第三方的范范
作者: heidou 时间: 2017-3-29 11:32
666666666666666
作者: piao8888 时间: 2017-4-3 22:31
很好很好很好
作者: 小人物大梦想 时间: 2017-4-15 02:23
法国红酒结婚吧个很好解决
作者: wuxuebai 时间: 2017-7-28 20:20
非常感谢 非常感谢 非常感谢
作者: daidai12138 时间: 2017-8-4 15:29
求求求求求求求求求求求求求求
作者: jsondx 时间: 2017-8-8 09:39
1111111111111111111111111111111111111
作者: zhw520 时间: 2017-9-2 18:44
谢谢分享
作者: superxxh 时间: 2017-10-19 23:19
厉害大佬
作者: newu 时间: 2017-10-19 23:28
给力呀，参考参考
作者: h847880529 时间: 2017-11-8 02:30
啊打发打发打发
作者: harvest863 时间: 2017-11-24 14:54
正在做时间轴设计，可以用来参考了，谢谢
作者: wrg 时间: 2017-12-26 19:06
发发大水饭卡舒服
作者: FatesDog 时间: 2017-12-29 12:32
66666666666666666666666666666666666666666666666666666666
作者: 阿娇 时间: 2018-2-24 12:02
hi 啦啦啦拉拉啦啦啦
作者: Teemow 时间: 2018-3-9 17:51
这个可以有的
作者: chgs12345 时间: 2018-3-13 10:29
和不错，不知道能不能用
作者: 豪逍遥 时间: 2018-3-14 15:24
哈哈哈哈哈
作者: hyl941205 时间: 2018-3-20 10:28
好像可以
作者: 36901702 时间: 2018-4-19 12:13
谢谢分享
作者: 希冀 时间: 2018-4-19 21:31
学习下 以前做过一个这样的效果
作者: zhangminok 时间: 2018-5-22 10:24
正好能用的上
作者: 落星追恒 时间: 2018-6-4 14:34
666666666666666666666666666666666666
作者: 黑马Seven11 时间: 2018-11-30 12:45
给楼主赞一个
作者: chenzhiyuan 时间: 2019-1-25 14:41
你好，可以下载完整demo吗，现在被eclipse中使用控件recyclerview，卡这里三天了要疯了，……
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
