样式效果
之前看到一些进度条的效果，自己想着如何实现类似时钟刻度的一个进度条。正好在任主席的知识星球看到一片博客是写一个自定义时钟的文章，就用来参考改造一下。正好打算自己慢慢的收集一些效果库。所以就弄出来一个库来记录。当前实现的效果类似这样：
所遇到的问题
先是画出一个默认的的圆环刻度，这里使用的是 canvas 的方法。重要的就是 drawLine 和 rotate 方法。其中的难点就是 drawLine 的坐标的计算。
控件继承的是View，因此还需要考虑到控件 wrap_content的属性无效的问题。通过如下代码解决该问题：
public static int measureDimension(int measureSpec){
int defaultSize = 800;
int model = View.MeasureSpec.getMode(measureSpec);
int size = View.MeasureSpec.getSize(measureSpec);
Log.d("qhh","size = "+size);
switch (model) {
case View.MeasureSpec.EXACTLY:
return size;
case View.MeasureSpec.AT_MOST: //对应wrap_content
return Math.min(size, defaultSize);
case View.MeasureSpec.UNSPECIFIED:
return defaultSize;
default:
return defaultSize;
}
}
/**
然后再 onMeasure 方法中设置好默认的大小
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
Log.d("qhh", "onMeasure");
setMeasuredDimension(Dimension.measureDimension(widthMeasureSpec),
Dimension.measureDimension(heightMeasureSpec));
}
之后再 onDraw 中将相关的刻度线画出来：
1、先画出来默认的刻度线：
private void drawDefaultCircle() {
int width = getWidth();
int height = getHeight();
float rotate = 360f / mPercentMax;
//画背景刻度,需要考虑到控件的高宽不一样，按照最小边计算圆环的半径
//保证圆环画出来是可见的。
if (width >= height) {
for (int i = 0; i < mPercentMax; i++) {
mCanvas.drawLine(getWidth() / 2, mPaddingTop,
getWidth() / 2, mPaddingTop + mScaleLength, mScaleLinePaint);
mCanvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
}
} else {
for (int i = 0; i < mPercentMax; i++) {
mCanvas.drawLine(mPaddingLeft, getHeight() / 2,
mPaddingLeft + mScaleLength, getHeight() / 2, mScaleLinePaint);
mCanvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
}
}
}
其中 Canvas.rotate() 方法是旋转整个 canvas画布，而并不是旋转 画上去的线条。其中旋转的角度 rotate 根据圆周 360度以及要显示多少个刻度进行计算，float rotate = 360f / mPercentMax;。
需要注意的一点是，在画进度条的时候，View 的 height 大于 width，需要先将整个 canvas 旋转 90度。
private void drawProgressCircle() {
int width = getWidth();
int height = getHeight();
float rotate = 360f / mPercentMax;
mCanvas.save();
//画进度刻度
if (width >= height) {
for (int i = 0; i < mPercent; i++) {
mCanvas.drawLine(getWidth() / 2, mPaddingTop,
getWidth() / 2, mPaddingTop + mScaleLength, mProgressLinePaint);
mCanvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
}
} else {
//旋转 90度
mCanvas.rotate(90f, getWidth() / 2, getHeight() / 2);
for (int i = 0; i < mPercent; i++) {
mCanvas.drawLine(mPaddingLeft, getHeight() / 2,
mPaddingLeft + mScaleLength, getHeight() / 2, mProgressLinePaint);
mCanvas.rotate(rotate, getWidth() / 2, getHeight() / 2);
}
}
mCanvas.restore();
}
View中的几个常用的生命周期
1、construct ：构造函数
2、onFinishInflate() : 该方法当View及其子View从XML文件中加载完成后会被调用。
3、onMeaure() : 该方法在计算当前View及其所有子View尺寸大小需求时会被调用。
4、onLayout() : 该方法在当前View需要为其子View分配尺寸和位置时会被调用。
5、onSizeChange() : 该方法在当前View尺寸变化时被调用。
6、onDraw() : 该方法在当前View需要呈现其内容时被调用。
总结
例子比较简单，主要是不断的看代码写代码，查找自己的不足。
demo地址在：
https://github.com/qinhaihang/DynamicCircleDemo
参考的文章：
https://github.com/chenzongwen/MiClockView
https://www.jianshu.com/p/08e6dab7886e
