android 自定义View加载圆形进度条

实现效果如下：

主要步骤如下几步：

1.记载自定义属性的值：

public CircleProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);

    paint = new Paint();

    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.progressCircleBar);
    roundColor = typedArray.getColor(R.styleable.progressCircleBar_roundColor, Color.WHITE);
    roundProgressColor = typedArray.getColor(R.styleable.progressCircleBar_roundProgressColrc, Color.RED);
    textColor = typedArray.getColor(R.styleable.progressCircleBar_textColcr, Color.BLACK);
    textSize = typedArray.getDimension(R.styleable.progressCircleBar_circletextSize, 0);
    roundwitdth = typedArray.getDimension(R.styleable.progressCircleBar_roundWidth, 0);
    max = typedArray.getInteger(R.styleable.progressCircleBar_max, 0);
    textisDiaplayAble = typedArray.getBoolean(R.styleable.progressCircleBar_textIsDisplayable, true);
    style = typedArray.getInt(R.styleable.progressCircleBar_style, 0);
    typedArray.recycle();
}

<declare-styleable name="progressCircleBar">
    <attr name="roundColor" format="color"></attr>
    <attr name="roundProgressColrc" format="color"></attr>
    <attr name="roundWidth" format="dimension"></attr>
    <attr name="textColcr" format="color"></attr>
    <attr name="circletextSize" format="dimension"></attr>
    <attr name="max" format="integer"></attr>
    <attr name="textIsDisplayable" format="boolean"></attr>
    <attr name="style">
        <enum name="STROKE" value="0"></enum>
        <enum name="FILL" value="1"></enum>
    </attr>

</declare-styleable>

2.通过调用view自身的 postInvalidate(); 方法设置进度比不断重复外圈进度。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int centre = getWidth() / 2;
    int radius = (int) (centre - roundwitdth / 2); //圆环的半径
    paint.setColor(roundColor);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeWidth(roundwitdth);
    paint.setAntiAlias(true);//消除锯齿
    canvas.drawCircle(centre,centre,radius,paint);

    /**
     * 画进度百分比
     */
    paint.setStrokeWidth(0);
    paint.setColor(textColor);
    paint.setTextSize(textSize);
    paint.setTypeface(Typeface.DEFAULT_BOLD); //设置字体

    int percent = (int)(((float)progress / (float)100) * 100);  //中间的进度百分比，先转换成float在进行除法运算，不然都为0
    float textWidth = paint.measureText(percent + "%");   //测量字体宽度，我们需要根据字体的宽度设置在圆环中间

    if(textisDiaplayAble && percent != 0 && style == STROKE){
        canvas.drawText(percent + "%", centre - textWidth / 2, centre + textSize/2, paint); //画出进度百分比
    }else{
    }

    /**
     * 画圆弧 ，画圆环的进度
     */

    //设置进度是实心还是空心
    paint.setStrokeWidth(roundwitdth); //设置圆环的宽度
    paint.setColor(roundProgressColor);  //设置进度的颜色
    RectF oval = new RectF(centre - radius, centre - radius, centre
            + radius, centre + radius);  //用于定义的圆弧的形状和大小的界限

    switch (style) {
        case STROKE:{
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawArc(oval, 0, 360 * progress / 100, false, paint);  //根据进度画圆弧
            break;
        }
        case FILL:{
            paint.setStyle(Paint.Style.FILL_AND_STROKE);
            if(progress !=0)
                canvas.drawArc(oval, 0, 360 * progress / 100, true, paint);  //根据进度画圆弧
            break;
        }
    }

}

3.布局文件调用：

<com.example.gw.customview.CircleProgressBar

    android:id="@+id/progressbar"
    android:layout_gravity="center"
    android:layout_width="120dp"
    android:layout_height="120dp"
    attrs_ViewDemo:roundWidth="8dp"
    attrs_ViewDemo:style="STROKE"
    attrs_ViewDemo:max="80"
    attrs_ViewDemo:roundProgressColrc="#ADFF2F"
    attrs_ViewDemo:circletextSize="18sp"
    attrs_ViewDemo:textIsDisplayable="true"
    attrs_ViewDemo:roundColor="#fff" />

源码下载

android 自定义View加载圆形进度条

相关推荐