自定义View 手表表盘

最近想好好看下自定义View,有趣使用,下面是在学习别人代码的基础上写出来的一个View。

package com.example.xxiang1x.teststudio;

import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Build;
import android.os.Handler;
import android.os.Looper;
import android.util.AttributeSet;
import android.view.View;

import java.util.Calendar;
import java.util.GregorianCalendar;

/**
 * 手表表盘
 */
public class WatchView extends View {

    //create some variables
    /**
     * 分针画笔
     */
    private Paint minPaint;
    /**
     * 秒针画笔
     */
    private Paint secondPaint;
    /**
     * 时针画笔
     */
    private Paint hourPaint;
    /**
     * 表盘外轮廓画笔
     */
    private Paint circlePaint;
    /**
     * 表盘文字的画笔
     */
    private Paint textPaint;
    /**
     * 表盘内短线画笔
     */
    private Paint linePaint;

    //width and height
    /**
     * View的宽
     */
    private int mWidth;
    /**
     * View的高
     */
    private int mHeight;

    private static final double ROUND = 2d * Math.PI;

    private static final double QUARTER = 1d / 4d;

    private Handler mHandler = new Handler(Looper.getMainLooper());

    private Calendar calendar = new GregorianCalendar();

    public WatchView(Context context) {
        super(context);
    }

    public WatchView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    /**
     * 创建所有的paint
     */
    private void initPaint() {

        minPaint = getAvailablePaint(Color.BLUE, 0, 15, Paint.Style.FILL_AND_STROKE);
        secondPaint = getAvailablePaint(Color.RED, 0, 15, Paint.Style.FILL_AND_STROKE);
        hourPaint = getAvailablePaint(Color.GRAY, 0, 15, Paint.Style.FILL_AND_STROKE);
        circlePaint = getAvailablePaint(Color.GRAY, 5, 10, Paint.Style.STROKE);
        textPaint = getAvailablePaint(Color.GRAY, 45, 3, Paint.Style.FILL);
        linePaint = getAvailablePaint(Color.GRAY, 45, 3, Paint.Style.FILL);

    }

    /**
     * get a paint by ur request.
     *
     * @param color
     * @param textSize
     * @param strockWidth
     * @param style
     * @return
     */
    private Paint getAvailablePaint(int color, int textSize, int strockWidth, Paint.Style style) {

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FAKE_BOLD_TEXT_FLAG);
        paint.setAntiAlias(true);
        paint.setTextSize(textSize);
        paint.setAlpha(1);
        paint.setColor(color);
        paint.setStyle(style);
        paint.setStrokeWidth(strockWidth);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setTextAlign(Paint.Align.CENTER);
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setDither(true);//设置图像抖动处理
        paint.setStrokeJoin(Paint.Join.ROUND);//画笔线等连接处的轮廓样式
        paint.setSubpixelText(true);

        return paint;
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public WatchView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //获取圆心坐标
        int x = mWidth / 2;
        int y = mHeight / 2;

        //半径
        int radius = Math.min(x, y) - 10;
        // 为了让秒针连续转动,所以秒针的角度肯定不是从「秒」这个整数里来
        // 刚好秒针走一圈是 1 分钟,那么,就用分乘以「一圈(2π)」就是秒针要走的弧度数了

        float millis = calendar.get(Calendar.MILLISECOND) / 1000f;
        float second = (calendar.get(Calendar.SECOND) + millis) / 60f;
        float minute = (calendar.get(Calendar.MINUTE) + second) / 60f;
        float hour = (calendar.get(Calendar.HOUR) + minute) / 12f;

        drawHand(canvas, hourPaint, x, y, radius * 0.5f, hour);
        drawHand(canvas, minPaint, x, y, radius * 0.6f, minute);
        drawHand(canvas, secondPaint, x, y, radius * 0.7f, second);
        //draw the hour line .
        drawHourNumbers(canvas, textPaint, mWidth, mHeight);
        //draw the minutes line .
        drawMinuteLine(canvas, linePaint, mWidth, mHeight);
        //draw outer circle
        circlePaint.setColor(Color.GRAY);
        canvas.drawCircle(x, y, radius, circlePaint);
        //draw center point
        circlePaint.setColor(Color.YELLOW);
        canvas.drawCircle(x, y, 3, circlePaint);
    }

    /**
     * 画小时的线
     *
     * @param canvas
     * @param paint
     * @param width
     * @param height
     */
    private void drawHourNumbers(Canvas canvas, Paint paint, int width, int height) {

        //12个小时,12条线。
        for (int i = 1; i < 13; i++) {

            canvas.save(); //save current state of canvas.
            canvas.rotate(360 / 12 * i, width / 2, height / 2);
            //绘制表盘
            canvas.drawLine(width / 2, height / 2 - (width / 2 - 20), width / 2, height / 2 - width / 2 + 40, paint);
            //绘制文字
            canvas.drawText("" + i, width / 2, height / 2 - width / 2 + 80, paint);
            //恢复开始位置
            canvas.restore();

        }
    }

    /**
     * 画分钟的线
     * 
     * @param canvas
     * @param paint
     * @param width
     * @param height
     */
    private void drawMinuteLine(Canvas canvas, Paint paint, int width, int height) {

        //一共分出来有60条线
        for (int i = 1; i < 61; i++) {

            canvas.save(); //save current state of canvas.
            canvas.rotate(360 / 12 / 5 * i, width / 2, height / 2);
            //绘制表盘
            canvas.drawLine(width / 2, height / 2 - (width / 2 - 20), width / 2, height / 2 - width / 2 + 30, paint);
            //恢复开始位置
            canvas.restore();

        }

    }

    /**
     * @param canvas
     * @param paint
     * @param x
     * @param y
     * @param length
     * @param round
     */
    private void drawHand(Canvas canvas, Paint paint, float x, float y, float length, float round) {
        // 三角函数的坐标轴是以 3 点方向为 0 的,所以记得要减去四分之一个圆周哦
        double radians = (round - QUARTER) * ROUND;

        canvas.drawLine(
                x,
                y,
                x + (float) Math.cos(radians) * length,
                y + (float) Math.sin(radians) * length,
                paint);
    }


    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();
        mHandler.post(r);
    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        mHandler.removeCallbacksAndMessages(null);//remove all of the messages.
    }

//子线程+handler不断更新View
    Runnable r = new Runnable() {
        @Override
        public void run() {

            calendar.setTimeInMillis(System.currentTimeMillis());
            invalidate();
            mHandler.postDelayed(this, 1000 / 60);

        }
    };

    /**
     * 获取宽和高
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取View的宽高。
        mWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
        mHeight = getDefaultSize(getSuggestedMinimumWidth(), heightMeasureSpec);

    }
}

擦,在studio的模拟器上面好多了。在genymotion模拟器上比较模糊。

《自定义View 手表表盘》 Screen Shot 2016-04-08 at 4.36.48 PM.png

《自定义View 手表表盘》 Screen Shot 2016-04-08 at 3.39.40 PM.png

    原文作者:RicoX2016
    原文地址: https://www.jianshu.com/p/db6d25c809d3
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