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

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

我们先来看效果图


自定义View(二)自定义刻度尺_第1张图片
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

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

总结

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

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

你可能感兴趣的:(自定义View(二)自定义刻度尺)