继承View:这种自定义控件最大的特点是不包含子控件,当我们需要定制一个不同于原生控件且有“个性”的控件(如圆形头像、水波进度条)时,我们采用这种方式,很多情况下可以采用其他方式代替,比如圆形头像完全可以使用imageView+圆形背景图,但后者往往内存消耗过大,制作素材麻烦。
继承ViewGroup:这种自定义控件,常常利用现有组件(各种layout)的特定布局方式来组成新的控件。如流式标签。
自绘控件:顾名思义,这一类自定义控件注重控件本身的特性,如形状、动画效果等,一般继承View(但也不绝对,看具体需求),重写onDraw()方法完成绘制,具体绘制的过程请参照 (三)自定义View常用的方法(测量、绘制、位置)
组合控件:组合控件的特点是使用原生控件组合成新的控件。
继承控件:继承控件的特点是利用了父控件本身的一些特性,在此基础上添加新的功能。充分利用已有资源,避免了重复的开发。
实现时钟效果有以下几个重要代码:
//将之前所绘制的图形保存起来,然后后续的操作就好像在一个新的图层上操作一样,与ps的图层基本一致
canvas.save();
//将x y轴坐标绕着(x,y)坐标点顺时针旋转angle°。angle为负数则逆时针旋转
canvas.rotate(angle, x, y);
//可以理解为PhotoShop中的合并图层操作,将save之前的图像与save之后的合并
canvas.restore();
1.创建一个类继承View,并添加构造方法
2.定义画笔,并设置相应参数,确定圆的半径
3.计算各个关键点的坐标
public class clockView extends View {
//外圆画笔
private Paint paint;
//文字画笔
private Paint paintNum;
//时钟画笔
private Paint paintHour;
//分钟画笔
private Paint paintMinute;
//秒钟画笔
private Paint paintSecond;
//外圆圆心
private float x, y;
//外圆半径
private int r;
public clockView(Context context) {
super(context);
initPaint();
}
public clockView(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();
}
public clockView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
}
private void initPaint() {
paint = new Paint();
paint.setColor(Color.BLACK);
paint.setAntiAlias(true);
paint.setStrokeWidth(3);
paint.setStyle(Paint.Style.STROKE);
paintNum = new Paint();
paintNum.setColor(Color.BLACK);
paintNum.setAntiAlias(true);
paintNum.setTextSize(35);
paintNum.setStyle(Paint.Style.STROKE);
paintNum.setTextAlign(Paint.Align.CENTER);
paintSecond = new Paint();
paintSecond.setColor(Color.RED);
paintSecond.setAntiAlias(true);
paintSecond.setStrokeWidth(5);
paintSecond.setStyle(Paint.Style.FILL);
paintMinute = new Paint();
paintMinute.setColor(Color.BLACK);
paintMinute.setAntiAlias(true);
paintMinute.setStrokeWidth(8);
paintMinute.setStyle(Paint.Style.FILL);
paintHour = new Paint();
paintHour.setColor(Color.BLACK);
paintHour.setAntiAlias(true);
paintHour.setStrokeWidth(13);
paintHour.setStyle(Paint.Style.FILL);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int height = getMeasuredHeight();
int width = getMeasuredWidth();
x = width / 2;
y = height / 2;
r = (int) x - 5;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制外圆
canvas.drawCircle(x, y, r, paint);
//绘制圆心
canvas.drawCircle(x, y, 15, paintMinute);
//绘制刻度
drawLines(canvas);
//绘制整点
drawText(canvas);
try {
initCurrentTime(canvas);
} catch (Exception e) {
e.printStackTrace();
}
//每隔1s刷新界面
postInvalidateDelayed(1000);
}
/**
* 绘制时钟刻度和分钟刻度
*
* @param canvas 画布
*/
private void drawLines(Canvas canvas) {
for (int i = 0; i < 60; i++) {
if (i % 5 == 0) {
//绘制整点刻度
paint.setStrokeWidth(8);
canvas.drawLine(x, y - r, x, y - r + 40, paint);
} else {
//绘制分钟刻度
paint.setStrokeWidth(3);
canvas.drawLine(x, y - r, x, y - r + 30, paint);
}
//绕着(x,y)旋转6°
canvas.rotate(6, x, y);
}
}
/**
* 绘制整点数字
*
* @param canvas 画布
*/
private void drawText(Canvas canvas) {
// 获取文字高度用于设置文本垂直居中
float textSize = (paintNum.getFontMetrics().bottom - paintNum.getFontMetrics().top);
// 数字离圆心的距离,40为刻度的长度,20文字大小
int distance = r - 40 - 20;
// 数字的坐标(a,b)
float a, b;
// 每30°写一个数字
for (int i = 0; i < 12; i++) {
a = (float) (distance * Math.sin(i * 30 * Math.PI / 180) + x);
b = (float) (y - distance * Math.cos(i * 30 * Math.PI / 180));
if (i == 0) {
canvas.drawText("12", a, b + textSize / 3, paintNum);
} else {
canvas.drawText(String.valueOf(i), a, b + textSize / 3, paintNum);
}
}
}
/**
* 获取当前系统时间
*
* @param canvas 画布
*/
private void initCurrentTime(Canvas canvas) {
//获取系统当前时间
SimpleDateFormat format = new SimpleDateFormat("HH-mm-ss");
String time = format.format(new Date(System.currentTimeMillis()));
String[] split = time.split("-");
int hour = Integer.parseInt(split[0]);
int minute = Integer.parseInt(split[1]);
int second = Integer.parseInt(split[2]);
//时针走过的角度
int hourAngle = hour * 30 + minute / 2;
//分针走过的角度
int minuteAngle = minute * 6 + second / 10;
//秒针走过的角度
int secondAngle = second * 6;
//绘制时钟,以12整点为0°参照点
canvas.rotate(hourAngle, x, y);
canvas.drawLine(x, y, x, y - r + 150, paintHour);
canvas.save();
canvas.restore();
//这里画好了时钟,我们需要再将画布转回来,继续以12整点为0°参照点
canvas.rotate(-hourAngle, x, y);
//绘制分钟
canvas.rotate(minuteAngle, x, y);
canvas.drawLine(x, y, x, y - r + 60, paintMinute);
canvas.save();
canvas.restore();
//这里同上
canvas.rotate(-minuteAngle, x, y);
//绘制秒钟
canvas.rotate(secondAngle, x, y);
canvas.drawLine(x, y, x, y - r + 20, paintSecond);
}
}
"http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".clock.Main4Activity">
<com.example.administrator.myapplication.clock.clockView
android:layout_width="match_parent"
android:layout_height="match_parent" />