Android 放图片背景的时钟

自定义View 时钟：可以用画布和画笔直接画时钟画刻度，画指针，但是，效果不是很好看，这篇文章主要介绍，两种采用背景图设置的时钟，包括表盘，指针，都是图片。

效果图：

      

                       


代码：

需要注意的是，指针放的位置，是根据指针图片资源而设置的，一定要注意，指针上得红点是在中心位置的，

放图片资源，有两种方法，

一种是：canvas.drawBitmap（）这种方法只需确定图片的  左边和上边两个位置就好

第二种：dial.setBounds () 这种方法需要确定图片上下左右四边位置，画边界线

指针的旋转角度，逻辑都一样，都是先把指针放在零点方向，就是12点位置，然后根据时间算角度

最后是采用Handler 每隔一秒重新绘制时钟。。。。。。

View  1：

/**
* Created by Megan on 16/3/29.
*/
public class ClockView extends View {

//时钟图片
private Bitmap mClock;
//时
private Bitmap mHourHand;
//分
private Bitmap mMinuteHand;
//秒
private Bitmap mSecondHand;

private Calendar mCalendar;
public static final int NEED_INVALIDATE = 0X23;

//每隔一秒，在handler中调用一次重新绘制方法
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {

switch (msg.what) {
case NEED_INVALIDATE:
mCalendar = Calendar.getInstance();
invalidate();//告诉UI主线程重新绘制
handler.sendEmptyMessageDelayed(NEED_INVALIDATE, 1000);
break;
default:
break;
}
}
};

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

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

mCalendar = Calendar.getInstance();
Resources r = this.getContext().getResources();

/**
* 资源图片读取
*/
mClock = BitmapFactory.decodeResource(r, R.drawable.clock_dial);
mHourHand = BitmapFactory.decodeResource(r, R.drawable.clock_hour);
mMinuteHand = BitmapFactory.decodeResource(r, R.drawable.clock_minute);
mSecondHand = BitmapFactory.decodeResource(r, R.drawable.clock_second);
handler.sendEmptyMessage(NEED_INVALIDATE);//向handler发送一个消息，让它开启重绘
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int minute = mCalendar.get(Calendar.MINUTE);//得到当前分钟数
int hour = mCalendar.get(Calendar.HOUR);//得到当前小时数
int sec = mCalendar.get(Calendar.SECOND);//得到当前秒数
Paint paint = new Paint();
// TODO 时钟背景图
canvas.drawBitmap(mClock, getWidth() / 2 - mClock.getWidth() / 2, getHeight() / 2 - mClock.getWidth() / 2, paint);
canvas.save();//保存当前画布
canvas.restore();

// TODO 时针
float hourDegree = (hour * 60 + minute) / 12f / 60 * 360;//得到时钟旋转的角度
canvas.save();
canvas.rotate(hourDegree, getWidth() / 2, getHeight() / 2);
canvas.drawBitmap(mHourHand, getWidth() / 2-mHourHand.getWidth()/2, getHeight() / 2-mHourHand.getHeight()/2, paint);
canvas.restore();

// TODO 分针
float minuteDegree = minute / 60f * 360;//得到分针旋转的角度
canvas.save();
canvas.rotate(minuteDegree, getWidth() / 2, getHeight() / 2);
canvas.drawBitmap(mMinuteHand, getWidth()/2-mMinuteHand.getWidth()/2, getHeight()/2-mMinuteHand.getHeight()/2, paint);
canvas.restore();

// TODO 秒针
float secDegree = sec / 60f * 360;//得到秒针旋转的角度
canvas.save();
canvas.rotate(secDegree, getWidth() / 2, getHeight() / 2);
canvas.drawBitmap(mSecondHand, getWidth() / 2-mSecondHand.getWidth()/2, getHeight() / 2-mSecondHand.getHeight()/2, paint);
canvas.restore();

}
}

View 2：

/**
* Created by Megan on 16/3/31.
*/
public class TimeView extends View {
private static String TAG = "AbAnalogClock";
private Drawable mHourHand;
private Drawable mMinuteHand;
private Drawable mSecondHand;
private Drawable mDial;
private Calendar mCalendar;
public static final int NEED_INVALIDATE = 0X23;
private Handler handler = new Handler(){
@Override
public void handleMessage(Message msg) {
switch (msg.what) {
case NEED_INVALIDATE:
mCalendar = Calendar.getInstance();
invalidate();//告诉UI主线程重新绘制
handler.sendEmptyMessageDelayed(NEED_INVALIDATE, 1000);
break;
default:
break;
}

}
};

public TimeView(Context context, AttributeSet attrs) {
super(context);
mDial = this.getContext().getResources().getDrawable(R.drawable.clock_dial);
mHourHand = this.getContext().getResources().getDrawable(R.drawable.clock_hour);
mMinuteHand = this.getContext().getResources().getDrawable(R.drawable.clock_minute);
mSecondHand = this.getContext().getResources().getDrawable(R.drawable.clock_second);
mCalendar = Calendar.getInstance();
handler.sendEmptyMessage(NEED_INVALIDATE);//向handler发送一个消息，让它开启重绘
}

protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int minute = mCalendar.get(Calendar.MINUTE);//得到当前分钟数
int hour = mCalendar.get(Calendar.HOUR);//得到当前小时数
int sec = mCalendar.get(Calendar.SECOND);//得到当前秒数

int availableWidth = this.getRight() - this.getLeft();
int availableHeight = this.getBottom() - this.getTop();
int x = availableWidth / 2;
int y = availableHeight / 2;
Drawable dial = this.mDial;
int w = dial.getIntrinsicWidth();
int h = dial.getIntrinsicHeight();

// TODO 时钟背景图
if (availableWidth < w || availableHeight < h) {
float hourHand = Math.min((float) availableWidth / (float) w, (float) availableHeight / (float) h);
canvas.save();
canvas.scale(hourHand, hourHand, (float) x, (float) y);
}
dial.setBounds(x - w / 2, y - h / 2, x + w / 2, y + h / 2);
dial.draw(canvas);

// TODO 时针
canvas.save();
canvas.rotate((hour * 60.0F + minute) /12 /60 * 360.0F, (float) x, (float) y);
Drawable hourHand1 = this.mHourHand;
w = hourHand1.getIntrinsicWidth();
h = hourHand1.getIntrinsicHeight();
hourHand1.setBounds(x - w / 2, y - h / 2, x + w / 2, y + h / 2);
hourHand1.draw(canvas);
canvas.restore();

// TODO 分针
canvas.save();
canvas.rotate(minute / 60.0F * 360.0F, (float) x, (float) y);
Drawable minuteHand = this.mMinuteHand;
w = minuteHand.getIntrinsicWidth();
h = minuteHand.getIntrinsicHeight();
minuteHand.setBounds(x - w / 2, y - h / 2, x + w / 2, y + h / 2);
minuteHand.draw(canvas);
canvas.restore();

// TODO 秒针
canvas.save();
canvas.rotate(sec / 60.0F * 360.0F, (float) x, (float) y);
Drawable secondHand = this.mSecondHand;
w = secondHand.getIntrinsicWidth();
h = secondHand.getIntrinsicHeight();
secondHand.setBounds(x - w / 2, y - h / 2, x + w / 2, y + h / 2);
secondHand.draw(canvas);
canvas.restore();

}

}


源码：http://download.csdn.net/detail/qq55214/9479400