在之前的项目中有一个输入身高的需求，本来是通过一个EditText进行输入的，但是做出来后我咋看咋别扭，之前玩薄荷健康，里面有一个身高体重的选择，是通过一个刻度尺来实现的，效果还不错。但是Android中并没有为我们提供刻度尺这个View，所以就决定自定义一个出来。
我们先来看效果图
可以通过左右滑动进行身高的选择，下面我将会详细的分析整个View的实现过程。
1 图像绘制
1.1刻度线的绘制
private void drawScale(Canvas canvas){
for(int i =0;i<=mScaleTotalCount;i++){
if(i%10==0){
mScalePaint.setStrokeWidth(6);
canvas.drawLine(i*mScaleMargin,0,
i*mScaleMargin,mScaleHeight*2,mScalePaint);
canvas.drawText(i+mStartScale+"",i*mScaleMargin,
mScaleHeight*2+mOffset,mTextPaint);
}else {
mScalePaint.setStrokeWidth(3);
canvas.drawLine(i*mScaleMargin,0,
i*mScaleMargin,mScaleHeight,mScalePaint);
}
}
}
刻度线的绘制还是非常简单的，mScaleTotalCount和mScaleMargin分别代表总刻度数和每个刻度之间的间隔。
1.2指示器的绘制
在这里我事先提一下，中间的指示器我是在另一个ViewGroup中进行绘制的，具体为什么后面我会详细讲解的。
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Path path = new Path();
path.moveTo(mCenterX-mOffset,0);
path.lineTo(mCenterX+mOffset,0);
path.lineTo(mCenterX, (float) (mOffset*1.2));
path.close();
canvas.drawPath(path,mPaint);
}
指示器是一个白色的三角形，在本例中我是通过Path进行绘制的，其中mCenterX为X轴中心坐标，整个绘制绘制过程也是非常简单。
2 触摸反馈
2.1 scrollTo()、scrollBy()、Scroller
一个标准的刻度尺是可以左右滑动的，所以接下来我就为大家详细的去讲解触摸滑动的实现过程。在讲解之前我需要先给同学们普及几个概念：scrollTo()、scrollBy()和Scroller，如果了解的同学可以直接跳过此环节。
在Android中View的移动可以通过调用自身的scrollTo(int x,int y)跟scrollBy(int x,int y)进行，两者的区别是：scrollTo(int x,int y)的每一次移动是相对于原始位置进行的。而scrollBy(int x,int y)的移动是相对一上一次位置进行的，其实scrollBy()内部也是通过scrollTo(int x,int y)进行实现的。两个移动方法都遵循右正左负。
下面我就着重说一下Scroller这个类。先回忆一个场景，ViewPager我们大家应该都很熟悉，ViewPager在滑动的时候它会自动的、平滑的矫正到相应的位置，这个功能是怎么实现的呢？答案就是通过Scroller。Scroller是Android为我们提供的一个专门用于处理滚动效果的工具类，Scroller本身是不会使View进行移动的，而是提供了一套算法，具体的移动还是通过scrollTo()和scrollBy()进行的。Scroller的使用也是非常简单的，具体可以分为如下几个步骤：
1.创建Scroller实例
mScroller = new Scroller(context);
2.调用startScroll()对滚动操作的设置
startX和 startY为起始位置，dx和 dy为偏移量
mScroller.startScroll(int startX, int startY, int dx, int dy);
3.重写View的computeScroll()方法，在其内部结合Scroller实现具体的移动操作
@Override
public void computeScroll() {
super.computeScroll();
if(mScroller.computeScrollOffset()){//判断本次滚动是否结束
scrollTo(mScroller.getCurrX(),0);//移动View
postInvalidate();//刷新界面
}
}
computeScroll()是由onDraw()调用的，所以要加上一个结束标记即computeScrollOffset()，否则会无限递归。本文章对Scroller的叙述先告一段落了，如果想详细的了解Scroller请参考郭霖大神这篇文章
2.2 实现View的滚动
首先我们要重写onTouchEvent()
@Override
public boolean onTouchEvent(MotionEvent event) {
int x = (int) event.getX();
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
if(mScroller!=null&&mScroller.isFinished()){
mScroller.abortAnimation();
}
mLastScale = x;
return true;
case MotionEvent.ACTION_MOVE:
int dx = mLastScale - x + mScrollX;
scrollTo(dx,0);
changeScale();
return true;
case MotionEvent.ACTION_UP:
mScrollX = getScrollX();
int transX;
int offSetX = mScaleMargin*(mScreenScaleCount/2);
if(mScrollX>mWidth-offSetX){//超出最大值
transX = getScrollX() - mWidth + offSetX;
mScrollX = mWidth - offSetX;
Log.i("zs","大于最大值");
}else if(getScrollX()<-offSetX){//小于最小值
transX = getScrollX() + offSetX;
mScrollX = -offSetX;
Log.i("zs","小于最小值");
}else {//在范围内
transX = getScrollX()%mScaleMargin;
if(transX>(mScaleMargin/2)){
transX = -(mScaleMargin - transX);
}
mScrollX = getScrollX() - transX;
Log.i("zs","在范围内");
}
mScroller.startScroll(getScrollX(),0,-transX,0);
postInvalidate();
return true;
}
return super.onTouchEvent(event);
}
private void changeScale(){
int minScale = mStartScale;
int maxScale = mStartScale + mScaleTotalCount;
int scrollScale = (int) Math.rint((double) getScrollX()/
(double) mScaleMargin);
//初始刻度值+滚动刻度值
mCurrentScale = scrollScale + mScreenScaleCount/2 + mStartScale;
if(mScrollCallback!=null){
//超出最大值
if(mCurrentScale>maxScale){
mCurrentScale = maxScale ;
}
//低于最小值
else if(mCurrentScale在DOWN事件中进行mScroller的动画的初始化并且记录当前X轴坐标的值。在MOVE时间中进行View的移动并且通过接口将当前刻度值进行传递。在UP事件中进行位置的矫正，矫正是通过 Scroller的startScroll()结合computeScroll()进行的。整个View的绘制以及滑动目前我们都已经完成，这里要讲一下之前文章中提到过得为什么指示器要单独用一个ViewGroup，其实刚开始指示器是写在一起的，但是View不管滑动到什么位置，指示器都是要在屏幕中间的，这样就会有一个小问题，在滑动中要不断矫正指示器的位置，虽然最终效果是比较和谐的，但是滑动过程中指示器会左右漂浮不定，很影响美观，所以我就将指示器写在了另外一个View中，通过自定义组合View将指示器覆盖在刻度尺上面。
Demo已托管至github：刻度尺
总结
整个刻度尺的实现可分为四部分：图像的绘制、触摸滑动、指示器的绘制、组合View，其中触摸滑动是核心点和难点，但掌握了scrollTo()和Scroller实现起来还是非常简单的，最后将刻度尺和指示器进行组合。这里吐槽一下我自己，明明就一个刻度尺确用了两个个View来实现，虽然效果看起来还不错但还是感觉比较笨重，如果哪位老兄有好的解决方案希望及时告知，在此万分感谢。另外，由于项目中用到的那个自定义刻度尺参杂了很多项目中的内容，所以不便拿出来讲解，文章中讲到的这个实例是我临时写的，为了便于描述，自定义属性我就没加进来，如果大家想用到自己的项目中适配下尺寸即可，不过我还是希望大家能够自己手动的去写，我写这篇文章的目的就是为那些不懂得同学打通思路。
说些题外话，这是我的第二篇文章，写起来如同第一篇文章一样，还是蛮吃力的，修了又修改了又改，还是感觉文章结构上存在很多问题，这样让我发现了我的很多不足，希望大家在这方面能对给与我一些指点，在此万分感谢。