Android自定义View绘制闹钟

Android自定义View绘制闹钟

本文简单实现了一个闹钟，扩展View，Canvas绘制

效果如下：



代码如下：

package com.gaofeng.mobile.clock_demo;

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

import java.util.Calendar;

/**
* Created by gaofeng on 15-8-29.
*/
public class ClockView extends View {

public ClockView(Context context) {
super(context);
ringHourBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.ring);
ringMinBitmap  = BitmapFactory.decodeResource(getResources(),R.drawable.ring_min);
syncTime();
setSchedualTime(0);

}

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

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

//半径和圆中心
private static final float Radius = 200;
private static final float CenterX = 250;
private static final float CenterY = 250;

private float secondsDegree = 0;
private float minDegree = 0;
private float hourDegree = 0;

//定时
private float setHourDegree;
private float setMinDegree;
private boolean setSchedual;
private Bitmap ringHourBitmap;
private Bitmap ringMinBitmap;
private int bitmapWidth = 30,bitmapHeight = 30;

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
try {// 秒表进度
Thread.sleep(1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
setBackgroundColor(Color.GREEN);
drawCircle(canvas);
drawClockPoint(canvas);
drawIndicator(canvas);
calc();
drawSchedual(canvas);
invalidate();
}

private void drawSchedual(Canvas canvas) {
if (setSchedual) {
Paint p = new Paint();

//找到小时的坐标
float rad = (float )Math.toRadians(setHourDegree);
float x = (float) (Radius * Math.sin(rad)) ;
float y = (float) (Radius * Math.cos(rad));

float vx = CenterX + x;
float vy = CenterY - y;
//比较笨的方法解决 图片绘制在圆内。绘制都是从手机左上角开始的
if (setHourDegree > 0 && setHourDegree <= 90) {
vx = vx - bitmapWidth;
}
if (setHourDegree > 90 && setHourDegree < 180) {
vx = vx - bitmapWidth;
vy = vy - bitmapWidth;
}
if (setHourDegree > 180 && setHourDegree < 270) {
vy = vy - bitmapWidth;
}

Log.d("","Range x:" + vx + " y:" + vy);
canvas.drawBitmap(ringHourBitmap,vx ,vy ,p);

//找到分钟的坐标
rad = (float )Math.toRadians(setMinDegree);
x = (float) (Radius * Math.sin(rad)) ;
y = (float) (Radius * Math.cos(rad))  ;
vx = CenterX + x;
vy = CenterY - y;

if (setMinDegree > 0 && setMinDegree <= 90) {
vx = vx - bitmapWidth;
}
if (setMinDegree > 90 && setMinDegree < 180) {
vx = vx - bitmapWidth;
vy = vy - bitmapWidth;
}
if (setMinDegree > 180 && setMinDegree < 270) {
vy = vy - bitmapWidth;
}

canvas.drawBitmap(ringMinBitmap,vx,vy ,p);

p = null;

}
}

private void calc() {
secondsDegree = secondsDegree + 6;
if (secondsDegree >=360) { //一圈为一分钟
secondsDegree = 0;
minDegree = minDegree + 6;
}
if (minDegree >= 360) { //一圈为一个小时
minDegree = 0;
hourDegree = hourDegree + 6;
}
if (hourDegree >= 360) { //一圈还是从0度开始
hourDegree = 0;
}
}

//画圆
private void drawCircle(Canvas canvas) {

Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(2);
canvas.drawCircle(CenterX,CenterY,Radius,paint);

Paint paint2 = new Paint();
paint2.setColor(Color.YELLOW);
paint2.setStrokeWidth(15f);
canvas.drawPoint(CenterX,CenterY,paint2);

}

private void drawClockPoint(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.YELLOW);
paint.setStrokeWidth(10f);
//画出闹钟上面的刻度值，一圈一共12个点, 360度
for (float degree = 0; degree <= 330;degree = degree + 30) {
//数学公式 找圆上面的点坐标
float rad = (float )Math.toRadians(degree);//转换为度
float x = (float) (Radius * Math.sin(rad));
float y = (float) (Radius * Math.cos(rad));
canvas.drawPoint(x + CenterX, CenterY - y,paint);
}
}

//画指针,转的慢的指针越厚，默认都从0开始转
private void drawIndicator(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(3f);
//秒针
_drawLine(canvas,secondsDegree,paint);

//分针
paint.setColor(Color.DKGRAY);
paint.setStrokeWidth(6f);
_drawLine(canvas,minDegree,paint);

//时针
paint.setColor(Color.WHITE);
paint.setStrokeWidth(12f);
_drawLine(canvas,hourDegree,paint);
}

private void _drawLine(Canvas canvas,float degree,Paint paint) {
float rad = (float )Math.toRadians(degree);//转换为度
float x = (float) (Radius * Math.sin(rad));
float y = (float) (Radius * Math.cos(rad));
canvas.drawLine(CenterX, CenterY, x + CenterX, CenterY - y, paint);
}

public void setSchedualTime(long time) {
Calendar cal = Calendar.getInstance();
cal.setTimeInMillis(time);
//演示一下
int hour     = 14;
int min      = 35;
if (hour > 12) { //是24小时类型的
hour = hour - 12;
}
//计算和前面一样
setHourDegree = hour * 30;
setMinDegree  = min * 6;
setSchedual = true;
}

//和手机时间同步一下
public void syncTime() {
Calendar cal = Calendar.getInstance();
int hour     = cal.get(Calendar.HOUR_OF_DAY);
int min      = cal.get(Calendar.MINUTE);
int second   = cal.get(Calendar.SECOND);
Log.d("","Time Now Hour:" + hour + " Min:" + min + " second:" + second);

if (hour > 12) { //是24小时类型的
hour = hour - 12;
}
//计算弧度 每个步伐都是 60/360 = 6度,Hour 12/360 度
hourDegree = hour * 30;
minDegree  = min * 6;
secondsDegree = second * 6;
}

}

总结

- 没有给钟表绘制数字，这个只是画文本比较简单

- 判断定时图片是否在圆内，做的比较简单没有花太多时间去找方法

- 如果要实现能拖分时指针的 需要扩展ViewGroup