Android自定义View，带你实现小米指南针和时钟

作者: ChaosAlaska | 来源:发表于2017-12-28 15:55 被阅读1199次

吾幼时即嗜画，家贫无从至笔墨纸砚，遂从姑苏城外寒山寺搬得红枫叶两筐。未几，吾发现红枫叶蒸包子很不错，所以现在我包的包子很好吃。

我的测试机是小米，我发现小米的指南针和钟表挺好玩的，Android画画又不花钱，所以没事就画一画呗。

先看一下效果图：

仿小米指南针：

com.gif
仿小米时钟:

oclock.gif

此篇简书我会一步一步实现小米指南针（指南针知道了时钟就很简单了）

先放一张图，以我的思路剖析一下小米指南针,下文碰到的东西都可以对照这张图帮助理解

all.jpg

1、首先我们要OnMeasure确定View的大小

经过上图分析，View大小就是：指南针整体正方形上面加一个同宽度的字体矩形
代码如下：

 @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        width = Math.min(widthSize, heightSize);
        if (widthMode == MeasureSpec.UNSPECIFIED) {
            width = heightSize;
        } else if (heightMode == MeasureSpec.UNSPECIFIED) {
            width = widthSize;
        }
        //为指南针上面的文字预留空间，定为1/3边张
        mTextHeight = width/3;
        //设置圆心点坐标
        mCenterX = width/2;
        mCenterY = width/2+mTextHeight;
        //外部圆的外径
        mOutSideRadius = width*3/8;
        //外接圆的半径
        mCircumRadius = mOutSideRadius*4/5;
        //camera最大平移距离
        mMaxCameraTranslate = 0.02f*mOutSideRadius;
        //View布局大小
        setMeasuredDimension(width, width+width/3 );
    }

2、画指南针上面的文字。

（1）我们用SensorManager，配合SensorEventListener获取到当前手机方位,拿到View的实例，把对应访问参数set给View

chaosCompassView = (ChaosCompassView) findViewById(R.id.ccv);
        mSensorManager = (SensorManager) getSystemService(SENSOR_SERVICE);
        mSensorEventListener = new SensorEventListener() {
            @Override
            public void onSensorChanged(SensorEvent event) {
                val = event.values[0];
                //给View方位值
                chaosCompassView.setVal(val);
            }

            @Override
            public void onAccuracyChanged(Sensor sensor, int accuracy) {

            }
        };

        mSensorManager.registerListener(mSensorEventListener,mSensorManager.getDefaultSensor(Sensor.TYPE_ORIENTATION),
                SensorManager.SENSOR_DELAY_GAME);

（3）根据方位值，我们可以大体确认文字的具体值，通过观察小米原声指南针，我把方位大体定义如下图所示：

fangwei.png

（3）确定字体位置居中
我们要用Paint.getTextBounds方法来确认字体外接矩形的大小，然后求出字体的宽度，让字体在对应坐标居中显示，字体还涉及到基准线，配合一张图理解。

text.png
（4）绘制文字相关代码代码

private void drawText() {
        if (val<=15||val>=345){
            text = "北";
        }else if (val>15&&val<=75){
            text= "东北";
        }else if (val>75&&val<=105){
            text= "东";
        }else if (val>105&&val<=165){
            text="东南";
        }else if (val>165&&val<=195){
            text = "南";
        }else if (val>195&&val<=255){
            text = "西南";
        }else if (val>255&&val<=285){
            text = "西";
        }else if (val>285&&val<345){
            text="西北";
        }

        mTextPaint.getTextBounds(text,0,text.length(),mTextRect);
        //文字宽度
        int mTextWidth = mTextRect.width();
        //让文字水平居中显示
        mCanvas.drawText(text,width/2-mTextWidth/2,mTextHeight/2,mTextPaint);

    }

3、画指南针外层圆弧和三角形。

（1）确定好小三角形顶点坐标，然后根据初中数学，算出其余坐标，用Path封闭一个三角型就好。
（2）剩下是画四个圆弧，直接贴代码了

