android开发:自定义view绘制圆形进度条

效果:

在这里插入图片描述

实现这个效果需要掌握的小东西还是有蛮多的:
1.学会使用属性动画ObjectAnimator,给我们自定义的属性设置动画
2.自定义view基本的画圆、画圆弧、画文字,熟悉Paint等
3.学会使用SweepGradient,android有一系列Gradient可以设置画笔渐变

上面知识还不会的同学可以看一下这个系列的博客:HenCoder Android 开发进阶: 自定义 View
能够坚持看完后,自定义view对你来说只是小菜一碟,以后UI问你的时候你就可以大声回答:不要问我行不行,我就问你要不要?

代码:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Shader;
import android.graphics.SweepGradient;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * @Author: david.lvfujiang
 * @Date: 2020/1/15
 * @Describe:
 */
public class SportsView extends View {
    public float progress = 0;
    int[] colorArr = {Color.RED, Color.GREEN, Color.YELLOW, Color.RED};
    private int mCircleCenterX;
    private int mCircleCenterY;
    private int mCircleRadius;
    private Paint mCirclePaint, mArcPaint, mTextPaint;

    {
        //初始化圆画笔
        mCirclePaint = new Paint();
        //笔宽
        mCirclePaint.setStrokeWidth(150);
        //抗锯齿
        mCirclePaint.setAntiAlias(true);
        //画笔风格:线条
        mCirclePaint.setStyle(Paint.Style.STROKE);
        //设置画笔颜色
        mCirclePaint.setColor(Color.parseColor("#808080"));

        //初始化圆弧画笔
        mArcPaint = new Paint();
        mArcPaint.setStrokeWidth(150);
        mArcPaint.setAntiAlias(true);
        //设置画笔形状:圆头
        mArcPaint.setStrokeCap(Paint.Cap.ROUND);
        mArcPaint.setStyle(Paint.Style.STROKE);

        //初始化文字画笔
        mTextPaint = new Paint();
        mTextPaint.setTextSize(200);
        mTextPaint.setAntiAlias(true);

    }

    public SportsView(Context context) {
        super(context);
    }

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

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

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


    // 创建 getter 方法
    public float getProgress() {
        return progress;
    }

    // 创建 setter 方法
    public void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //获取圆心坐标和半径
        mCircleCenterX = getWidth() / 2;
        mCircleCenterY = getHeight() / 2;
        mCircleRadius = 400;

        //绘制背景灰色的圆
        canvas.drawCircle(mCircleCenterX, mCircleCenterY, mCircleRadius, mCirclePaint);

        //给画笔设置渐变效果,扫描渐变
        Shader shader = new SweepGradient(mCircleCenterX, mCircleCenterY, colorArr, null);
        mArcPaint.setShader(shader);
        //绘制圆弧
        canvas.drawArc(mCircleCenterX - 400, mCircleCenterY - 400,
                mCircleCenterX + 400, mCircleCenterY + 400, 180,
                progress, false, mArcPaint);

        //绘制文字
        canvas.drawText(String.valueOf((int) progress) + "%", mCircleCenterX - 200, mCircleCenterY + 50, mTextPaint);
    }
}

调用:

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main5);
        // 创建 ObjectAnimator 对象
        SportsView sportsView = findViewById(R.id.sportsView);
        ObjectAnimator animator = ObjectAnimator.ofFloat(sportsView, "progress", 0, 360);
        //设置时间
        animator.setDuration(5000);
		// 执行动画
        animator.start();
    }
}

发布了194 篇原创文章 · 获赞 42 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_39027256/article/details/103988830