自定义具有透明度变化和前进的ProgressBar

2016-10-14

自定义渐进的进度条

结果图

自定义进度条的需求

需求是：他可以根据进度的多少显示进度条，然后同时改变进度显示的透明度和当前进度，比如50%的时候显示的进度是50分，透明度是当前颜色的一半透明度。进度是70%的时候，则是70%的透明度。

自定义进度条的分析

首先我们不是使用Handler实现，当然你也可以使用handler，我们这里完全使用自定义View的形式。我们需要哪些属性，为了扩展性，我们定义了一些属性，分别如下：

<declare-styleable name="DynamicProgressBarStyle">
       <!--当前进度,进度条没有透明度时候的颜色,进度条更新速率(ms),文字大小，进度条最大值，文字宽度，文字-->
       <attr name="dynamicProgress" format="integer" />
       <attr name="dynamicColor" format="color|reference" />
       <attr name="dynamicRate" format="integer" />
       <attr name="dynamicTextSize" format="dimension|reference" />
       <attr name="dynamicMax" format="integer" />
       <attr name="dynamicSpec" format="dimension|reference" />
       <attr name="dynamicText" format="string|reference" />
   </declare-styleable>

他们代表的是：
1.目前的进度
2.进度条的颜色
3.更新频率(毫秒)
3.文字大小
4.进度条最大值
5.文字需要的间距
6.文字，只是需要后面的文字，比如当前进度是50分，那么text就应该是”分”
然后，我们需要分析是怎么画的，我们使用一个可以带有边角的RectF去画进度，drawText画文字，每隔一段时间重画，这个时间就是我们自己定义的rate

实现

我们需要的属性有

 private Paint mPaint;
private int progress; // 总分数
private int progressColor;// 颜色
private int currentAlphaLevel;// 实时的透明度比例
private float currentProgress;// 实时的长度
private float textSize;// 字体大小
private int rateProgress; //每隔30毫秒画一次，最多一百次
private float specProgress; // 文字需要占整一个View的宽度
//三种rgb的原值
private int redProgress;
private int greenProgress;
private int blueProgress;
private String textProgress; // 后边的文字
private float proportion;// 总体比例，是一个float，小于等于1
private float perProgress; // 每次更新的进度

我们有两个使用的方法，一种是通过java代码，一种是通过xml，使用xml的需要find到这个view之后再根据具体的传入progress就好。代码如下：第一种的参数

/**
     * Java代码直接new的使用
     *
     * @param context
     */
    public DynamicProgressBar(Context context) {
        this(context, MAX_PROGRESS);
    }
 
    /**
     * 动态添加View的时候可以使用该View
     *
     * @param context
     * @param progress
     */
    public DynamicProgressBar(Context context, int progress) {
        super(context);
        this.textSize = LiWeiJieUtil.getDimen(R.dimen.default_dynamic_text_size, getContext());
        setRGB(DEFAULT_COLOR);
        rateProgress = DEFAULT_RATE;
        specProgress = LiWeiJieUtil.getDimen(R.dimen.default_dynamic_spec, getContext());
        progressColor = DEFAULT_COLOR;
        perProgress = (float) (progress*1.0 / 100);
        init(progress);
    }

使用xml的构造函数

public DynamicProgressBar(Context context, AttributeSet attrs) {
       this(context, attrs, 0);
   }

   public DynamicProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
       super(context, attrs, defStyleAttr);
       init(context, attrs, defStyleAttr);
   }
   private void init(Context context, AttributeSet attrs, int defStyleAttr) {
       TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DynamicProgressBarStyle, defStyleAttr, 0);
       progress = array.getInteger(R.styleable.DynamicProgressBarStyle_dynamicProgress, MAX_PROGRESS);
       textSize = array.getDimension(R.styleable.DynamicProgressBarStyle_dynamicTextSize, LiWeiJieUtil.getDimen(R.dimen.default_dynamic_text_size, context));
       progressColor = array.getColor(R.styleable.DynamicProgressBarStyle_dynamicColor, DEFAULT_COLOR);
       setRGB(progressColor);
       rateProgress = array.getInteger(R.styleable.DynamicProgressBarStyle_dynamicRate, DEFAULT_RATE);
       int maxProgress = array.getInteger(R.styleable.DynamicProgressBarStyle_dynamicMax, DEFAULT_RATE);
       perProgress = (float) (maxProgress*1.0 / 100);
       specProgress = array.getDimension(R.styleable.DynamicProgressBarStyle_dynamicSpec, LiWeiJieUtil.getDimen(R.dimen.default_dynamic_spec, context));
       textProgress = array.getString(R.styleable.DynamicProgressBarStyle_dynamicText);
       array.recycle();
       init(progress);
   }

