自定义View:01-步数进度条

1、仿运动的步数条，效果图如下

步数图.gif

一、自定义属性：
1.1、内圆弧、外圆弧的颜色
1.2、字体、圆弧的大小
二、继承View
2.1、onMeasure（）方法测量设置view的大小
2.2、onDraw() 绘制内外圆弧、文字
三、使用
3.1、布局中使用自定义的view，同时加上自定义的属性
3.2、调用 View设置步数的方法,同时加上属性动画

2、实现

2.1、自定义属性：

没有attrs.xml 文件就新建一个

image.png

attrs.xml

2.2、新建类StepView_01，继承View

public class StepView_01 extends View {

    private Paint mPaint = new Paint();
    private int outerColor = Color.WHITE;
    private int insideColor = Color.RED;
    private int textSize = 15;
    private int radianSize = 30;

    private int mCurrentStep = 0;//当前步数
    private int mMaxSteps = 5000; //总步数

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


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

    public StepView_01(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
      TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.stepView);
      outerColor = array.getColor(R.styleable.stepView_outer, outerColor);
       insideColor = array.getColor(R.styleable.stepView_inside, insideColor);
       textSize = array.getInteger(R.styleable.stepView_textSize, textSize);
       radianSize = array.getInteger(R.styleable.stepView_radian, radianSize);
        array.recycle();
    }

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

        int startAngle = 135; //起始弧度
        int angle = 270; //划过的弧度

        // 设置圆弧画笔的宽度
        mPaint.setStrokeWidth(30);
        // 设置为 线头为 圆角
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        // 设置画笔颜色
        mPaint.setColor(Color.WHITE);
        mPaint.setStyle(Paint.Style.STROKE);

        mPaint.setAntiAlias(true);

        int centerX = getWidth() / 2;//中心点
        int centerY = getHeight() / 2;//中心点
        int radius = centerX / 2;    // 半径

        // 1.画背景大圆弧
        RectF outer = new RectF(radius, centerY - radius, centerX + radius, centerY + radius);
        canvas.drawArc(outer, startAngle, angle, false, mPaint);


//      2.画内圆弧
        mPaint.setColor(Color.BLUE);
        RectF inside = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        if (mMaxSteps == 0) return;
        float sweepAngle = (float) mCurrentStep / mMaxSteps;

        canvas.drawArc(inside, startAngle, sweepAngle * 270, false, mPaint);

//        3.中心文字
        mPaint = new Paint();
        mPaint.setColor(Color.RED);
        mPaint.setTextSize(50);

        String stepText = mCurrentStep + "";
        Rect textBounds = new Rect();
        mPaint.getTextBounds(stepText, 0, stepText.length(), textBounds);
        int dx = getWidth() / 2 - textBounds.width() / 2 - radianSize/2;
        canvas.drawText(stepText, dx, centerY + 30, mPaint);
    }

/**
*测量View
**/
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);

        setMeasuredDimension(width, height);
    }

    //设置最大步数值
    public  void setStepMax(int stepMax){
        this.mMaxSteps=stepMax;
    };

    //设置当前步数值
    public  void setCurrentStep(int step){
        this.mCurrentStep=step;
        //不断绘制
        invalidate();
    };
}

2.3、使用
view_setp_01.xml

fragment :

public class StepFragment_01 extends Fragment {
    private EditText editText;
    private StepView_01 stepView;
    private static final String TAG = "StepFragment_01";
    private Button button;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.view_step_01, container, false);
        stepView = view.findViewById(R.id.stepView);
        editText = view.findViewById(R.id.stepView_edit);
        button = view.findViewById(R.id.stepView_btn);

        stepView.setStepMax(5000);//设置最大步数

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setAnimator();
            }
        });

        return view;
    }

    //通过属性动画调用自定义view的方法，1.5秒内绘制出进度条
    private void setAnimator() {
        Log.d(TAG, "setAnimator: " + Integer.parseInt(editText.getText().toString()));
        ValueAnimator valueAnimator = ObjectAnimator.ofFloat(0, Integer.parseInt(editText.getText().toString())); //0-**
        valueAnimator.setDuration(1500);//需要多少秒
        valueAnimator.setInterpolator(new DecelerateInterpolator());//插值器
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float step = (float) animation.getAnimatedValue();
                Log.d(TAG, "onAnimationUpdate: " + (int) step);
                stepView.setCurrentStep((int) step);
            }
        });
        valueAnimator.start();
    }