Android实现简单时钟View的方法

通过Canvas的平移与旋转简化绘图逻辑是一个非常有用的技巧，下面的时钟view就是利用这个方法完成的，省去了使用三角函数计算坐标的麻烦。

package com.example.swt369.simpleclock;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.Toast;

import java.util.Calendar;

/**
 * Created by swt369 on 2017/8/20.
 */

public class ClockView extends View {
  //时钟各个部件的长度
  private float mScaleLengthLong;
  private float mScaleLengthShort;
  private float mTickLengthHour;
  private float mTickLengthMinute;
  private float mTickLengthSecond;
  //view的宽和高
  private float mWidth;
  private float mHeight;
  //时钟半径
  private float mRadius;

  //绘制各部件时用的Paint
  private Paint mPaintScaleLong;
  private Paint mPaintScaleShort;
  private Paint mPaintOutline;
  private Paint mPaintNum;
  private Paint mPaintTickHour;
  private Paint mPaintTickMinute;
  private Paint mPaintTickSecond;

  private ViewTreeObserver.OnPreDrawListener onPreDrawListener;
  public ClockView(final Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);

    onPreDrawListener = new ViewTreeObserver.OnPreDrawListener() {
      //获取view宽高并计算各个部件的长度
      @Override
      public boolean onPreDraw() {
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
        mRadius = Math.min(mWidth,mHeight) / 2 * 0.95f;
        mScaleLengthLong = mRadius * 0.1f;
        mScaleLengthShort = mRadius * 0.05f;
        mTickLengthHour = mRadius * 0.3f;
        mTickLengthMinute = mRadius * 0.45f;
        mTickLengthSecond = mRadius * 0.6f;
        return true;
      }
    };
    getViewTreeObserver().addOnPreDrawListener(onPreDrawListener);

    //点击显示具体时间
    setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        Calendar calendar = Calendar.getInstance();
        String time = String.format("当前时间：%02d:%02d:%02d",
            calendar.get(Calendar.HOUR_OF_DAY),calendar.get(Calendar.MINUTE),calendar.get(Calendar.SECOND));
        Toast.makeText(context,time, Toast.LENGTH_SHORT).show();
      }
    });

    //初始化所有Paint对象
    initializePaints();
  }

  @Override
  protected void onDraw(Canvas canvas) {
    if(mWidth == 0 || mHeight == 0){
      return;
    }
    if(onPreDrawListener != null){
      getViewTreeObserver().removeOnPreDrawListener(onPreDrawListener);
      onPreDrawListener = null;
    }
    //绘制时钟
    drawClock(canvas);
    //一秒后重绘
    postInvalidateDelayed(1000);
  }

  private void drawClock(Canvas canvas) {
    //保存原始状态
    canvas.save();

    //将坐标系原点移到中心，并逆时针旋转90度。完成后x轴朝上。
    canvas.translate(mWidth / 2,mHeight / 2);
    canvas.rotate(-90);

    //画外围轮廓
    canvas.drawCircle(0,0,mRadius, mPaintOutline);

    //画刻度
    for(int i = 0 ; i < 12 ; i++){
      String num = String.valueOf(i == 0 ? 12 : i);
      if(i % 3 == 0){
        canvas.drawLine(mRadius,0,mRadius - mScaleLengthLong,0, mPaintScaleLong);
      }else {
        canvas.drawLine(mRadius,0,mRadius - mScaleLengthShort,0, mPaintScaleShort);
      }
      canvas.drawText(num,mRadius - mScaleLengthLong - mPaintNum.measureText(num) * 2,0, mPaintNum);

      //顺时针旋转30度
      canvas.rotate(30);
    }

    Calendar calendar = Calendar.getInstance();

    //画时针
    int hour = calendar.get(Calendar.HOUR);
    canvas.save();
    canvas.rotate(hour * 30);
    canvas.drawLine(0,0,mTickLengthHour,0,mPaintTickHour);
    canvas.restore();

    //画分针
    int minute = calendar.get(Calendar.MINUTE);
    canvas.save();
    canvas.rotate(minute * 6);
    canvas.drawLine(0,0,mTickLengthMinute,0,mPaintTickMinute);
    canvas.restore();

    //画秒针
    int second = calendar.get(Calendar.SECOND);
    canvas.save();
    canvas.rotate(second * 6);
    canvas.drawLine(0,0,mTickLengthSecond,0,mPaintTickSecond);
    canvas.restore();

    //恢复原始状态
    canvas.restore();
  }

  private void initializePaints(){
    mPaintScaleLong = new Paint();
    mPaintScaleLong.setAntiAlias(true);
    mPaintScaleLong.setStrokeWidth(5);

    mPaintScaleShort = new Paint();
    mPaintScaleShort.setAntiAlias(true);
    mPaintScaleShort.setStrokeWidth(3);

    mPaintOutline = new Paint();
    mPaintOutline.setStyle(Paint.Style.STROKE);
    mPaintOutline.setAntiAlias(true);
    mPaintOutline.setStrokeWidth(5);

    mPaintNum = new Paint();
    mPaintNum.setTextSize(30);

    mPaintTickHour = new Paint();
    mPaintTickHour.setAntiAlias(true);
    mPaintTickHour.setStrokeWidth(6);

    mPaintTickMinute = new Paint();
    mPaintTickMinute.setAntiAlias(true);
    mPaintTickMinute.setStrokeWidth(4);

    mPaintTickSecond = new Paint();
    mPaintTickSecond.setAntiAlias(true);
    mPaintTickSecond.setStrokeWidth(2);
  }
}

代码注释已经比较详细了，下面把比较重要的部分再说明一下：

//保存原始状态
canvas.save();

//省略中间部分...

//恢复原始状态
canvas.restore();

在绘图开始时调用canvas.save()，可以保存下未经任何平移、旋转操作的原始画布状态。在所有绘图工作完成后调用canvas.restore()，可以恢复到上一次保存的状态（类似进出栈的感觉）。

//将坐标系原点移到中心，并逆时针旋转90度。完成后x轴朝上。
canvas.translate(mWidth / 2,mHeight / 2);
canvas.rotate(-90);

画布的平移与旋转可能比较抽象，可以想象成坐标系的平移与旋转。调用canvas.translate(dx,dy)相当于将坐标原点向x,y方向移动了dx,dy的距离，调用canvas.rotate(degree)相当于坐标系顺时针旋转了degree°。

//画刻度
for(int i = 0 ; i < 12 ; i++){
  String num = String.valueOf(i == 0 ? 12 : i);
  if(i % 3 == 0){
    canvas.drawLine(mRadius,0,mRadius - mScaleLengthLong,0, mPaintScaleLong);
  }else {
    canvas.drawLine(mRadius,0,mRadius - mScaleLengthShort,0, mPaintScaleShort);
  }
  canvas.drawText(num,mRadius - mScaleLengthLong - mPaintNum.measureText(num) * 2,0, mPaintNum);

  //顺时针旋转30度
  canvas.rotate(30);
}

根据i值决定是画大刻度（90°的倍数）还是小刻度。每次画完一条之后将坐标系顺时针旋转30°，这样保证每次画的刻度线的坐标不变。

//一秒后重绘
postInvalidateDelayed(1000);

作用是在1000ms（1s）后再次执行View的draw流程，产生指针运动的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。