共同初始化的方法

/**
    * 基本的初始化
    *
    * @param progress
    */
   private void init(int progress) {
       mPaint = new Paint();
       mPaint.setStyle(Paint.Style.FILL);
       mPaint.setTextSize(textSize);
       setBackgroundColor(Color.TRANSPARENT);
       currentAlphaLevel = 1;
       currentProgress = 1;
       this.progress = progress;
       proportion = (float) (1.0 * progress / MAX_PROGRESS);
   }

draw方法

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 画矩形
        canvas.drawColor(Color.TRANSPARENT);
        drawProgress(canvas);
 
        // 还需要画
        if (currentProgress < progress) {
            postDelayed(new Runnable() {
                @Override
                public void run() {
                    // 每次变化的长度
                    currentProgress += perProgress;
                    // 每次变化的透明度
                    currentAlphaLevel += 2.55;
                    invalidate();
                }
            }, rateProgress);
        }
    }

画具体进度条和文字的方法：

/**
     * 画进度条和文字
     *
     * @param canvas
     */
    private void drawProgress(Canvas canvas) {
        // 计算需要画的位置
        mPaint.setAntiAlias(true);
        int color = Color.argb(0xFF - 0xFF * currentAlphaLevel, redProgress, greenProgress, blueProgress);
        mPaint.setColor(color);
        RectF rectF = new RectF();
        rectF.left = 0;
        rectF.top = 0;
        rectF.right = (getMeasuredWidth() - specProgress) * currentProgress * proportion / progress;
        rectF.bottom = getMeasuredHeight();
        canvas.drawRoundRect(rectF, 4, 4, mPaint);
        float textX = rectF.right + LiWeiJieUtil.getDimen(R.dimen.default_dynamic_spec, getContext());
        float textY = rectF.bottom;
        mPaint.setTextAlign(Paint.Align.CENTER);
        Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
        mPaint.setColor(progressColor);
        //计算文字高度
        float fontHeight = fontMetrics.bottom - fontMetrics.top;
        //计算文字baseline
        float textBaseY = textY - (textY - fontHeight) / 2 - fontMetrics.bottom;
        canvas.drawText(String.valueOf(currentProgress) + textProgress, textX, textBaseY, mPaint);
    }

关于代码的解析代码中已经包含了。

测试代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#ffffff"
    android:orientation="vertical"
    tools:context="com.liweijie.view.silmpleswitchbtn.sample.MainActivity">
 
    <com.liweijie.view.progress.DynamicProgressBar
        android:layout_width="120dp"
        android:layout_height="20dp"
        app:dynamicColor="#ff0000"
        app:dynamicMax="100"
        app:dynamicProgress="60"
        app:dynamicRate="30"
        app:dynamicSpec="20dp"
        app:dynamicText="%"
        app:dynamicTextSize="14sp" />
    <com.liweijie.view.progress.DynamicProgressBar
        android:id="@+id/progressbar"
        android:layout_width="120dp"
        android:layout_height="20dp"
        app:dynamicColor="#ff0000"
        app:dynamicMax="100"
        app:dynamicProgress="0"
        app:dynamicRate="30"
        app:dynamicSpec="20dp"
        app:dynamicText="%"
        app:dynamicTextSize="14sp" />
 
</LinearLayout>

代码设置的进度条

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_progress);
        DynamicProgressBar progressBar = (DynamicProgressBar) findViewById(R.id.progressbar);
        progressBar.setProgress(80);
    }

结果截图：

好了，这样子就可以完成一个具有透明度变化，进度条前进的进度条了，biubiubiu~。

源码下载