/**
     * 指南针外部可简单分为两部分
     * 1、用Path实现小三角形
     * 2、两个圆弧
     */
    private void drawCompassOutSide() {
        mCanvas.save();
        //小三角形的高度
        int mTriangleHeight=40;
        //定义Path画小三角形
        mOutsideTriangle.moveTo(width/2,mTextHeight-mTriangleHeight);
        //小三角形的边长
        float mTriangleSide = 46.18f;
        //画出小三角形
        mOutsideTriangle.lineTo(width/2-mTriangleSide/2,mTextHeight);
        mOutsideTriangle.lineTo(width/2+mTriangleSide/2,mTextHeight);
        mOutsideTriangle.close();
        mCanvas.drawPath(mOutsideTriangle,mOutSideCircumPaint);

        //画圆弧
        mDarkRedPaint.setStrokeWidth((float) 5);
        mLightGrayPaint.setStrokeWidth((float)5);
        mDeepGrayPaint.setStrokeWidth((float)3);
        mLightGrayPaint.setStyle(Paint.Style.STROKE);
        mCanvas.drawArc(width/2-mOutSideRadius,mTextHeight,width/2+mOutSideRadius,mTextHeight+mOutSideRadius*2,-80,120,false,mLightGrayPaint);
        mCanvas.drawArc(width/2-mOutSideRadius,mTextHeight,width/2+mOutSideRadius,mTextHeight+mOutSideRadius*2,40,20,false,mDeepGrayPaint);
        mCanvas.drawArc(width/2-mOutSideRadius,mTextHeight,width/2+mOutSideRadius,mTextHeight+mOutSideRadius*2,-100,-20,false,mLightGrayPaint);
        mCanvas.drawArc(width/2-mOutSideRadius,mTextHeight,width/2+mOutSideRadius,mTextHeight+mOutSideRadius*2,-120,-120,false,mDarkRedPaint);
        mCanvas.restore();
    }

到此外部分的处理我们就完事了，应该是这个样子：

ne.png

4、画指南针内层圆弧和三角形。

(1) 红色的三角形会跟踪方位值大小移动。所以旋转画布实现跟踪

  //参数：  方位值，圆心X，圆心Y
    mCanvas.rotate(-val,width/2,mOutSideRadius+mTextHeight);

道理和外层都是一样的直接贴代码了：

/**
     * 指南针外接圆，和外部圆换道理差不多
     */
    private void drawCompassCircum() {
        mCanvas.save();
        //外接圆小三角形的高度
        int mTriangleHeight=(mOutSideRadius-mCircumRadius)/2;

        mCanvas.rotate(-val,width/2,mOutSideRadius+mTextHeight);
        mCircumTriangle.moveTo(width/2,mTriangleHeight+mTextHeight);
        //内接三角形的边长,简单数学运算
        float mTriangleSide = (float) ((mTriangleHeight/(Math.sqrt(3)))*2);
        mCircumTriangle.lineTo(width/2-mTriangleSide/2,mTextHeight+mTriangleHeight*2);
        mCircumTriangle.lineTo(width/2+mTriangleSide/2,mTextHeight+mTriangleHeight*2);
        mCircumTriangle.close();
        mCanvas.drawPath(mCircumTriangle,mCircumPaint);
        mCanvas.drawArc(width/2-mCircumRadius,mTextHeight+mOutSideRadius-mCircumRadius,
                width/2+mCircumRadius,mTextHeight+mOutSideRadius+mCircumRadius,-85,350,false,mDeepGrayPaint);
        mAnglePaint.setStrokeWidth(5f);
        //这里需要注意的是，对比原声 左右的红色弧线方向会不一样
        if (val<=180){
            valCompare = val;
            mCanvas.drawArc(width/2-mCircumRadius,mTextHeight+mOutSideRadius-mCircumRadius,
                    width/2+mCircumRadius,mTextHeight+mOutSideRadius+mCircumRadius,-85,valCompare,false,mAnglePaint);
        }else{
            valCompare = 360-val;
            mCanvas.drawArc(width/2-mCircumRadius,mTextHeight+mOutSideRadius-mCircumRadius,
                    width/2+mCircumRadius,mTextHeight+mOutSideRadius+mCircumRadius,-95,-valCompare,false,mAnglePaint);
        }

        mCanvas.restore();
    }

效果图：

new.png

5、画指南针内心，颜色辐射渐变的圆。

（1）用RadialGradient实现辐射渐变
构造方法：
RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor, TileMode tileMode)。

