簡單實現ProgressBar三色圖(帶有百分比)
阿新 • • 發佈:2019-02-10
實現帶有進度百分比的三色圖
實現思路:
利用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);