自定義ProgressBar實現一個帶經驗值的圓角矩形進度條
摘要：
原創不易，尊重作者，轉載請註明出處，謝謝。
效果預覽
image
實現方式
從設計圖中我們可以看到，進度條的背景色是灰色，進度顏色是黃色，進度條中間要需要名字來描述。我們使用自定義progressbar來實現這一效果。
實現步驟
...
原創不易，尊重作者，轉載請註明出處，謝謝。
效果預覽
image
實現方式
從設計圖中我們可以看到，進度條的背景色是灰色，進度顏色是黃色，進度條中間要需要名字來描述。我們使用自定義progressbar來實現這一效果。
實現步驟
自定義ProgressBar，首先我們需要自定義顏色，我們在drawable中建立一個xml檔案，新增如下程式碼：
第一步
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@android:id/background"> <shape> <solid android:color="#d1d1d1"/> <corners android:radius="6dp" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <clip> <shape> <solid android:color="#acde73"/> <corners android:radius="6dp" /> </shape> </clip> </item> <item android:id="@android:id/progress"> <clip> <shape> <solid android:color="#FFD04B"/> <corners android:radius="6dp" /> </shape> </clip> </item> </layer-list>
@android:id/background
指進度條背景色。
@android:id/secondaryProgress
指緩衝色的進度顏色，我們在看電影時，有時可以看到，快取的顏色要比我們實際觀看的進度要長，這裡就可以設定快取進度的顏色。
@android:id/progress
指進度顏色。
第二步
接下來在style檔案中建立一個ProgreeeBar的style
<style name="ExperienceProgress" parent="@android:style/Widget.ProgressBar.Horizontal"> <item name="android:maxHeight">50dp</item> <item name="android:minHeight">10dp</item> <item name="android:indeterminateOnly">false</item> <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item> <item name="android:progressDrawable">@drawable/shape_mine_vip_progress</item> </style>
ExperienceProgress
自己隨意命名的style名稱。
android:maxHeight
ProgressBar最大的高度，當在佈局中，ProgressBar的高度設定為match_parent時，這裡最大的高度就為50dp
android:minHeight
ProgressBar最小的高度，當在佈局中，ProgressBar高度小於這個值時，它的高度不會低於最小高度
android:progressDrawable
載入ProgressBar的樣式，也就是剛才我們在drawable中建立的xml
第三步
建立一個ExperienceProgress繼承ProgressBar
public class ExperienceProgress extends ProgressBar {
private Paint mTextPaint;
private String mText;
private Rect mRect;
public ExperienceProgress(Context context) {
super(context);
init();
}
public ExperienceProgress(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ExperienceProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
private void init() {
mTextPaint = new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(getResources().getColor(R.color.title_black));
mTextPaint.setTextSize(sp2px(10));
mRect = new Rect();
}
@Override
public synchronized void setProgress(int progress) {
setText(progress);
super.setProgress(progress);
}
@Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
mTextPaint.setTextAlign(Paint.Align.CENTER);
mTextPaint.getTextBounds(mText, 0, mText.length(), mRect);
canvas.drawText(mText, getWidth() / 2 , getHeight() / 2 - mRect.centerY(), mTextPaint);
}
private void setText(int progress) {
mText = progress + "/" + getMax();
}
private int sp2px(float sp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, getResources().getDisplayMetrics());
}
}
整體程式碼很簡單，我們建立畫筆和畫筆要用的Rect區域，重寫onDraw方法，繪製我們要顯示的文字即可。這裡注意，繪製文字的大小是需要填寫px，所以我們用sp轉px的方法進行轉化。
最後一步
在佈局中引用我們自定義的ProgressBar
<com.taobaoke.juhuijie.weight.ExperienceProgress android:id="@+id/pro_vip" style="@style/ExperienceProgress" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginStart="@dimen/dp_16" android:layout_marginTop="@dimen/dp_5" android:minHeight="12dp" />
style屬於來引用我們之前建立好的style，然後我們回到activity或fragment中，填寫要顯示的文字即可。
proVip.setMax("2000");
proVip.setProgress("1352");
最終效果
image