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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/c10WTiybQ1Ye3/article/details/78098462

640?wx_fmt=png

今日科技快讯

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

作者简介

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

q2nAmor 的博客地址:

http://blog.csdn.net/u012534831

概述

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

640?wx_fmt=png

640?wx_fmt=png

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

引入

Android Studio:

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

Eclipse: 

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

使用

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

640?wx_fmt=png

源码实现

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

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

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

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

640?wx_fmt=png

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

640?wx_fmt=png

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

640?wx_fmt=png

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

640?wx_fmt=png

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

640?wx_fmt=png

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

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

640?wx_fmt=png

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

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

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

640?wx_fmt=png

源码下载

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

项目地址:

https://github.com/qht1003077897/timeline

更多

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

640?wx_fmt=gif

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

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

640?wx_fmt=jpeg

猜你喜欢

转载自www.cnblogs.com/lonelyxmas/p/9707482.html