自定义一个简单精美的时间轴控件

近日，微信支付开启了新功能“零钱通”的测试。目前腾讯正在进行白名单测试，并向一部分客户推荐了零钱通，可以随时支付并享受收益。业内认为，零钱通将很快上线，并对近期不断降低限额的余额宝形成竞争。

本篇来自 q2nAmor 的投稿，分享了一个简单精美的自定义时间轴，希望大家喜欢！

q2nAmor 的博客地址：

http://blog.csdn.net/u012534831

这是母项目 H-Express 中的那个自定义时间轴view，现抽取出来分享给大家，这个自定义view比较简单，作为学习自定义view入门的朋友可不能错过了。一般可以应用在单号追踪、历史事件记录、任务完成度显示等方面，作为Recyclerview或者ListView的item布局即可。废话不多说了，先上效果图。

其中图一为H-Express中的效果，图二为原始效果，横向和竖向。

Android Studio:

dependencies {
    compile 'com.qht1003077897.timeline:timelinelibrary:0.1'
}

Eclipse: 

使用Eclipse的同学直接到项目的github地址下面timelinelibrary中拷贝出两个类，一个attrs出来，放到自己项目中即可。

库的使用方法也非常简单，直接在你的布局文件中引入如下代码即可：

timeline的实现很简单，我这里以竖向为例，横向的类似。总结为2点：

1.首先以整个view的正中心然后靠左边界为基准绘制中间的圆，如图。为什么要靠左边呢，因为放在左边界再加上合适的paddingLeft就很容易能控制圆的位置了（同理，横向的靠上边，使用paddingTop控制圆的位置）。

2.然后以这个圆为基准，再绘制上面的线条和下面的线条。

下面是6个属性，以供xml中进行设置。

工接下来是很简单的 onMeasure() 方法，如果你的自定义 view 没有什么特殊需求，可以直接把这个拿去用，通用版。

接下来我们就需要在onDraw()方法里来进行绘制了，代码如下所示。

这段代码并不复杂，我们主要来看一下 initDrawableSize() 方法中的逻辑。

这段代码中比较难理解的可能就是 setBounds() 方法了，那么我们先来了解一下 setBounds() 方法的作用。

这句话的意思是：为Drawable 指定一个矩形区域，在onDraw() 方法被调用时使用。

这个矩形区域参数要求：矩形左边距view左边界的距离，矩形上边距view上边界的距离，矩形右边距view左边界的距离，矩形下边距view上边界的距离。

首先设置 mMarkerDrawable 的 bounds，左边的距离为pleft，上下为中心位置，确定了这个 bounds 为基准位置之后，再去绘制上下线条。

如果 mMarkerDrawable 为空，即在 xml 中不要这个圆，那么我们此处是将它看做一个点，一个左边的距离为pleft，上下为中心位置的点，作为我们的基准点，然后再去绘制上下线条，最终绘制出来的即为一条线段。

对于上下线的绘制很简单，这里以上线条为例，线条上端紧挨view的顶端，下端紧挨这个bounds的顶部，线条的长度为 bounds 的顶端距离上边界的距离。线条长度和 bounds 挂上钩之后，我们如果在 xml 中设置 paddingTop ，则 bounds.top 变大，线条长度变长，圆相应的往下移动。bounds.top= pTop +（height/2-mMarkerSize/2）。

整个项目的完整Demo都已经上传到了GitHub上面，对这个效果感兴趣的小伙伴们可以将Demo下来下来进行参考。

项目地址：

https://github.com/qht1003077897/timeline

每天学习累了，看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号，每天都有好心情。

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：