自定义view,实现运行进度条,带动画效果

自定义DrawCirceProgressView

public class DrawCirceProgressView extends View {

private Paint mCircleBgPaint;
private Paint mCircleProgressPaint;
private int mCircleRadius = 100; //圆的半径,默认是100
private int mStrokeWidth = 5;  //圆边框的宽度,默认
private int mStrokeBg = Color.parseColor("#b4b4b4");  //底部背景色
private int mProgressStrokeWidth = 5;//进度条的宽度
private int mProgress = 0;          //当前进度
private int maxProgress = 100;      //最大进度
private int mTextSize = 20;         //字体大小
private RectF mRectF;       //矩形
private int[] colorArray;
private Paint mTextPaint;

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

public DrawCirceProgressView(Context context, AttributeSet attrs) {
    super(context, attrs);
    //获取自定义属性值
    TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.DrawCirceProgressView);
    mCircleRadius = typedArray.getInteger(R.styleable.DrawCirceProgressView_circleRadius, 0);
    mStrokeWidth = typedArray.getInteger(R.styleable.DrawCirceProgressView_strokeWidth, 0);
    mProgressStrokeWidth = typedArray.getInteger(R.styleable.DrawCirceProgressView_progressStrokeWidth, 0);
    int startColor = typedArray.getColor(R.styleable.DrawCirceProgressView_startColor, Color.BLUE);
    int endColor = typedArray.getColor(R.styleable.DrawCirceProgressView_endColor, Color.BLUE);
    int strokeColor = typedArray.getColor(R.styleable.DrawCirceProgressView_srtokeBgColor, Color.GRAY);
    colorArray = new int[]{startColor,endColor};
    mStrokeBg = strokeColor;
    initAttrs();
}

private void initAttrs() {
    mCircleBgPaint = new Paint();
    mCircleBgPaint.setAntiAlias(true);           //抗锯齿
    mCircleBgPaint.setDither(true);              //防抖动
    mCircleBgPaint.setColor(mStrokeBg);
    mCircleBgPaint.setStyle(Paint.Style.STROKE);  //绘制空心圆或 空心矩形,只显示边缘的线，不显示内部
    mCircleBgPaint.setStrokeWidth(mStrokeWidth);

    mCircleProgressPaint = new Paint();
    mCircleProgressPaint.setAntiAlias(true);           //抗锯齿
    mCircleProgressPaint.setDither(true);              //防抖动
    mCircleProgressPaint.setStyle(Paint.Style.STROKE);  //绘制空心圆或 空心矩形,只显示边缘的线，不显示内部
    mCircleProgressPaint.setStrokeWidth(mProgressStrokeWidth);
    mCircleProgressPaint.setStrokeCap(Paint.Cap.ROUND); // 把每段圆弧改成圆角的

    mTextPaint = new Paint();
    mTextPaint.setAntiAlias(true);           //抗锯齿
    mTextPaint.setDither(true);              //防抖动
    mTextPaint.setColor(Color.BLACK);



}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(mCircleRadius * 2 + mStrokeWidth, mCircleRadius * 2 + mStrokeWidth);
}

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

private void deawCircleProgress(Canvas canvas) {
    //矩形坐标
    mRectF = new RectF(mStrokeWidth / 2, mStrokeWidth / 2, mCircleRadius * 2 + mStrokeWidth / 2, mCircleRadius * 2 + mStrokeWidth / 2);
    float angle = mProgress * 360.0f / maxProgress * 1.0f;
    //进度条颜色渲染
    LinearGradient linearGradient = new LinearGradient(0, 0,
            getMeasuredWidth(), getMeasuredWidth(), colorArray, null, Shader.TileMode.MIRROR);
    mCircleProgressPaint.setShader(linearGradient);
    canvas.drawArc(mRectF, -90, angle, false, mCircleProgressPaint);

    String text = (int) (((float) mProgress / (float) maxProgress) * 100) + "%";
    Rect rect = new Rect();
    mTextPaint.setTextSize(mTextSize);
    mTextPaint.getTextBounds(text, 0, text.length(), rect);//测量text的宽和高,成功之后保存在rect中
    float x = mCircleRadius - rect.width() / 2;
    float y = mCircleRadius + rect.height() / 2;
    canvas.drawText(text, x, y, mTextPaint);

}

//绘制圆的灰色背景
private void deawCircleBg(Canvas canvas) {
    canvas.drawCircle(mCircleRadius + mStrokeWidth / 2, mCircleRadius + mStrokeWidth / 2, mCircleRadius, mCircleBgPaint);
}

private void startAnim(float start, float end) {
    ValueAnimator valueAnimator = ValueAnimator.ofFloat(start, end);
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.setDuration(2000);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float currentValue = (float) animation.getAnimatedValue();
            mProgress = (int) currentValue;
            invalidate();
        }
    });
    valueAnimator.start();
}

//设置字体大小
public void setTextSize(int textSize) {
    mTextSize = textSize;
}
//设置进度最大值
public void setMaxProgress(int maxProgress) {
    this.maxProgress = maxProgress;
}
//设置当前进度
public void setProgress(int progress) {
    if (progress > maxProgress) {
        progress = maxProgress;
    }
    startAnim(mProgress, progress);
}}

XML布局中使用

<com.cheanda.newcontrol.view.DrawCirceProgressView
    android:layout_centerInParent="true"
    app:strokeWidth="10"
    app:progressStrokeWidth="10"
    app:startColor="@color/colorAccent"
    app:endColor="@color/colorPrimary"
    app:srtokeBgColor="@android:color/darker_gray"
    app:circleRadius="100"
    android:id="@+id/circe_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

自定义属性
<declare-styleable name="DrawCirceProgressView">
<attr name="circleRadius" format="integer"/>
<attr name="strokeWidth" format="integer"/>
<attr name="progressStrokeWidth" format="integer"/>
<attr name="startColor" format="color"/>
<attr name="endColor" format="color"/>
<attr name="srtokeBgColor" format="color"/>
</declare-styleable>

QQ截图20180830104726.png QQ截图20180830104743.png QQ截图20180830104755.png