今天项目中有一个显示钟表功能模块,美工比较懒说表盘比较简单可以自己画一个。于是我就回想起当初制作过一个自定义表盘可以直接CP过来用的。哈哈哈哈~鉴此必须记录下这CP大法的时刻,先上一个比较粗糙的效果图:
接下来就是制作过程了,话不多说,直接上代码,注释也比较清楚:
1.先创建一个CustomClock类用来画表盘,时针、分针、秒针、刻度等
public class CustomClock extends View{
private Paint mPaint;
//半径
private int r = 200;
private int kedu = 20;
private Paint textPaint;
//时针分针秒针长度
private int hourLength = 90;
private int minLength = 130;
private int secLength = 170;
private int hour;
private int min;
private int sec;
//时间
private String time;
private Paint mPaint1;
public CustomClock(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();
getTime();
autoRefresh();
}
private void initPaint(){
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.BLACK);
mPaint.setStrokeWidth(20);
mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint1.setStyle(Paint.Style.FILL);
mPaint1.setColor(Color.BLACK);
mPaint1.setStrokeWidth(20);
textPaint = new Paint();
textPaint.setColor(Color.DKGRAY);
textPaint.setTextSize(20);
//设置文本的对齐方式
textPaint.setTextAlign(Align.CENTER);
}
//获得系统时间
private void getTime(){
Calendar calendar = Calendar.getInstance();
hour = calendar.get(Calendar.HOUR_OF_DAY);
min = calendar.get(Calendar.MINUTE);
sec = calendar.get(Calendar.SECOND);
Date date = calendar.getTime();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
time = sdf.format(date);
}
//让时间走动
private void autoRefresh(){
post(new Runnable() {
@Override
public void run() {
getTime();
invalidate();
postDelayed(this, 1000);
}
});
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int cy = canvas.getHeight()/2;
int cx = canvas.getWidth()/2;
mPaint.setColor(Color.BLACK);
//画圆心
canvas.drawCircle(cx, cy, 20, mPaint1);
//1.画圆
canvas.drawCircle(cx, cy, r, mPaint);
//移动画布
canvas.translate(cx, cy);
//2.画刻度
for (int i = 0; i < 60; i++) {
if (i%5==0) {
//画整点的刻度
mPaint.setStrokeWidth(10);
kedu = 30;
canvas.drawLine(0, kedu-r, 0, -r, mPaint);
if (i==0) {
//画文本
canvas.drawText("12", 0, -140, textPaint);
}
else{
//旋转画布 画文本
canvas.save();
canvas.translate(0, -140);
canvas.rotate(-i*6);
canvas.drawText(""+i/5, 0, 0, textPaint);
canvas.restore();
}
}else{//非整点刻度
kedu = 20;
mPaint.setStrokeWidth(8);
canvas.drawLine(0, kedu-r, 0, -r, mPaint);
}
canvas.rotate(6);//旋转画布
}
//3.画时针分针秒针
//画时针
canvas.save();//保存画布的坐标
canvas.rotate((hour-3)*30+min*0.5f);
mPaint.setStrokeWidth(10);
mPaint.setColor(Color.BLACK);
canvas.drawLine(-20, 0, hourLength, 0, mPaint);
canvas.restore();//恢复上一次保存的坐标
//画分针
canvas.save();
canvas.rotate((min-15)*6);
mPaint.setStrokeWidth(10);
mPaint.setColor(Color.BLUE);
canvas.drawLine(-20, 0, minLength, 0, mPaint);
canvas.restore();
//画秒针
canvas.save();
canvas.rotate((sec-15)*6);
mPaint.setStrokeWidth(10);
mPaint.setColor(Color.RED);
canvas.drawLine(-20, 0, secLength, 0, mPaint);
canvas.restore();
canvas.drawText(time, 0, 240, textPaint);
}
}
2.布局中引用控件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.ex_temple.MainActivity" >
<com.example.ex_temple.CustomClock
android:id="@+id/customClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
代码比较简单,运行起来即可显示钟表自动走动的效果
源码下载地址:http://download.csdn.net/detail/lxlyhm/9612090