参数：
centerX centerY：辐射中心的坐标
radius：辐射半径
centerColor：辐射中心的颜色
edgeColor：辐射边缘的颜色
tileMode：辐射范围之外的着色模式。

代码如下

 private void drawInnerCricle() {

        mInnerShader = new RadialGradient(width/2,mOutSideRadius+mTextHeight,mCircumRadius-40, Color.parseColor("#323232"),
                Color.parseColor("#000000"),Shader.TileMode.CLAMP);
        mInnerPaint.setShader(mInnerShader);
        mCanvas.drawCircle(width/2,mOutSideRadius+mTextHeight,mCircumRadius-40,mInnerPaint);

    }

对应效果：

jianbian.png

6、画指南针刻度表盘和圆心数字。

（1）为了让 N E S W 完全居中，我连W都给他单独设置了一个矩阵。。。毕竟很宽。。
（2）表盘的N 也是追随方位值移动的，注意移动画布就行
（3）圆心数字值就是方位值的整形。
这块主要也是算坐标，没什么难度，仔细就行。

//刻度
 private void drawCompassDegreeScale() {
        mCanvas.save();
        //获取N文字的宽度
        mNorthPaint.getTextBounds("N",0,1,mPositionRect);
        int mPositionTextWidth = mPositionRect.width();
        int mPositionTextHeight = mPositionRect.height();
        //获取W文字宽度,因为W比较宽 所以要单独获取
        mNorthPaint.getTextBounds("W",0,1,mPositionRect);
        int mWPositionTextWidth = mPositionRect.width();
        int mWPositionTextHeight = mPositionRect.height();
        //获取小刻度，两位数的宽度
        mSamllDegreePaint.getTextBounds("30",0,1,mSencondRect);
        int mSencondTextWidth = mSencondRect.width();
        int mSencondTextHeight = mSencondRect.height();
        //获取小刻度，3位数的宽度
        mSamllDegreePaint.getTextBounds("30",0,1,mThirdRect);
        int mThirdTextWidth = mThirdRect.width();
        int mThirdTextHeight = mThirdRect.height();

        mCanvas.rotate(-val,width/2,mOutSideRadius+mTextHeight);


        //画刻度线
        for (int i = 0; i < 240; i++) {

            if (i==0||i==60||i==120||i==180){
                mCanvas.drawLine(getWidth() / 2, mTextHeight+mOutSideRadius-mCircumRadius+10,
                        getWidth() / 2,  mTextHeight+mOutSideRadius-mCircumRadius+30, mDeepGrayPaint);
            }else{
                mCanvas.drawLine(getWidth() / 2, mTextHeight+mOutSideRadius-mCircumRadius+10,
                        getWidth() / 2,  mTextHeight+mOutSideRadius-mCircumRadius+30, mLightGrayPaint);
            }
            if (i==0){
                mCanvas.drawText("N", this.width /2-mPositionTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mPositionTextHeight,mNorthPaint);
            }else if (i==60){
                mCanvas.drawText("E", this.width /2-mPositionTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mPositionTextHeight,mOthersPaint);
            }else if (i==120){
                mCanvas.drawText("S", this.width /2-mPositionTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mPositionTextHeight,mOthersPaint);
            }else if (i==180){
                mCanvas.drawText("W", this.width /2-mWPositionTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mWPositionTextHeight,mOthersPaint);
            }else if (i==20){
                mCanvas.drawText("30", this.width /2-mSencondTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mSencondTextHeight,mSamllDegreePaint);
            }else if (i==40){
                mCanvas.drawText("60", this.width /2-mSencondTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mSencondTextHeight,mSamllDegreePaint);
            }else if (i==80){
                mCanvas.drawText("120", this.width /2-mThirdTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mThirdTextHeight,mSamllDegreePaint);
            }else if (i==100){
                mCanvas.drawText("150", this.width /2-mThirdTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mThirdTextHeight,mSamllDegreePaint);
            }else if (i==140){
                mCanvas.drawText("210", this.width /2-mThirdTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mThirdTextHeight,mSamllDegreePaint);
            }else if (i==160){
                mCanvas.drawText("240", this.width /2-mThirdTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mThirdTextHeight,mSamllDegreePaint);
            }else if (i==200){
                mCanvas.drawText("300", this.width /2-mThirdTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mThirdTextHeight,mSamllDegreePaint);
            }else if (i==220){
                mCanvas.drawText("330", this.width /2-mThirdTextWidth/2,mTextHeight+mOutSideRadius-mCircumRadius+40+mThirdTextHeight,mSamllDegreePaint);
            }
            mCanvas.rotate(1.5f, mCenterX, mOutSideRadius+mTextHeight);
        }
        mCanvas.restore();

    }

