自定义View(二)自定义刻度尺

在之前的项目中有一个输入身高的需求，本来是通过一个EditText进行输入的，但是做出来后我咋看咋别扭，之前玩薄荷健康，里面有一个身高体重的选择，是通过一个刻度尺来实现的，效果还不错。但是Android中并没有为我们提供刻度尺这个View，所以就决定自定义一个出来。

我们先来看效果图

1539237371453.gif

可以通过左右滑动进行身高的选择，下面我将会详细的分析整个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<minScale){
                mCurrentScale =  minScale ;
            }
            mScrollCallback.setScale(mCurrentScale);
        }
    }

在DOWN事件中进行mScroller的动画的初始化并且记录当前X轴坐标的值。在MOVE时间中进行View的移动并且通过接口将当前刻度值进行传递。在UP事件中进行位置的矫正，矫正是通过 Scroller的startScroll()结合computeScroll()进行的。整个View的绘制以及滑动目前我们都已经完成，这里要讲一下之前文章中提到过得为什么指示器要单独用一个ViewGroup，其实刚开始指示器是写在一起的，但是View不管滑动到什么位置，指示器都是要在屏幕中间的，这样就会有一个小问题，在滑动中要不断矫正指示器的位置，虽然最终效果是比较和谐的，但是滑动过程中指示器会左右漂浮不定，很影响美观，所以我就将指示器写在了另外一个View中，通过自定义组合View将指示器覆盖在刻度尺上面。
Demo已托管至github：刻度尺

总结

整个刻度尺的实现可分为四部分：图像的绘制、触摸滑动、指示器的绘制、组合View，其中触摸滑动是核心点和难点，但掌握了scrollTo()和Scroller实现起来还是非常简单的，最后将刻度尺和指示器进行组合。这里吐槽一下我自己，明明就一个刻度尺确用了两个个View来实现，虽然效果看起来还不错但还是感觉比较笨重，如果哪位老兄有好的解决方案希望及时告知，在此万分感谢。另外，由于项目中用到的那个自定义刻度尺参杂了很多项目中的内容，所以不便拿出来讲解，文章中讲到的这个实例是我临时写的，为了便于描述，自定义属性我就没加进来，如果大家想用到自己的项目中适配下尺寸即可，不过我还是希望大家能够自己手动的去写，我写这篇文章的目的就是为那些不懂得同学打通思路。

说些题外话，这是我的第二篇文章，写起来如同第一篇文章一样，还是蛮吃力的，修了又修改了又改，还是感觉文章结构上存在很多问题，这样让我发现了我的很多不足，希望大家在这方面能对给与我一些指点，在此万分感谢。