前言
周末无事，看到抖音上罗盘时钟壁纸很炫酷，所以想着自己动手实践一下，顺便复习下自定义View的相关知识。
实现效果
GIF.gif
上图为最终的效果，一个自定义View实现
实现过程
首先确定View宽高，重新测量使画布宽高相等
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int width = Math.min(widthSize, heightSize);
if (widthMode == MeasureSpec.UNSPECIFIED) {
width = heightSize + getPaddingRight() + getPaddingLeft();
} else if (heightMode == MeasureSpec.UNSPECIFIED) {
width = widthSize + getPaddingRight() + getPaddingLeft();
}
setMeasuredDimension(width, width);
}
为防止横屏出错，需要在尺寸改变的时候重新测量
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
width = w;
height = h;
if (width > height) {
radius = height / 2;
} else {
radius = width / 2;
}
super.onSizeChanged(w, h, oldw, oldh);
}
在资源文件中创建attrs.xml，方便通过布局配置样式：
整个View分四部分：
- 中间姓氏
- 12小时制时
- 分钟
- 秒钟
中间姓氏代码实现
/**
* 初始化
*
* @param context 上下文对象
* @param attrs 资源
*/
private void init(Context context, @Nullable AttributeSet attrs) {
if (null != attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CompassView);
centerText = array.getString(R.styleable.CompassView_centerText);
centerSize = array.getDimension(R.styleable.CompassView_centerSize, 18);
clockTextSize = array.getDimension(R.styleable.CompassView_clockTextSize, 14);
compassColor = array.getColor(R.styleable.CompassView_compassColor, ContextCompat.getColor(context, R.color.colorGray));
selectColor = array.getColor(R.styleable.CompassView_selectColor, ContextCompat.getColor(context, R.color.colorWhite));
array.recycle();
}
//初始化姓氏画笔
bounds = new Rect();
clockBounds = new Rect();
txtPaint = new Paint();
txtPaint.setColor(selectColor);
txtPaint.setTextAlign(Paint.Align.CENTER);
txtPaint.setTextSize(centerSize);
，，，，
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
，，，，
//测量文本
txtPaint.getTextBounds(centerText, 0, centerText.length(), bounds);
//画姓氏
canvas.drawText(centerText, radius, radius - (float) (bounds.top + bounds.bottom) / 2, txtPaint);
，，，，
}
画时分秒罗盘
//画小时刻度
for (int i = 0; i < shis.length; i++) {
double degree = (i + 12 - hour + 4) * rr2;
float x = (float) (radius + centerSize * Math.sin(degree));
float y = (float) (radius - centerSize * Math.cos(degree));
canvas.save();
canvas.rotate((float) (degree / Math.PI * 180 - 90), x, y);
sPaint.getTextBounds(shis[i], 0, shis[i].length(), clockBounds);
if (i == hour - 1) {
sPaint.setColor(selectColor);
} else {
sPaint.setColor(compassColor);
}
canvas.drawText(shis[i], x, y - (float) (clockBounds.top + clockBounds.bottom) / 2, sPaint);
canvas.restore();
}
//画分
for (int i = 0; i < fenmiaos.length; i++) {
double degree = (i + 60 - minute + 15) * rr;
float x = (float) (radius + (radius / 2 - clockTextSize) * Math.sin(degree));
float y = (float) (radius - (radius / 2 - clockTextSize) * Math.cos(degree));
canvas.save();
canvas.rotate((float) (degree / Math.PI * 180 - 90), x, y);
fPaint.getTextBounds(fenmiaos[i] + "分", 0, (fenmiaos[i] + "分").length(), clockBounds);
if (i == minute) {
fPaint.setColor(selectColor);
} else {
fPaint.setColor(compassColor);
}
canvas.drawText(fenmiaos[i] + "分", x, y - (float) (clockBounds.top + clockBounds.bottom) / 2, fPaint);
canvas.restore();
}
//画秒
for (int i = 0; i < fenmiaos.length; i++) {
double degree = (i + 60 - second + 15) * rr;
float x = (float) (radius + (radius - clockTextSize * 4) * Math.sin(degree));
float y = (float) (radius - (radius - clockTextSize * 4) * Math.cos(degree));
canvas.save();
canvas.rotate((float) (degree / Math.PI * 180 - 90), x, y);
mPaint.getTextBounds(fenmiaos[i] + "秒", 0, (fenmiaos[i] + "秒").length(), clockBounds);
if (i == second) {
mPaint.setColor(selectColor);
} else {
mPaint.setColor(compassColor);
}
canvas.drawText(fenmiaos[i] + "秒", x, y - (float) (clockBounds.top + clockBounds.bottom) / 2, mPaint);
canvas.restore();
}
完整代码
/**
* @author limh
* @function
* @date 2019/4/14 9:51
*/
public class CompassView extends View {
private String TAG = "CompassView";
private String[] shis = {"一点", "两点", "三点", "四点", "五点", "六点", "七点", "八点", "九点", "十点", "十一点", "十二点"};
private String[] fenmiaos = {"零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十",
"十一", "十二", "十三", "十四", "十五", "十六", "十七", "十八", "十九", "二十",
"二十一", "二十二", "二十三", "二十四", "二十五", "二十六", "二十七", "二十八", "二十九", "三十",
"三十一", "三十二", "三十三", "三十四", "三十五", "三十六", "三十七", "三十八", "三十九", "四十",
"四十一", "四十二", "四十三", "四十四", "四十五", "四十六", "四十七", "四十八", "四十九", "五十",
"五十一", "五十二", "五十三", "五十四", "五十五", "五十六", "五十七", "五十八", "五十九"};
private Double rr = 2 * Math.PI / 60;//2π即360度的圆形f份成60份,一秒钟与一钟
private Double rr2 = 2 * Math.PI / 12;//2π圆形份成12份,圆形显示12个小时的刻度
//半径
private int radius;
//宽
private int width;
//高
private int height;
//画笔 时 分 秒
private Paint sPaint;
private Paint fPaint;
private Paint mPaint;
//中间文字
private Paint txtPaint;
private Rect bounds;
private Rect clockBounds;
private String centerText = "李";
private float centerSize = 18f;
private float clockTextSize = 14f;
private int compassColor = 0xFFDDDDDD;
private int selectColor = 0xFF000000;
private int hour = 1;
private int minute = 0;
private int second = 0;
public CompassView(Context context) {
super(context);
init(context, null);
}
public CompassView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
public CompassView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
}
/**
* 初始化
*
* @param context 上下文对象
* @param attrs 资源
*/
private void init(Context context, @Nullable AttributeSet attrs) {
if (null != attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CompassView);
centerText = array.getString(R.styleable.CompassView_centerText);
centerSize = array.getDimension(R.styleable.CompassView_centerSize, 18);
clockTextSize = array.getDimension(R.styleable.CompassView_clockTextSize, 14);
compassColor = array.getColor(R.styleable.CompassView_compassColor, ContextCompat.getColor(context, R.color.colorGray));
selectColor = array.getColor(R.styleable.CompassView_selectColor, ContextCompat.getColor(context, R.color.colorWhite));
array.recycle();
}
bounds = new Rect();
clockBounds = new Rect();
txtPaint = new Paint();
txtPaint.setColor(selectColor);
txtPaint.setTextAlign(Paint.Align.CENTER);
txtPaint.setTextSize(centerSize);
sPaint = new Paint();
sPaint.setColor(compassColor);
sPaint.setTextAlign(Paint.Align.CENTER);
sPaint.setTextSize(clockTextSize);
fPaint = new Paint();
fPaint.setColor(compassColor);
fPaint.setTextAlign(Paint.Align.LEFT);
fPaint.setTextSize(clockTextSize);
mPaint = new Paint();
mPaint.setColor(compassColor);
mPaint.setTextAlign(Paint.Align.LEFT);
mPaint.setTextSize(clockTextSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
updateTime();
//测量文本
txtPaint.getTextBounds(centerText, 0, centerText.length(), bounds);
//画姓氏
canvas.drawText(centerText, radius, radius - (float) (bounds.top + bounds.bottom) / 2, txtPaint);
//画小时刻度
for (int i = 0; i < shis.length; i++) {
double degree = (i + 12 - hour + 4) * rr2;
float x = (float) (radius + centerSize * Math.sin(degree));
float y = (float) (radius - centerSize * Math.cos(degree));
canvas.save();
canvas.rotate((float) (degree / Math.PI * 180 - 90), x, y);
sPaint.getTextBounds(shis[i], 0, shis[i].length(), clockBounds);
if (i == hour - 1) {
sPaint.setColor(selectColor);
} else {
sPaint.setColor(compassColor);
}
canvas.drawText(shis[i], x, y - (float) (clockBounds.top + clockBounds.bottom) / 2, sPaint);
canvas.restore();
}
//画分
for (int i = 0; i < fenmiaos.length; i++) {
double degree = (i + 60 - minute + 15) * rr;
float x = (float) (radius + (radius / 2 - clockTextSize) * Math.sin(degree));
float y = (float) (radius - (radius / 2 - clockTextSize) * Math.cos(degree));
canvas.save();
canvas.rotate((float) (degree / Math.PI * 180 - 90), x, y);
fPaint.getTextBounds(fenmiaos[i] + "分", 0, (fenmiaos[i] + "分").length(), clockBounds);
if (i == minute) {
fPaint.setColor(selectColor);
} else {
fPaint.setColor(compassColor);
}
canvas.drawText(fenmiaos[i] + "分", x, y - (float) (clockBounds.top + clockBounds.bottom) / 2, fPaint);
canvas.restore();
}
//画秒
for (int i = 0; i < fenmiaos.length; i++) {
double degree = (i + 60 - second + 15) * rr;
float x = (float) (radius + (radius - clockTextSize * 4) * Math.sin(degree));
float y = (float) (radius - (radius - clockTextSize * 4) * Math.cos(degree));
canvas.save();
canvas.rotate((float) (degree / Math.PI * 180 - 90), x, y);
mPaint.getTextBounds(fenmiaos[i] + "秒", 0, (fenmiaos[i] + "秒").length(), clockBounds);
if (i == second) {
mPaint.setColor(selectColor);
} else {
mPaint.setColor(compassColor);
}
canvas.drawText(fenmiaos[i] + "秒", x, y - (float) (clockBounds.top + clockBounds.bottom) / 2, mPaint);
canvas.restore();
}
//每秒刷新
postInvalidateDelayed(1000);
}
/**
* 更新当前时间
*/
private void updateTime() {
Calendar calendar = Calendar.getInstance();
hour = calendar.get(Calendar.HOUR);//获取小时,12小时制
minute = calendar.get(Calendar.MINUTE);//获取分钟
second = calendar.get(Calendar.SECOND);//获取秒
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
width = w;
height = h;
if (width > height) {
radius = height / 2;
} else {
radius = width / 2;
}
super.onSizeChanged(w, h, oldw, oldh);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int width = Math.min(widthSize, heightSize);
if (widthMode == MeasureSpec.UNSPECIFIED) {
width = heightSize + getPaddingRight() + getPaddingLeft();
} else if (heightMode == MeasureSpec.UNSPECIFIED) {
width = widthSize + getPaddingRight() + getPaddingLeft();
}
setMeasuredDimension(width, width);
}
}