實現帶有進度百分比的三色圖

實現思路：

利用progressBar第二進度，設定不同的進度背景，計算進度比例通過drawText將比例畫在各個進度上

上程式碼：

View：

public class TextProgressBar extends ProgressBar {

    private Paint mPaint;
    private String text_first;
    private String text_sencond;
    private String text_third;
    private float firstScale;
    private
 
 float sencondScale;
    private int firstProgress;
    private int sencondProgress;

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

    public TextProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public TextProgressBar
 
(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.WHITE);
        mPaint.setTextSize(sp2px(16));
    }

    @Override
 

    protected synchronized void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (getMax() == 0) {
            setVisibility(GONE);
        }
        Rect rect = new Rect();
        mPaint.getTextBounds(text_first, 0, text_first.length(), rect);
        int y = (getHeight() / 2) - rect.centerY();
        float AllWithOutFirst = getWidth() - (getWidth() * firstScale);
        if (firstProgress != 0) {
            int x1 = (int) (getWidth() * firstScale - rect.width()) / 2;
            canvas.drawText(text_first, x1, y, mPaint);
        }
        if (firstProgress == getMax()) {
            return;
        }
        if (sencondProgress == getMax()) {
            mPaint.getTextBounds(text_sencond, 0, text_sencond.length(), rect);
            int x2 = (int) (AllWithOutFirst - rect.width()) / 2 + (int) ((getWidth() * firstScale));
            canvas.drawText(text_sencond, x2, y, mPaint);
            return;
        }
        if (firstProgress <= sencondProgress) {
            float secondWithOutFirst = (getWidth() * sencondScale) - (getWidth() * firstScale);
            if (sencondProgress != 0) {
                mPaint.getTextBounds(text_sencond, 0, text_sencond.length(), rect);
                int x2 = (int) (secondWithOutFirst - rect.width()) / 2 + (int) ((getWidth() * firstScale));
                canvas.drawText(text_sencond, x2, y, mPaint);
            }
            mPaint.getTextBounds(text_third, 0, text_third.length(), rect);
            int x3 = (int) (AllWithOutFirst - (secondWithOutFirst) - rect.width()) / 2 + (int) (getWidth() * firstScale) + (int) (secondWithOutFirst);
            canvas.drawText(text_third, x3, y, mPaint);
        } else {
            mPaint.getTextBounds(text_third, 0, text_third.length(), rect);
            int x3 = (int) (AllWithOutFirst - rect.width()) / 2 + (int) ((getWidth() * firstScale));
            canvas.drawText(text_third, x3, y, mPaint);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        firstProgress = firstProgress > getMax() ? getMax() : (firstProgress < 0 ? 0 : firstProgress);
        sencondProgress = sencondProgress > getMax() ? getMax() : (sencondProgress < 0 ? 0 : sencondProgress);
        super.setProgress(firstProgress);
        super.setSecondaryProgress(sencondProgress);
        firstScale = firstProgress / (float) getMax();
        text_first = Math.round((firstScale * 100)) + "%";
        sencondScale = sencondProgress / (float) getMax();
        text_sencond = Math.round(((sencondProgress - firstProgress) / (float) getMax() * 100)) + "%";
        if (firstProgress <= sencondProgress) {
            text_third = Math.round(((getMax() - (sencondProgress)) / (float) getMax() * 100)) + "%";
        } else {
            text_third = Math.round(((getMax() - (firstProgress)) / (float) getMax() * 100)) + "%";
        }
    }

    public void setSecondaryProgress(int secondaryProgress) {
        sencondProgress = secondaryProgress;
    }

    public void setProgress(int progress) {
        firstProgress = progress;
    }

    public int sp2px(float spValue) {
        DisplayMetrics dm = getContext().getApplicationContext().getResources().getDisplayMetrics();
        float scaledDensity = dm.scaledDensity;
        return (int) (spValue * scaledDensity + 0.5f);
    }
}

XML：

<com.example.***.myapplication.view.TextProgressBar
    android:id="@+id/progress"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="30dp"
    android:layout_margin="10dp"
    android:progressDrawable="@drawable/progressbar" />

@drawable/progressbar：↓↓↓

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background" >   //定義背景色
        <shape>
            <corners android:radius="20dip" />
            <gradient android:angle="270" android:centerColor="#c7c7c7"
                android:centerY="0.75" android:endColor="#c7c7c7"
                android:startColor="#c7c7c7" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">   //定義第二進度
        <clip>
            <shape>
                <corners android:radius="20dip" />
                <gradient android:angle="270" android:centerColor="#99CC99"
                    android:centerY="0.75" android:endColor="#99CC99"
                    android:startColor="#99CC99" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">  //定義第一進度
        <clip>
            <shape>
                <corners android:radius="20dip" />
                <gradient android:angle="270" android:centerColor="#4abbfd"
                    android:centerY="0.75" android:endColor="#4abbfd"
                    android:startColor="#4abbfd" />
            </shape>
        </clip>
    </item>
</layer-list>

使用：

TextProgressBar progressBar = (TextProgressBar) findViewById(R.id.progress);
progressBar.setSecondaryProgress(100);
progressBar.setProgress(50);
progressBar.setMax(200);

效果：