中心文字

 private void drawCenterText() {
        String centerText=String.valueOf((int) val+"°");
        mCenterPaint.getTextBounds(centerText,0,centerText.length(),mCenterTextRect);
        int centerTextWidth = mCenterTextRect.width();
        int centerTextHeight = mCenterTextRect.height();
        mCanvas.drawText(centerText,width/2-centerTextWidth/2,mTextHeight+mOutSideRadius+centerTextHeight/5,mCenterPaint);

    }

效果图：

fina.png

其实做到这里，指南针的功能和View就已经画完了。

接下来我们要做点击动画和Camera实现3D效果

7、通过Camera实现3D效果。

（1）当手指触摸View的时候，通过getX和getY方法得到触摸点，然后通过定义比例值，得到Camera的旋转大小和平移大小。然后在手指抬起时，通过属性动画让View复原。

（2）使用 Matrix 来做自定义变换
Camera默认旋转是View左上角为旋转中心，所以要我们需要定义Matrix来改变旋转中心。要不扭曲的太夸张了。

camera的设置

 /**
     * 设置camera相关
     */
    private void set3DMetrix() {
        mCameraMatrix.reset();
        mCamera.save();
        mCamera.rotateX(mCameraRotateX);
        mCamera.rotateY(mCameraRotateY);
        mCamera.getMatrix(mCameraMatrix);
        mCamera.restore();
        //camera默认旋转是View左上角为旋转中心
        //所以动作之前要，设置矩阵位置 -mTextHeight-mOutSideRadius
        mCameraMatrix.preTranslate(-getWidth()/2,-getHeight()/2);
        //动作之后恢复位置
        mCameraMatrix.postTranslate(getWidth()/2,getHeight()/2);
        //基于 Canvas 当前的变换，叠加上 Matrix 中的变换。
        mCanvas.concat(mCameraMatrix);
    }

onTouchEvent

  @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                if (mValueAnimator!=null&&mValueAnimator.isRunning()){
                    mValueAnimator.cancel();
                }
                //3D 效果让Camera旋转,获取旋转偏移大小
                getCameraRotate(event);
                //获取平移大小
                getCameraTranslate(event);
                break;
            case MotionEvent.ACTION_MOVE:
                //3D 效果让Camera旋转,获取旋转偏移大小
                getCameraRotate(event);
                //获取平移大小
                getCameraTranslate(event);
                break;
            case MotionEvent.ACTION_UP:
                //松开手 复原动画
                startRestore();
                break;
        }
        return true;

    }

获取对应比例

/**
     * 获取Camera，平移大小
     * @param event
     */
    private void getCameraTranslate(MotionEvent event) {
        float translateX = (event.getX() - getWidth() / 2);
        float translateY = (event.getY() - getHeight()/2);
        //求出此时位移的大小与半径之比
        float[] percentArr = getPercent(translateX, translateY);
        //最终位移的大小按比例匀称改变
        mCameraTranslateX = percentArr[0] * mMaxCameraTranslate;
        mCameraTranslateY = percentArr[1] * mMaxCameraTranslate;
    }

    /**
     * 让Camera旋转,获取旋转偏移大小
     * @param event
     */
    private void getCameraRotate(MotionEvent event) {
        float mRotateX = -(event.getY()-(getHeight())/2);
        float mRotateY = (event.getX()-getWidth()/2);
        //求出旋转大小与半径之比
        float[] percentArr = getPercent(mRotateX,mRotateY);
        mCameraRotateX = percentArr[0]*mMaxCameraRotate;
        mCameraRotateY = percentArr[1]*mMaxCameraRotate;
    }

    /**
     * 获取比例
     * @param mCameraRotateX
     * @param mCameraRotateY
     * @return
     */
    private float[] getPercent(float mCameraRotateX, float mCameraRotateY) {
        float[] percentArr = new float[2];
        float percentX = mCameraRotateX/width;
        float percentY = mCameraRotateY/width;
        //处理一下比例值
        if (percentX > 1) {
            percentX = 1;
        } else if (percentX < -1) {
            percentX = -1;
        }
        if (percentY > 1) {
            percentY = 1;
        } else if (percentY < -1) {
            percentY = -1;
        }
        percentArr[0] = percentX;
        percentArr[1] = percentY;
        return percentArr;
    }

