带动画的圆形进度条

1.使用

 <com.ycx.driver.utils.widget.view.ProgressArc
            android:layout_width="@dimen/width_80"
            android:layout_height="@dimen/width_80"
            android:layout_marginTop="@dimen/margin_20"
            progressArc:progressValue="3"
            progressArc:textColor="@color/color_blue"
            progressArc:textSize="16sp"
            progressArc:totalValue="7" />

2.定义属性

<declare-styleable name="ProgressArc">
        <attr name="progressValue" format="integer" />
        <attr name="totalValue" format="integer" />
        <attr name="textValue" format="string" />
        <attr name="textSize" format="dimension" />
        <attr name="textColor" format="color" />
    </declare-styleable>

3.自定义view

public class ProgressArc extends View {
    private Paint paint; //圆环画笔
    private Paint arcPaint; //圆弧画笔
    private Paint textPaint; //文字画笔
    private int roundWidth;//圆环宽度

    //    private int[] doughnutColors = new int[]{Color.parseColor("#3BB7FF"), Color.parseColor("#1B8BFF")};
    private int[] doughnutColors = new int[]{Color.parseColor("#3BB7FF"), Color.parseColor("#1B8BFF"), Color.parseColor("#3BB7FF")};

    public ProgressArc(Context context) {
        super(context);
        init(context, null);
    }

    public ProgressArc(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public ProgressArc(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ProgressArc, 0, 0);

        progressValue = a.getInt(R.styleable.ProgressArc_progressValue, 0);
        totalValue = a.getInt(R.styleable.ProgressArc_totalValue, 0);
        float textSize = a.getDimension(R.styleable.ProgressArc_textSize, 12);
        int textColor = a.getColor(R.styleable.ProgressArc_textColor, Color.BLUE);

        roundWidth = 20;
        paint = new Paint();
        paint.setColor(Color.GRAY); //设置圆环的颜色
        paint.setStyle(Paint.Style.STROKE); //设置空心
        paint.setStrokeWidth(roundWidth); //设置圆环的宽度
        paint.setAntiAlias(true);  //消除锯齿

        arcPaint = new Paint();
        arcPaint.setStrokeCap(Paint.Cap.ROUND);
        arcPaint.setColor(Color.BLUE); //设置圆环的颜色
        arcPaint.setStyle(Paint.Style.STROKE); //设置空心
        arcPaint.setStrokeWidth(roundWidth); //设置圆环的宽度
        arcPaint.setAntiAlias(true);  //消除锯齿

        textPaint = new Paint();
        textPaint.setColor(textColor); //设置文字的颜色
        textPaint.setStrokeWidth(3); //设置文字的畫筆的宽度
        textPaint.setTextSize(textSize);

        setProgress(progressValue, totalValue);
    }


    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height;
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = 200;
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            height = 200;
        }
        setMeasuredDimension(width, height);
    }

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

        SweepGradient sweepGradient = new SweepGradient(getWidth() / 2, getHeight() / 2, doughnutColors, null);
        //旋转 不然是从0度开始渐变
        Matrix matrix = new Matrix();
        matrix.setRotate(-90, getWidth() / 2, getHeight() / 2);
        sweepGradient.setLocalMatrix(matrix);

        arcPaint.setShader(sweepGradient);
        /**
         * 画最外层的大圆环
         */
        int centre = getWidth() / 2; //获取圆心的x坐标
        int radius = (centre - roundWidth / 2); //圆环的半径
        canvas.drawCircle(centre, centre, radius, paint); //画出圆环

        /**
         * 画圆弧
         * */
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius);  //用于定义的圆弧的形状和大小的界限

//        Logger.i("draw current = " + currentArc);
        canvas.drawArc(oval, -90, currentArc, false, arcPaint);  //根据进度画圆弧

        /**
         * 绘制文字
         */
        float textWidth = textPaint.measureText(progressValue + "/" + totalValue);
        int textHeight = (int) (Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent) + 2);
        canvas.drawText(progressValue + "/" + totalValue, getWidth() / 2 - textWidth / 2, getHeight() / 2 + textHeight / 4, textPaint);

    }

    private int progressValue = 0;
    private int totalValue = 0;

    private int currentArc;

    public void setProgress(int progressValue, int totalValue) {
        this.progressValue = progressValue;
        this.totalValue = totalValue;

        ValueAnimator animator = ValueAnimator.ofFloat(0, (float) progressValue / totalValue);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.setDuration(2000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                currentArc = (int) (360 * (float) animation.getAnimatedValue());
//                Logger.i("current = " + currentArc);
                invalidate();
            }
        });
        animator.start();

    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值