自定义渐进和渐变颜色的进度条

自定义渐进的进度条

结果图

自定义进度条的需求

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

自定义进度条的分析

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

 <declare-styleable name="DynamicProgressBarStyle">
        <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. 进度条的颜色
2. 更新频率(毫秒)
3. 文字大小
4. 进度条最大值
5. 文字需要的间距
6. 文字，只是需要后面的文字，比如当前进度是50分，那么text就应该是”分”
然后，我们需要分析是怎么画的，我们使用一个可以带有边角的RectF去画进度，drawText画文字，每隔一段时间重画，这个时间就是我们自己定义的rate

实现

我们需要的属性有

  private static final int DEFAULT_COLOR = Color.parseColor("#e61e23");//默认颜色
    private static final int MAX_PROGRESS = 100;//默认，同时也是最大值
    private static final int DEFAULT_RATE = 30; // 默认更新速率

    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就好。代码如下：
第一种的参数

/**
     * 动态添加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);
    }

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

测试代码

<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~。

源码下载：liweijieok

求star，求星星。