自定义圆环进度显示

最新推荐文章于 2021-01-29 18:16:32 发布

住你隔壁的文艺青年

最新推荐文章于 2021-01-29 18:16:32 发布

阅读量202

点赞数

本文链接：https://blog.csdn.net/wzy_1704A/article/details/103070279

版权

该博客介绍了如何创建一个自定义的圆环形进度显示视图。通过RoundProgress类，实现了圆环的颜色、圆弧颜色、文本颜色、圆环宽度、字体大小、最大值、进度等属性的自定义，并在onDraw方法中利用Canvas绘制圆环。

摘要由CSDN通过智能技术生成

/**

Created by shkstart on 2016/12/3 0003.

自定义视图
*/
public class RoundProgress extends View {

//使用自定义属性来初始化如下的变量
private int roundColor;//圆环的颜色
private int roundProgressColor ;//圆弧的颜色
private int textColor;//文本的颜色

private float roundWidth ;//圆环的宽度
private float textSize ;//文本的字体大小

private int max;//圆环的最大值
private int progress;//圆环的进度

private int width;//当前视图的宽度（=高度）

private Paint paint;//画笔

public RoundProgress(Context context) {
this(context, null);
}

public RoundProgress(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public RoundProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

 //初始化画笔
 paint = new Paint();
 paint.setAntiAlias(true);//去除毛边

 //获取自定义的属性
 //1.获取TypeArray的对象(调用两个参数的方法）
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgress);

 //2.取出所有的自定义属性
 roundColor = typedArray.getColor(R.styleable.RoundProgress_roundColor, Color.GRAY);
 roundProgressColor = typedArray.getColor(R.styleable.RoundProgress_roundProgressColor,Color.RED);
 textColor = typedArray.getColor(R.styleable.RoundProgress_textColor,Color.GREEN);
 roundWidth = typedArray.getDimension(R.styleable.RoundProgress_roundWith,UIUtils.dp2px(10));
 textSize = typedArray.getDimension(R.styleable.RoundProgress_textSize,UIUtils.dp2px(20));
 max = typedArray.getInteger(R.styleable.RoundProgress_max,100);
 progress = typedArray.getInteger(R.styleable.RoundProgress_progress,30);

 //3.回收处理
 typedArray.recycle();

}

public int getMax() {
return max;
}

public void setMax(int max) {
this.max = max;
}

public int getProgress() {
return progress;
}

public void setProgress(int progress) {
this.progress = progress;
}

//测量：获取当前视图宽高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = this.getMeasuredWidth();
}

//canvas:画布，对应着视图在布局中的范围区间。范围的左上顶点即为坐标原点
@Override
protected void onDraw(Canvas canvas) {
//1.绘制圆环
//获取圆心坐标
int cx = width / 2;
int cy = width / 2;
float radius = width / 2 - roundWidth / 2;
paint.setColor(roundColor);//设置画笔颜色
paint.setStyle(Paint.Style.STROKE);//设置圆环的样式
paint.setStrokeWidth(roundWidth);//设置圆环的宽度
canvas.drawCircle(cx, cy, radius, paint);

 //2.绘制圆弧
 RectF rectF = new RectF(roundWidth / 2, roundWidth / 2, width - roundWidth / 2, width - roundWidth / 2);
 paint.setColor(roundProgressColor);//设置画笔颜色
 canvas.drawArc(rectF,0,progress * 360 / max ,false,paint);

 //3.绘制文本
 String text = progress * 100 / max  + "%";
 //设置paint
 paint.setColor(textColor);
 paint.setTextSize(textSize);
 paint.setStrokeWidth(0);
 Rect rect = new Rect();//创建了一个矩形，此时矩形没有具体的宽度和高度
 paint.getTextBounds(text,0,text.length(),rect);//此时的矩形的宽度和高度即为整好包裹文本的矩形的宽高
 //获取左下顶点的坐标
 int x = width / 2 - rect.width() / 2;
 int y = width / 2 + rect.height() / 2;


 canvas.drawText(text,x,y,paint);

}
}

我们的style自定义属性里：

<declare-styleable name="RoundProgress">
    <attr name="roundColor" format="color"></attr>
    <attr name="roundProgressColor" format="color"></attr>
    <attr name="textColor" format="color"></attr>
    <attr name="roundWith" format="dimension"></attr>
    <attr name="textSize" format="dimension"></attr>
    <attr name="progress" format="integer"></attr>
    <attr name="max" format="integer"></attr>


</declare-styleable>