View复原的属性动画

private void startRestore() {
        final String cameraRotateXName = "cameraRotateX";
        final String cameraRotateYName = "cameraRotateY";
        final String canvasTranslateXName = "canvasTranslateX";
        final String canvasTranslateYName = "canvasTranslateY";
        PropertyValuesHolder cameraRotateXHolder =
                PropertyValuesHolder.ofFloat(cameraRotateXName, mCameraRotateX, 0);
        PropertyValuesHolder cameraRotateYHolder =
                PropertyValuesHolder.ofFloat(cameraRotateYName, mCameraRotateY, 0);
        PropertyValuesHolder canvasTranslateXHolder =
                PropertyValuesHolder.ofFloat(canvasTranslateXName, mCameraTranslateX, 0);
        PropertyValuesHolder canvasTranslateYHolder =
                PropertyValuesHolder.ofFloat(canvasTranslateYName, mCameraTranslateY, 0);
        mValueAnimator = ValueAnimator.ofPropertyValuesHolder(cameraRotateXHolder,
                cameraRotateYHolder, canvasTranslateXHolder, canvasTranslateYHolder);
        mValueAnimator.setInterpolator(new TimeInterpolator() {
            @Override
            public float getInterpolation(float input) {
                float f = 0.571429f;
                return (float) (Math.pow(2, -2 * input) * Math.sin((input - f / 4) * (2 * Math.PI) / f) + 1);
            }
        });
        mValueAnimator.setDuration(1000);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mCameraRotateX = (float) animation.getAnimatedValue(cameraRotateXName);
                mCameraRotateY = (float) animation.getAnimatedValue(cameraRotateYName);
                mCameraTranslateX = (float) animation.getAnimatedValue(canvasTranslateXName);
                mCameraTranslateX = (float) animation.getAnimatedValue(canvasTranslateYName);
            }
        });
        mValueAnimator.start();
    }

总结

到此指南针的View就完事了，可能是因为绘制量比较大，View时间长了会出现卡顿现象，以后会慢慢完善。

大家如果有什么感兴趣的自定义View可以在下方留言，我抽空会做一些我也感兴趣的。

项目源码链接：

仿小米指南针和时钟

如果您觉得喜欢，请给我一个Star。

网友评论

雪味伦调:能否解释一下恢复动画的插值器是怎么写的?
float f = 0.571429f;
return (float) (Math.pow(2, -2 * input) * Math.sin((input - f / 4) * (2 * Math.PI) / f) + 1);
a85b8185219d:画刻度时，写两位数、三位数的宽度时，笔误写错了吧。
付华_thedis:mCameraTranslateX 在复原动画里面定义了两次

应该一个是mCameraTranslateY？
ChaosAlaska:@付华_thedis 是的，写的时候笔误。
绳_:大佬原先我看 Camera 做3d效果时要用canvas.translate调整视角。这怎么移动我一直不明白大佬能说说吗
ChaosAlaska:@绳_ 是扔物线哦
绳_:@ChaosAlaska camera我原先看抛物线说的自定义view 好像用法有些不一样。周末详细研究下大佬源码用法
ChaosAlaska:你说的平移画布和Camera的3D效果关联不大吧，我是用Camera设置rotateX和rotateY来设置绕x和y轴旋转的角度，并且设置Matrix来确认旋转的中心点。
N1eR:牛批呀马飞

Android自定义View，带你实现小米指南针和时钟

先看一下效果图：

此篇简书我会一步一步实现小米指南针（指南针知道了时钟就很简单了）

先放一张图，以我的思路剖析一下小米指南针,下文碰到的东西都可以对照这张图帮助理解

1、首先我们要OnMeasure确定View的大小

2、画指南针上面的文字。

3、画指南针外层圆弧和三角形。

4、画指南针内层圆弧和三角形。

5、画指南针内心，颜色辐射渐变的圆。

6、画指南针刻度表盘和圆心数字。

7、通过Camera实现3D效果。

总结

项目源码链接：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android技术