原创不易，尊重作者，转载请注明出处，谢谢。

效果预览

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

android:indeterminateOnly

true表示进度值不确定，false表示进度值确定。

android:indeterminateDrawable

样式，我们直接使用系统自带的即可。

第三步

创建一个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

<ExperienceProgress
                android:id="@+id/pro_vip"
                style="@style/ExperienceProgress"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:minHeight="12dp" />

style属于来引用我们之前创建好的style，然后我们回到activity或fragment中，填写要显示的文字即可。

proVip.setMax("2000");
proVip.setProgress("1352");

最终效果

image