Android开发之定制ProgressBar

前言：相信你看了《Android开发之Paint的高级使用》博客，对Paint有一定的认识，今天我带给大家一篇一个关于paint的小练习，定制我们知己的ProgressBar，这里我们不讨论google给我们提供的ProgressBar，也不讨论基于google的ProgressBar自定义的样式。

------------------------分割线------------------------

先看下效果图：

废话不多说了，直接看代码：

首先定义几个属性：

    <declare-styleable name="CustomProgressBar">
        <attr name="roundProgressColor" format="color"></attr>
        <attr name="roundColor" format="color"></attr>
        <attr name="roundWidth" format="dimension"></attr>
        <attr name="textSize" format="dimension"></attr>
        <attr name="textColor" format="color"></attr>
        <attr name="max" format="integer"></attr>
        <attr name="textShow" format="boolean"></attr>
        <attr name="style">
            <enum name="STROKE" value="0"></enum>
            <enum name="FILL" value="1"></enum>
        </attr>

    </declare-styleable>

新建CustomProgressBar继承自View：

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by Fly on 2017/6/3.
 */

public class CustomProgressBar extends View {

    private Paint paint;
    private int max;
    private int roundColor;
    private int roundProgressColor;
    private int textColor;
    private float textSize;
    private float roundWidth;
    private boolean textShow;
    private int style;
    private int progress;
    public static final int STROKE = 0;
    public static final int FILL = 1;

    public CustomProgressBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgressBar);
        max = typedArray.getInteger(R.styleable.CustomProgressBar_max, 100);
        roundColor = typedArray.getColor(R.styleable.CustomProgressBar_roundColor, Color.RED);
        roundProgressColor = typedArray.getColor(R.styleable.CustomProgressBar_roundProgressColor, Color.BLUE);
        textColor = typedArray.getColor(R.styleable.CustomProgressBar_textColor, Color.GREEN);
        textSize = typedArray.getDimension(R.styleable.CustomProgressBar_textSize, 55f);
        roundWidth = typedArray.getDimension(R.styleable.CustomProgressBar_roundWidth, 10);
        textShow = typedArray.getBoolean(R.styleable.CustomProgressBar_textShow, true);
        style = typedArray.getInt(R.styleable.CustomProgressBar_style, 0);

        typedArray.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画默认的大圆环
        int center = getWidth() / 2;//中心坐标点
        float radius = center - roundWidth / 2;//半径
        paint.setColor(roundColor);
        paint.setStyle(Paint.Style.STROKE);//设置空心（描边）
        paint.setStrokeWidth(roundWidth);//圆环的宽度
        paint.setAntiAlias(true);
        canvas.drawCircle(center, center, radius, paint);

        //画进度百分比
        paint.setColor(textColor);
        paint.setStrokeWidth(0);//圆环的宽度
        paint.setTextSize(textSize);
        paint.setTypeface(Typeface.DEFAULT_BOLD);

        int percent = (int) (progress / (float) max * 100);
        //y公式：可以看我的那一片关于文本matrics的分析图
        if (textShow && percent != 0 && style == STROKE) {
            canvas.drawText(percent + "%",
                    (getWidth() - paint.measureText(percent + "%")) / 2f,
                    getWidth() / 2f - (paint.descent() + paint.ascent()) / 2f, paint);
        }

        //画圆弧
        //矩形区域，定义圆弧的形状的大小
        RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
        paint.setColor(roundProgressColor);
        paint.setStrokeWidth(roundWidth);
        switch (style) {
            case STROKE:
                paint.setStyle(Paint.Style.STROKE);
                canvas.drawArc(oval, 0, 360 * progress / max, false, paint);
                break;
            case FILL:
                paint.setStyle(Paint.Style.FILL_AND_STROKE);
                if (progress != 0)
                    canvas.drawArc(oval, 0, 360 * progress / max, true, paint);
                break;
        }
    }

    public synchronized int getMax() {
        return max;
    }

    public synchronized void setMax(int max) {
        if (max < 0) {
            throw new IllegalArgumentException("max不能小于0");
        }
        this.max = max;
    }

    public synchronized int getProgress() {
        return progress;
    }

    public synchronized void setProgress(int progress) {
        if (progress < 0) {
            throw new IllegalArgumentException("progress不能小于0");
        }
        if (progress > max) {
            progress = max;
            this.progress = progress;
        }
        if (progress <= max) {
            this.progress = progress;
            postInvalidate();
        }
    }

    public int getRoundColor() {
        return roundColor;
    }


    public void setRoundColor(int roundColor) {
        this.roundColor = roundColor;
    }


    public int getRoundProgressColor() {
        return roundProgressColor;
    }


    public void setRoundProgressColor(int roundProgressColor) {
        this.roundProgressColor = roundProgressColor;
    }


    public int getTextColor() {
        return textColor;
    }


    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }


    public float getTextSize() {
        return textSize;
    }


    public void setTextSize(int textSize) {
        this.textSize = textSize;
    }


    public float getRoundWidth() {
        return roundWidth;
    }


    public void setRoundWidth(int roundWidth) {
        this.roundWidth = roundWidth;
    }


    public boolean isTextShow() {
        return textShow;
    }


    public void setTextShow(boolean textShow) {
        this.textShow = textShow;
    }
}

文本matrics的分析图：

在我们中的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center"
    tools:context="com.fly.lsn30_customprogressbar.MainActivity">

    <com.fly.lsn30_customprogressbar.CustomProgressBar
        android:id="@+id/progressbar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:roundProgressColor="#ff00ff"
        app:roundWidth="15dp"
        app:textColor="#ffff00"
        app:textSize="20dp" />

</LinearLayout>

在MainActivity中使用：

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private CustomProgressBar progressbar;
    private int progress = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        progressbar = (CustomProgressBar) findViewById(R.id.progressbar);
        progressbar.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        while (progress <= 100) {
                            progress += 2;
                            progressbar.setProgress(progress);
                            try {
                                Thread.sleep(100);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }
                        }
                    }
                }).start();
            }
        });
    }
}

------------------大家可以自己试着自己再封装完善一下-----------------