自定義View 手表表盤

最近想好好看下自定義View,有趣使用,下面是在學(xué)習(xí)別人代碼的基礎(chǔ)上寫出來的一個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;
    /**
     * 表盤內(nèi)短線畫筆
     */
    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();
    }

    /**
     * 創(chuàng)建所有的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);//設(shè)置圖像抖動處理
        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);

        //獲取圓心坐標(biāo)
        int x = mWidth / 2;
        int y = mHeight / 2;

        //半徑
        int radius = Math.min(x, y) - 10;
        // 為了讓秒針連續(xù)轉(zhuǎn)動,所以秒針的角度肯定不是從「秒」這個整數(shù)里來
        // 剛好秒針走一圈是 1 分鐘,那么,就用分乘以「一圈(2π)」就是秒針要走的弧度數(shù)了

        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);
            //恢復(fù)開始位置
            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);
            //恢復(fù)開始位置
            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) {
        // 三角函數(shù)的坐標(biāo)軸是以 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模擬器上比較模糊。


Screen Shot 2016-04-08 at 4.36.48 PM.png

Screen Shot 2016-04-08 at 3.39.40 PM.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容