【需求】自定义ProgressBar实现一个带经验值的圆角矩形进度条

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

效果预览

image

实现方式

从设计图中我们可以看到,进度条的背景色是灰色,进度颜色是黄色,进度条中间要需要名字来描述。我们使用自定义progressbar来实现这一效果。

实现步骤

自定义ProgressBar,首先我们需要自定义颜色,我们在drawable中创建一个xml文件,添加如下代码:

第一步



    
        
            
            
        
    

    
        
            
                
                
            
        
    

    
        
            
                
                
            
        
    


@android:id/background

指进度条背景色。

@android:id/secondaryProgress

指缓冲色的进度颜色,我们在看电影时,有时可以看到,缓存的颜色要比我们实际观看的进度要长,这里就可以设置缓存进度的颜色。

@android:id/progress

指进度颜色。

第二步

接下来在style文件中创建一个ProgreeeBar的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


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

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

最终效果

image

你可能感兴趣的:(【需求】自定义ProgressBar实现一个带经验值的圆角矩形进度条)