自定义样式及带数字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,欢迎指正，求教育，求教导~~~

源码下载地址