android 自定义view实现表盘效果

最新推荐文章于 2024-05-03 09:41:42 发布

zhoushenxian

最新推荐文章于 2024-05-03 09:41:42 发布

阅读量5.2k

点赞数 5

分类专栏：自定义控件

本文链接：https://blog.csdn.net/coderinchina/article/details/53056262

版权

周末没事在家想干点啥,记得一年多前面试,那公司直接发个面试题让我做,其中就有让我做一个简单的表盘效果,不过当时没做出来,所以也没好意思去面试,今天就实现下,大概分如下几步

第一步：画一个简单的圆

第二步：绘制刻度

第三步：绘制时,分,表指针

第四步：绘制当前时间文字

第五步：实现时间动态显示

第一步画一个圆是很简单的,

package com.example.clockview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.ImageView;
/**
 * Created by Adminis on 2016/11/6.
 */
public class ClockView extends ImageView {
    private static final String TAG = "ClockView";
    private Paint mPaint;
    private int widhth = 200;//控件的宽度
    private int height = 200;//控件的高度
    private int padding = 5;
    public ClockView(Context context) {
        this(context, null);
    }
    public ClockView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(widhth, height);
    }
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.parseColor("#666666"));
        mPaint.setAntiAlias(true);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        drawCircle(canvas);
    }
    /**
     * 绘制圆
     * @param canvas
     */
    private void drawCircle(Canvas canvas) {
         mPaint.setStyle(Paint.Style.STROKE);
         canvas.drawCircle(widhth/2,height/2,widhth/2-padding,mPaint);
    }
}

效果图：

第二步：绘制刻度

/**
 * 绘制刻度
 * @param canvas
 */
private void drawScale(Canvas canvas) {
    mPaint.setStyle(Paint.Style.FILL);
    canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
}

效果图：

但是我们要画类似这种图：

一起要画12个这个线,那就相当于每二根线之间的角度就是360/12=30度

分析如图：

每换完一根线后画布就旋转30度

/**
 * 绘制刻度
 * @param canvas
 */
private void drawScale(Canvas canvas) {
    mPaint.setStyle(Paint.Style.FILL);
    for(int i=0;i<12;i++){
        if(i%3==0){
 //  12  3  6  9对应的线长点
            canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 15, mPaint);
        }else{
            canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
        }
        canvas.rotate(30, widhth / 2, widhth / 2);
    }
}

效果：

刻度就是利用了canvas的rotate()旋转方法绘制上去的,但是得以圆的中心点为旋转点

第三步绘制时分表表针

这个绘制是根据当前的时间来指向的，

/**
 * 绘制时  分 表 指针
 * @param canvas
 */
private void drawPointer(Canvas canvas) {
    mCalendar = Calendar.getInstance();
    mHour = mCalendar.get(Calendar.HOUR);
    mMinuate = mCalendar.get(Calendar.MINUTE);
    mSecond = mCalendar.get(Calendar.SECOND);
    //小时的旋转度
    mDegrees = mHour*30+mMinuate/2;
    mPaint.setColor(Color.BLACK);
    canvas.save();
    canvas.rotate(mDegrees,