自定义View的一个练习（中间带百分比显示的圆环形ProgressBar）

自定义View实战(实现带百分比文字的圆环形Progress Bar)

效果

首先，贼布局文件中使用：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.zhenjie.customview.RoundProgressBar
        android:id="@+id/progress_bar"
        android:layout_centerInParent="true"
        android:progress="40"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:textColor="#985017"
        android:padding="10dp"
        app:radius="30dp"
        />

效果是这样的：

实现过程

继承View类

要自定义一个View，首先肯定需要自己新建一个类，继承系统的View类。这里我新建了RoundProgressBar类，继承View。

自定义属性名称和类型

然后，定义需要用到的自定义属性。在res/values目录下面，新建attrs.xml，然后在里面定义自己需要用到的属性。当然，也可以沿用系统本来就有的属性，例如，文字大小，“android:textSize”。attrs.xml文件内容如下：

<resources>
    <declare-styleable name="RoundProgressBar">
        <attr name="textColor" format="color"/>
        <attr name="line_width" format="dimension"/>
        <attr name="radius" format="dimension"/>
        <attr name="android:progress"/>
        <attr name="android:textSize"/>
    </declare-styleable>
</resources>

重写自定义View类的回调方法，根据自己需要实现

大概的思路是这样子：

其中有一些可以优化的地方，例如，在onDraw方法中尽量不要去new一些对象，如果这些对象是会被复用的，尽可能的提取出来再初始化的时候，或者在onSizeChange方法中进行初始化。这样就可以提高这个自定义控件的性能。

RoundProgressBar.java的代码如下：

package com.zhenjie.customview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

public class RoundProgressBar extends View {


    private int mRadius, mColor, mLineWidth, mTextSize, mProgress;
    private Paint mPaint;
    private RectF arcRectF;
    private Rect bound = new Rect();

    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(mColor);
        mPaint.setTextSize(mTextSize);
    }

    public RoundProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBar);
        mRadius = (int) ta.getDimension(R.styleable.RoundProgressBar_radius, dp2px(30));
        mColor = ta.getColor(R.styleable.RoundProgressBar_textColor, 0xffff0000);
        mLineWidth = (int) ta.getDimension(R.styleable.RoundProgressBar_line_width, dp2px(3));
        mTextSize = (int) ta.getDimension(R.styleable.RoundProgressBar_android_textSize, dp2px(16));
        mProgress = ta.getInt(R.styleable.RoundProgressBar_android_progress, 0);
        ta.recycle();
        initPaint();
    }

    private float dp2px(int dpVal) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal,
                getResources().getDisplayMetrics());
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int width = 0;
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            int needWidth = measureWidth() + getPaddingLeft() + getPaddingRight();
            if (widthMode == MeasureSpec.AT_MOST) {
                width = Math.min(needWidth, widthSize);
            } else {
                width = needWidth;
            }
        }
        int height = 0;
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            int needHeight = measureHeight() + getPaddingTop() + getPaddingBottom();
            if (heightMode == MeasureSpec.AT_MOST) {
                height = Math.min(needHeight, heightSize);
            } else {
                height = needHeight;
            }
        }
        width = Math.min(width,height);
        setMeasuredDimension(width,width);
    }

    private int measureHeight() {
        return mRadius*2;
    }


    private int measureWidth() {
        return mRadius*2;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mLineWidth * 1.0f / 4);
        int width = getWidth();
        int height = getHeight();
        canvas.drawCircle(width / 2, height / 2, width / 2 - getPaddingLeft() - mPaint.getStrokeWidth() / 2, mPaint);
        mPaint.setStrokeWidth(mLineWidth);
        canvas.save();
        canvas.translate(getPaddingLeft(), getPaddingTop());
        float angle = mProgress * 1.0f / 100 * 360;
        //外接矩形
        canvas.drawArc(arcRectF, 270, angle, false, mPaint);
        canvas.restore();
        String text = mProgress + "%";
        mPaint.setStrokeWidth(0);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mPaint.getTextBounds(text,0,text.length(),bound);
        int y = getHeight()/2;
        int textHeight = bound.height();
        canvas.drawText(text,0,text.length(),getWidth()/2, y+textHeight/2,mPaint);
    }


    public static final String INSTANCE = "instance";
    public static final String KEY_PROGRESS = "key_progress";

    @Nullable
    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle = new Bundle();
        bundle.putInt(KEY_PROGRESS, mProgress);
        bundle.putParcelable(INSTANCE, super.onSaveInstanceState());
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        if (state instanceof Bundle) {
            Bundle bundle = (Bundle) state;
            Parcelable parcelable = bundle.getParcelable(INSTANCE);
            super.onRestoreInstanceState(parcelable);
            mProgress = bundle.getInt(KEY_PROGRESS);
            return;
        }
    }

    public void setProgress(int progress){
        mProgress = progress;
        invalidate();
    }

    public int getProgress(){
        return mProgress;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        arcRectF = new RectF(0,0,getWidth()-getPaddingLeft()*2,getHeight()-getPaddingTop()*2);
        super.onSizeChanged(w, h, oldw, oldh);
    }
}

使用示例

布局文件就是文章一开始的那个，MainActivity的代码如下：

import android.animation.ObjectAnimator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private RoundProgressBar progressBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar = findViewById(R.id.progress_bar);
        progressBar.setOnClickListener((v) -> {
            ObjectAnimator.ofInt(progressBar,"progress",0,100).setDuration(3000).start();
        });

    }
}