自定义控件：绘制圆环的实现过程

Posted 2020-07-28

使用自定义控件绘制一个圆环,需要重现的方法是OnDraw()实现对view 的绘制，从而
输出符合自己需求的view 控件
观察圆环的组成部分:
外层圆+中间百分比文字+不断变化进度的弧形圈
--->分析:每一个组成部分需要的属性,构成几个关键的自定义属性
1:外层圆的颜色
2:弧形进度圈的颜色
3:中间百分比文字的颜色
4:中间百分比文字的大小
5:圆环的宽度(作为进度弧形圈的宽度)6:*首页当中也有一个圆环进度，为了兼容使用首页的圆环进度,增加一个自定义属性，绘制进度弧形圈的风格(实心[Fill]，空心[Stroken])

分析完毕-->绘制步骤：
1:构造方法当中初始化画笔对象，获取自定义的属性值.
2:重写Ondraw 方法
---2.1:绘制最外层的圆
-关键方法canvas.drawCircle(center, center, radius, paint); //画出圆环

*:计算半径、中心点坐标、画笔设置
paint.setColor(roundColor); //设置圆环的颜色
paint.setStyle(Paint.Style.STROKE); //设置空心
paint.setStrokeWidth(roundWidth); //设置圆环的宽度---这个宽度也是提
供给进度弧形圈绘制的时候覆盖的宽度
paint.setAntiAlias(true); //消除锯齿
中心点坐标
int center = getWidth() / 2; //获取圆心的x 坐标
半径

int radius = (int) (center - roundWidth/2) ---画图说明最容易理解
---2.2:绘制中间的百分比文字
--关键方法：canvas.drawText(percent + "%", center - textWidth / 2,
center + textSize / 2, paint); //画出进度百分比
测量画笔上的文本宽度
float textWidth = paint.measureText(percent + "%");
画笔设置
paint.setStrokeWidth(0);
paint.setColor(textColor);
paint.setTextSize(textSize); 

paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体绘制的文字的位置,由参数2,3 的X,Y 坐标值决定--圆环的中心点位置显示X:表示从哪开始绘制,如果你直接中心点开始绘制-->画图说明最容易理解-->正确的X=center - textWidth / 2；Y = center + textSize / 2 --（因为android 坐标系与数学坐标系Y 轴值是相反的，也可以画图说明,这里的textsize 就可以代表高度,paint.measureText 测量方法执行之后，默认的文字高度就是根据文字大小计算的，相当于wrap_content，所以textSize 就是本身文字所占的高度值）*:绘制的进度要转换为百分比形式：int percent = (int) (((float) progress /(float) max) * 100);

---2.3:绘制进度弧形圈
---关键方法：canvas.drawArc(oval, 0, 360 * progress / max, false, paint);
//根据进度画圆弧
参数解释：
oval：绘制的弧形的范围轮廓
0:从多少角度开始绘制
360 * progress / max:绘制弧形扫过的角度对应的区域
false:不包含圆心，如果是true，表示包含圆心paint:绘制使用的画笔画笔设置paint.setStrokeWidth(roundWidth); //设置进度弧形圈的宽度，必须保持

和外层圆的StrokeWidth 一致，确保弧形圈绘制的时候覆盖的范围就是外层圆的宽度
paint.setColor(roundProgressColor); //设置进度的颜色
弧形范围计算
RectF oval = new RectF(center - radius, center - radius, center
+ radius, center + radius); --->画图说明最容易理解
left:center - radius
top:center-radius
right:center+radius
传智播客武汉校区就业部出品务实、创新、质量、分享、专注、责任
bottom:center+radius
*:注意，因为progress 是相对于100 当中占比多少，而弧形总共是按照角度
分成360 分的，所以绘制弧形圈指定参数扫过的区域角度需要计算转换一下
=360 * progress / max（max=100）
*:对应自定义属性中的最后一个属性是实心还是空心，绘制的时候需要判断一
下,兼容首页的圆环进度处理
switch (style) {
case STROKE:{
paint.setStyle(Paint.Style.STROKE);
canvas.drawArc(oval, 0, 360 *
progress / max, false, paint); //根据进度画圆弧
break;
}
case FILL:{
paint.setStyle(Paint.Style.FILL_AND_STROKE);
if(progress !=0)
canvas.drawArc(oval, 0, 360 *
progress / max, true, paint); //根据进度画圆弧
break;
}
}
最后提供一个设置进度，根据进度重新绘制圆环的方法
public void setProgress(int progress) {
if(progress < 0){
throw new
IllegalArgumentException("progress not less than
0");
}
if(progress > max){
progress = max;
}
if(progress <= max){
this.progress = progress;
postInvalidate();
}
}