学习笔记自定义控件之——自定义表盘

        今天项目中有一个显示钟表功能模块，美工比较懒说表盘比较简单可以自己画一个。于是我就回想起当初制作过一个自定义表盘可以直接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