Android 从 0 开始学习自定义 View（四） 自定义进

先看看效果图

1.自定义 View 的基本流程

• 创建 View Class
• 创建 attr 属性文件，确定属性
• View Class 绑定 attr 属性
• onMeasure 测量
• onDraw 绘制

1.1 创建 View Class

public class ProgressView extends View {
    public ProgressView(Context context) {
        this(context, null);
    }
    
    public ProgressView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

1.2 创建 attr 属性

<declare-styleable name="ProgressView">
    <!--内圆颜色-->
    <attr name="innerColor" format="color" />
    <!--外圆颜色-->
    <attr name="outColor" format="color" />
    <!--圆大小-->
    <attr name="roundWidth" format="dimension" />
    <!--文字大小-->
    <attr name="progressTextSize" format="dimension" />
    <!--文字颜色-->
    <attr name="progressTextColor" format="color"></attr>
</declare-styleable>

1.3 绑定 attr 属性

private void initAttr(Context context, AttributeSet attrs) {
    TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ProgressView);
    //内圆颜色
    mInnerColor = array.getColor(R.styleable.ProgressView_innerColor, mInnerColor);
    //外圆颜色
    mOutColor = array.getColor(R.styleable.ProgressView_outColor, mOutColor);
    //圆大小
    mWidth = (int) array.getDimension(R.styleable.ProgressView_roundWidth, mWidth);

    //文字大小
    mTextSize = array.getDimensionPixelSize(R.styleable.ProgressView_progressTextSize, mTextSize);
    //文字颜色
    mTextColor = array.getColor(R.styleable.ProgressView_progressTextColor, mTextColor);
    array.recycle();
}

1.4 onMeasure

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //宽
    int width = MeasureSpec.getSize(widthMeasureSpec);
    //高
    int height = MeasureSpec.getSize(heightMeasureSpec);
    //设置宽高
    setMeasuredDimension(Math.min(width, height), Math.min(width, height));
}

1.5 onDraw

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //画内圆
    int center = getWidth() / 2;
    canvas.drawCircle(center, center, center - mWidth / 2, mInnerPaint);
    //画外圆
    RectF rectF = new RectF(mWidth / 2, mWidth / 2, getWidth() - mWidth / 2, getHeight() - mWidth / 2);
    if (MaxProgress == 0) return;
    float angle = (float) CurrentProgress / MaxProgress;
    canvas.drawArc(rectF, 0, angle * 360, false, mOutPaint);
    //画文字
    String text = ((int) (angle * 100)) + "%";
    int textWidth = (int) mTextPaint.measureText(text);
    Paint.FontMetricsInt fontMetricsInt = mTextPaint.getFontMetricsInt();
    int y = (fontMetricsInt.bottom - fontMetricsInt.top) / 2 - fontMetricsInt.bottom;
    canvas.drawText(text, getWidth() / 2 - textWidth / 2, getHeight() / 2 + y, mTextPaint);
}

和前面介绍的自定义 View 的基本流程都差不多，自定义进度条就介绍到这里了，如果有什么写得不对的，可以在下方评论留言，我会第一时间改正。

Github 源码链接