自定义分节seekBar,类似stepView效果

        接触android有一些时间了，但博客还是第一次写，真是有点小激动呢，其实真不知道该怎么说，只是觉得自己做出点小东西应该给大家分享一下。有用没用咱们暂不说，主要是分享，咳咳，我不是什么大神，如果您觉得下面我说的很简单或者有什么需要优化修改的，请给出您的建议！

       好了，直接进正题，前两天项目需要做一个时间轴效果，我在github上查了查，果然有一个stepView效果，写的还是很不错的，但是有点不符合我们项目的要求，于是想自己写一个，刚好可以多多锻炼下自定义view的能力，废话不多说，直接上图：

自定义seekBar,类似stepView效果

       这里的的控件是可以跟随手指拖动，并且手指抬起的时候会停留在离相邻节点最近的节点，只是我不知道怎么把视频传上来，大家凑合看下吧，见谅~

简单的SeekBar相信大家都能顺利的写的出来，先画一个背景条（其实就是一个矩形），根据手指的拖动的坐标计算进度，在画一个短的矩形，这样最简单的SeekBar就实现了，其实这个原理跟它没啥区别，看下总体步骤吧：

第一步：定义属性

第二步：在控件中拿到属性对应的值

第三步：在布局文件中使用自定义控件

那根据业务需求需要什么属性呢？简单分析下就可以知道只是以下这些：

1，背景条的颜色,

2，背景条的高度

3，已完成进度的颜色

4，未完成的节点的颜色

5，已完成的节点的颜色

6，节点（也就是一个圆）的半径

自定义属性当然就是在attrs.xml中声明咯

<declare-styleable name="xlhStep"> <attr name="stepCount" format="integer"></attr> //总共的步数，效果图中为4 <attr name="currentStep" format="integer"></attr> //当前进度，效果图中为2，它是从0开始的<attr name="barHeight" format="dimension"></attr>//背景条的高度<attr name="barColor" format="color"></attr>//背景条的颜色<attr name="stepSelectedColor" format="color"></attr> //已完成的节点（称作“步”也行）的颜色<attr name="stepNormalColor" format="color"></attr> //未完成的节点的颜色<attr name="progressColor" format="color"></attr> //已完成的进度条的颜色<attr name="stepRadius" format="dimension"></attr> //节点的半径<attr name="canDrag" format="boolean"></attr> //是否可以手指拖动，默认是可以的</declare-styleable>

       在自定义控件中拿到属性值也很简单啦：

在public XLHStepView(Context context, AttributeSet attrs)构造函数中可以获得，布局中的控件加载的时候调用此方法，而public XLHStepView(Context context)只是在代码中产生该控件对象的时候才会调用。然后就是

TypedArray typedArray = context.obtainStyledAttributes(attrs,
R.styleable.xlhStep);
mBarColor = typedArray.getColor(R.styleable.xlhStep_barColor,
Color.BLUE);

。。。

把需要获得的属性都得到就是了

       在布局文件中使用该控件更简单了吧，大家每天不知道要用多少次

<com.example.stepview.XLHStepView android:id="@+id/zidingyi" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" xlh:barColor="#51C6EF" xlh:barHeight="15dp" xlh:canDrag="true" xlh:currentStep="2" xlh:progressColor="#085EB3" xlh:stepCount="4" xlh:stepNormalColor="#76BD30" xlh:stepRadius="15dp" xlh:stepSelectedColor="#F66936" ></com.example.stepview.XLHStepView>

记住包名不要写错哦，另外命名空间也是要加滴 

xmlns:xlh=<a target=_blank href="http://schemas.android.com/apk/res/com.example.xlhstepview">http://schemas.android.com/apk/res/com.example.xlhstepview</a>

分不清res/包名和res-auto使用场景的请百度充电啦（我是不会告诉你res-auto是使用关联library的属性时候用的）




属性也分析完了，好了开始算数学了，全是几何啊~还是直接看图：

        哇，图好难看啊，的确，是用系统的画图工具画的，还是那句话，凑合看吧，图一旦画出来了，过程自然理清了，代码已在胸中；

解释一下，蓝色的圆就是节点啦，蓝色的长方形就是背景条，红色的长方形就是当前进度也是跟随手指移动的部分

首先要画背景矩形必须要知道left, top,right,bottom，这里的left就是节点的半径 + leftPadding,为神马还有加leftPading？如果xml布局中设置了android:padding=""了呢，矩形的左边是不是要跟着paddingLeft变了；right那就是控件总的宽度 - rightPadding - 半径；top就是topPaddiing + 半径 - 背景条高度的一半；bottom就是top + 背景条高度的一半

其次画进度就容易了，跟背景条比起来就是right变了，要根据当前进度 * 背景条的宽度得到

然后就是画圆，用for循环对所有节点进行画，要判断是否在当前进度前/后面来设置画笔的颜色；画圆只需要知道圆心的坐标和半径即可，圆心坐标应该一看便知吧，背景条进行等分啊~

然后要解决的就是让进度跟着手指滑动，那简单，复写onTouchEvent，对，计算进度，通知控件去重绘，那么问题来了，怎么进度有磁铁的吸附效果呢，怎么让他自动吸附到最近的节点上呢？嗯，聪明的你已经想到了，对事件进行判断，当手指down和move的时候就只是计算进度进行重绘，让手指抬起的时候就要判断当前进度离哪个节点最近咯，额，一组数中取最小呗，大学的时候经常写这样的代码，然后设置进度就是节点代表的进度，然后重绘！

咦，完了吗？no,进度改变了是否要通知外界呢？怎么通知呢？接口啊，interface哈哈，做个监听不完了，然后就能回调对改变感兴趣的监听者（activity或fragment等）的函数了！

哎呀，不知不觉已经快写完了，不知道笨笨的我是否讲清楚了，聪明的你画画图相信代码就会浮现在眼前了。

当然这里需要改进的地方还有很多比如：节点我想设置成图片怎么办？节点我想做成半径原来越大效果的怎么办？我需要竖直的效果怎么办？节点我需要文字做标签怎么办？

相信这些统统难不倒聪明的你，我也会抽出时间来继续完善，欢迎大家说说自己的高见~

源码下载：http://download.csdn.net/detail/xingliuhua/8903719