效果图
先继承View,然后再写构造方法,构造方法里初始化画笔
public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
bigCiclePaint = new Paint();
bigCiclePaint.setColor(Color.BLUE);
bigCiclePaint.setStyle(Paint.Style.STROKE);
bigCiclePaint.setStrokeWidth(34);
smallCiclePaint = new Paint();
smallCiclePaint.setColor(Color.RED);
smallCiclePaint.setStyle(Paint.Style.FILL);
calibrationPaint = new Paint();
calibrationPaint.setColor(Color.BLUE);
calibrationPaint.setStyle(Paint.Style.FILL);
calibrationPaint.setStrokeWidth(20);
numPaint = new Paint();
numPaint.setColor(Color.RED);
numPaint.setAntiAlias(true);
numPaint.setTextAlign(Paint.Align.CENTER);
numPaint.setTextSize(40);
hourPaint = new Paint();
hourPaint.setColor(Color.parseColor("#3F51B5"));
hourPaint.setStrokeWidth(25);
minutePaint = new Paint();
minutePaint.setColor(Color.DKGRAY);
minutePaint.setStrokeWidth(18);
secondPaint = new Paint();
secondPaint.setColor(Color.parseColor("#FF4081"));
secondPaint.setStrokeWidth(11);
}
解释：
- bigCiclePaint：画大表盘的画笔
- smallCiclePaint:画小圆心的画笔
- calibrationPaint:画12个刻度的画笔
- numPaint：画刻度下的数字的画笔
- hourPaint：小时的画笔
- minutePaint：分钟的画笔
- secondPaint：秒针的画笔
在onDraw方法里面画
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
calendar = Calendar.getInstance();
int clockWidth = getWidth();
cX=clockWidth/2;
cY=clockWidth/2;
bigRadius=(float) clockWidth/2-75;
canvas.drawCircle(cX,cY,bigRadius,bigCiclePaint);//画大表盘
canvas.drawCircle(cX,cY,30,smallCiclePaint);//画小圆心
// canvas.save()方法和canvas.restore()方法都是成对出现的，这一点要注意。
for (int i = 1; i <13 ; i++) {
//在旋转之前保存画布状态
canvas.save();
canvas.rotate(i*30,cX,cY);//先画1点，从1到12
canvas.drawLine(cX,cY-bigRadius+34/2,cX,cY-bigRadius+34/2+18,calibrationPaint);//画刻度
//画刻度上数字,第三个参数表示文字的基准线
canvas.drawText(i+"",cX,cY-bigRadius+34/2+18+50,numPaint);
//恢复画布状态
canvas.restore();
}
//获得当前小时
int hour = calendar.get(Calendar.HOUR);
int minute = calendar.get(Calendar.MINUTE);
int second = calendar.get(Calendar.SECOND);
// Log.d("alan","hour----->"+hour);
// Log.d("alan","minute--->"+minute);
Log.d("alan","second--->"+second);
float hourDegree=((float)minute/60+hour)*30;//画时针时画布应该旋转的度数
// Log.d("alan","(float)minute/60---->"+(float)minute/60);
// Log.d("alan","hourDegree--->"+hourDegree);
canvas.save();
canvas.rotate(hourDegree,cX,cY);//旋转画布准备画时针
canvas.drawLine(cX,cY-200,cX,cY,hourPaint);//画时针
canvas.restore();//重置画布
// canvas.save();
float minuteDegree=((float)minute)/60*360;//画分针时画布应该旋转的度数
// Log.d("alan","minuteDegree--->"+minuteDegree);
canvas.rotate(minuteDegree,cX,cY);
canvas.drawLine(cX,cY-250,cX,cY,minutePaint);
canvas.restore();
float secondDegree=((float)second)/60*360;//画秒针时画布应该旋转的度数
// Log.d("alan","secondDegree--->"+secondDegree);
canvas.rotate(secondDegree,cX,cY);//这里是顺时针旋转
canvas.drawLine(cX,cY-300,cX,cY,secondPaint);
canvas.restore();
postInvalidateDelayed(1000);//每1秒钟重绘一次
}
这样就完成了自定义控件的制作，然后在布局中引用就行了
<?xml version="1.0" encoding="utf-8"?>
<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.yus.clockview.MainActivity">
<com.yus.clockview.ClockView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
代码已经上传到我的GitHub上，如果喜欢的话，不妨Star一下，我GitHub上别的项目也可以关注下。
代码地址
我的GitHub地址
