自定义样式及带数字ProgressBar

Android系统自带的ProgressBar样式简单，很多时候不能满足项目需求。最近因项目需要，下了一番功夫研究了一下并自定义了一个ProgressBar，特此记录，并希望能帮助到有需要的朋友们~~~

先上效果图：



其中第一个为系统样式，不多说。

第二个为自定义样式的ProgressBar。具体实现方式：

1.在drawable目录下新建一个xml文件，本例中为progress_drawable.xml,具体代码如下：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!-- 设置背景资源 --> <item android:id="@android:id/background">

<nine-patch android:src="@drawable/img_39e3c5"/> </item>

<!-- 设置进度条资源 --> <item android:id="@android:id/progress">

<clip> <nine-patch android:src="@drawable/img_94fbdf"/> </clip> </item></layer-list>定义了一个layer-list标签的图层样式，其中包含的两个标签分别表示ProgressBar的背景样式及进度样式。

2.在布局文件中将步骤1中的样式指定给ProgressBar的progressDrawable属性，具体代码如下：

<ProgressBar
android:id="@+id/custom_pb"
android:layout_marginTop="5dp"
android:progressDrawable="@drawable/progress_drawable"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="200dp"
android:layout_height="35dp"/>

第三个样式为带文字的ProgressBar,先上代码

package com.bruce.customprogressbardemo.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.ProgressBar;

/**
* Created by Bruce on 2015/9/23.
*/
public class DigitProgressBar extends ProgressBar {

private float textSize = 45.0f;
private Paint mPaint;
private String mText, mSecondText;
private Rect mRect;
private int textColor = 0xFF2A2A2A;
private boolean drawSecondTxt = false;

public DigitProgressBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

public DigitProgressBar(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public DigitProgressBar(Context context) {
super(context);
init();
}

private void init() {
mPaint = new Paint(Paint.FAKE_BOLD_TEXT_FLAG);//设置文字粗体
mPaint.setAntiAlias(true); // 设置画笔的锯齿效果
mPaint.setColor(textColor);
mPaint.setTextSize(textSize);
mRect = new Rect();
}

@Override
public synchronized void setProgress(int progress) {
setProgressText(progress);
super.setProgress(progress);
}

private void setProgressText(int progress) {
mText = formatDecim2Per(progress * 1.0 / getMax() * 100);
mSecondText = formatDecim2Per((1 - (progress * 1.0 / getMax())) * 100);
}

@Override
protected synchronized void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制第一个百分比
mPaint.getTextBounds(mText, 0, mText.length(), mRect);
int x = 25;
int y = (getHeight() / 2) - mRect.centerY();
canvas.drawText(mText, x, y, mPaint);

//绘制第二个百分比
if (drawSecondTxt) {
mPaint.getTextBounds(mSecondText, 0, mSecondText.length(), mRect);
int secondx = getWidth() - 25 - mRect.width();
int secondy = (getHeight() / 2) - mRect.centerY();
canvas.drawText(mSecondText, secondx, secondy, mPaint);
}
}

public float getTextSize() {
return textSize;
}

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

public int getTextColor() {
return textColor;
}

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

public boolean isDrawSecondTxt() {
return drawSecondTxt;
}

public void setDrawSecondTxt(boolean drawSecondTxt) {
this.drawSecondTxt = drawSecondTxt;
}

public static String formatDecim2Per(double decim) {
String result = String.format("%.2f", decim);
return result + "%";
}

}

在这个自定义View中，核心代码为onDraw()方法，其中设置了绘制区域，并通过修改文字绘制的起始点坐标，最后调用drawText方法绘制。

是否显示右端的文字是通过setDrawSecondTxt()方法设置的，另外还提供了设置文字大小和文字颜色的API，可根据需求定制文字样式。

如文章有错漏或demo有BUG,欢迎指正，求教育，求教导~~~

源码下载地址