Android进度条带背景图和百分比

效果图：

百分比可以在布局文件中通过app:cpbShowPercent="true"配置显示或隐藏

代码简单易读，可自行定制修改

附上代码：

public class CustomProgressBar extends ProgressBar {
    private static final String TAG = "CustomProgressBar";
    private Paint mPaint;
    private Bitmap bitmap;
    private int bitmapWidth;
    private int cpbIcon;
    private int cpbPercentColor = 0xffffffff;
    private int cpbPercentSize = sp2px(14);
    private boolean cpbShowPercent = false;

    public CustomProgressBar(Context context) {
        this(context, null);
    }

    public CustomProgressBar(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomProgressBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.customProgressBar);
        cpbPercentColor = typedArray.getColor(R.styleable.customProgressBar_cpbPercentColor, cpbPercentColor);
        cpbPercentSize = typedArray.getDimensionPixelSize(R.styleable.customProgressBar_cpbPercentSize, cpbPercentSize);
        cpbIcon = typedArray.getResourceId(R.styleable.customProgressBar_cpbIcon, cpbIcon);
        cpbShowPercent = typedArray.getBoolean(R.styleable.customProgressBar_cpbShowPercent, cpbShowPercent);
        typedArray.recycle();
        init();
    }

    private void init() {


        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setColor(cpbPercentColor);
        mPaint.setTextSize(cpbPercentSize);
        mPaint.setTextAlign(Paint.Align.CENTER);
        bitmap = BitmapFactory.decodeResource(getResources(), cpbIcon);
        bitmapWidth = bitmap.getWidth();

    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(widthMeasureSpec, bitmap.getHeight());
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int currentProgress = this.getProgress();
        int mWidth = this.getWidth();
        int offset = (int) (currentProgress * 1.0 / getMax() * mWidth);
        int moveDis = 0;
        if (offset >= (bitmapWidth / 2) && offset <= (mWidth - bitmapWidth / 2)) {
            moveDis = offset - bitmapWidth / 2;
        } else if (offset < (bitmapWidth / 2)) {
            moveDis = 0;
        } else if (offset > (mWidth - bitmapWidth / 2)) {
            moveDis = mWidth - bitmapWidth;
        }
        canvas.drawBitmap(bitmap, moveDis, 0, mPaint);

        if (cpbShowPercent) {
            String text = currentProgress + "%";
            //获取文字的高度
            Rect bounds = new Rect();
            mPaint.getTextBounds(text, 0, text.length(), bounds);
            canvas.drawText(text, bitmap.getWidth() / 2 + moveDis, bitmap.getHeight() / 2 + bounds.height() / 2, mPaint);
        }
    }

    private int sp2px(float v) {
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, v, displayMetrics);
    }
}

相关属性：

 <declare-styleable name="customProgressBar">
        <attr name="cpbIcon" format="reference"/>
        <attr name="cpbPercentColor" format="color"/>
        <attr name="cpbPercentSize" format="dimension"/>
        <attr name="cpbShowPercent" format="boolean"/>
    </declare-styleable>

使用：按照ProgressBar的使用方法使用即可

<com.wobuzhidao.iflydemo.CustomProgressBar
        android:id="@+id/pb"
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="0"
        app:cpbIcon="@drawable/fly"
        app:cpbPercentSize="14sp"
        app:cpbPercentColor="@color/colorAccent"
        app:cpbShowPercent="true"/>

更多知识可以关注公众号获取

欢迎大家关注我的公众号，微信搜索、扫一扫或者长按识别二维码均可