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

源码下载地址