android studio 绘制时钟刻度表盘的虚拟动画。

最近,为了搞一个滑动弧形的指示器,从中明白了一些关于圆盘,之类的自定义控件核心的一般做法。在此只是粗略表述一下,关于时间的表述,并不准确。
效果如下图所示。
这里写图片描述

package com.example.xxx.myapplication;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

/**
 * 表盘刻度值
 */
public class WatchView extends View {
    private String TAG = WatchView.class.getSimpleName();
    private Paint mPaintCircle;//绘制圆圈的画笔;
    private float mCircleRadius;//绘制刻度盘的半径:
    private float mCircleCenterX;//绘制圆圈的中心坐标X;
    private float mCircleCenterY;//绘制圆圈的中心坐标Y;
    private float padding = 50;//中心圆距离控件的边距;

    private Paint mPaintDegree;//绘制刻度圆盘的刻度的画笔;
    private int mDegreeCount = 24;//刻度总数;

    private Paint mTimeHourPointPaint;//绘制小时画笔;
    private float mTimeHourLength = 0;//设置时针长度;
    private float mTimeMinuteLength;//设置分钟长度;

    private float mTimeDegreeHourLength = 60;//刻度盘小时刻度长度;
    private float mTimeDegreeMintueLength = 40;//刻度盘小时刻度长度;

    private Paint mTimeMintuePointPaint;//绘制分针画笔;

    private Mythread myThread;
    private boolean startOpenThreadFlag = false;
    private int angle = 0;

    public WatchView(Context context) {
        this(context, null);
        init(null, 0);
    }

    public WatchView(Context context, AttributeSet attrs) {

        this(context, attrs, 0);
        init(attrs, 0);
    }

    public WatchView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs, defStyleAttr);
    }


    private void init(AttributeSet attrs, int defStyle) {
        //设置绘制圆的画笔颜色:
        mPaintCircle = new Paint(Paint.ANTI_ALIAS_FLAG);//给Paint加上抗锯齿标志。然后将Paint对象作为参数传给canvas的绘制方法。
//      paintCircle.setAntiAlias(true);
        mPaintCircle.setStrokeWidth(10);
        mPaintCircle.setStyle(Paint.Style.STROKE);
        mPaintCircle.setColor(Color.WHITE);

        //设置绘制刻度画笔颜色;
        mPaintDegree = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintDegree.setColor(Color.WHITE);
        mPaintDegree.setStrokeWidth(3);

        //设置时针画笔;
        mTimeHourPointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTimeHourPointPaint.setStrokeWidth(20);
        //设置分针画笔;
        mTimeMintuePointPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTimeMintuePointPaint.setStrokeWidth(10);

        if (myThread == null) {
            startOpenThreadFlag = true;
            myThread = new Mythread();
            myThread.start();

        }

    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawCircle(mCircleCenterX, mCircleCenterY, mCircleRadius, mPaintCircle);
        canvasDegree(canvas);
        canvasTimePoint(canvas);

    }

    /**
     * 绘制时针;
     *
     * @param canvas
     */
    private void canvasTimePoint(Canvas canvas) {
        canvas.save();//保存圆有的图层;
        canvas.translate(mCircleCenterX, mCircleCenterY);// 移动绘制画布圆心坐标;
        canvas.drawLine(0, 0, 120, 120, mTimeHourPointPaint);//时针;
//        angle
        float[] position = calculateMintuePosition(angle);

//        canvas.drawLine(0, 0, 120, 200, mTimeMintuePointPaint);//分针
        canvas.drawLine(0, 0, position[0], position[1], mTimeMintuePointPaint);//分针
        canvas.restore();

    }

    /**
     * 绘制刻度(表盘为例):
     */
    private void canvasDegree(Canvas canvas) {
        canvas.save();
        for (int i = 0; i < mDegreeCount; i++) {
            //区分整点与非整点
            if (i == 0 || i == 6 || i == 12 || i == 18) {
                mPaintDegree.setStrokeWidth(5);
                mPaintDegree.setTextSize(40);
                canvas.drawLine(mCircleCenterX, mCircleCenterY - mCircleCenterX + padding, mCircleCenterX, mCircleCenterY - mCircleCenterX + padding + mTimeDegreeHourLength, mPaintDegree);

                String dergree = String.valueOf(i);
                canvas.drawText(dergree,
                        mCircleCenterX - mPaintDegree.measureText(dergree) / 2,
                        mCircleCenterY - mCircleCenterX + padding + 95,
                        mPaintDegree);
            } else {
                mPaintDegree.setStrokeWidth(3);
                mPaintDegree.setTextSize(20);
                canvas.drawLine(mCircleCenterX, mCircleCenterY - mCircleCenterX + padding, mCircleCenterX, mCircleCenterY - mCircleCenterX + padding + mTimeDegreeMintueLength, mPaintDegree);
                String dergree = String.valueOf(i);
                canvas.drawText(dergree,
                        mCircleCenterX - mPaintDegree.measureText(dergree) / 2,
                        mCircleCenterY - mCircleCenterX + padding + 60,
                        mPaintDegree);
            }
            canvas.rotate(360 / mDegreeCount, mCircleCenterX, mCircleCenterY);//每次画布围绕圆心旋转的的度数。

        }


    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mCircleCenterX = getWidth() / 2;
        mCircleCenterY = getHeight() / 2;
        if (mCircleCenterX > mCircleCenterY) {
            mCircleRadius = mCircleCenterY - padding;
        } else {
            mCircleRadius = mCircleCenterX - padding;
        }
        mTimeHourLength = mCircleRadius - 2 * mTimeDegreeHourLength;
        mTimeMinuteLength = mCircleRadius - 2 * mTimeDegreeMintueLength;

    }


    /**
     * 计算分针的坐标。
     *
     * @param angle
     * @return
     */
    private float[] calculateMintuePosition(float angle) {
        float x = (float) (mTimeMinuteLength * Math.cos(Math.toRadians(angle)));
        float y = (float) (mTimeMinuteLength * Math.sin(Math.toRadians(angle)));

        return new float[]{x, y};
    }

    /**
     * 计算时针的坐标。
     *
     * @param angle
     * @return
     */
    private float[] calculateHourPosition(float angle) {
        float x = (float) (mTimeHourLength * Math.cos(Math.toRadians(angle)));
        float y = (float) (mTimeHourLength * Math.sin(Math.toRadians(angle)));
        return new float[]{x, y};
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //此时的eventX与eventY为控件的右上顶点坐标值;
        float eventX = event.getX();
        float eventY = event.getY();
        //要把触摸点的坐标原点移动到控件的中心,
        float centerEventX = event.getX() - mCircleCenterX;
        float centerEventY = event.getY() - mCircleCenterY;
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                Log.d(TAG, "eventX==" + eventX);
                Log.d(TAG, "eventY==" + eventY);
                Log.d(TAG, "centerEventX===================" + centerEventX);
                Log.d(TAG, "centerEventY===================" + centerEventY);

                break;

            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                break;
        }

        return true;
    }

    public class Mythread extends Thread {

        @Override
        public void run() {
            while (startOpenThreadFlag) {
                angle++;
                if (angle == 360) {
                    angle = 0;
                }
                postInvalidate();
                try {
                    Thread.sleep(1000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

布局文件xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.xxx.myapplication.WatchView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:layout_centerInParent="true"
        android:background="@color/colorWatch" />

</RelativeLayout>
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值