android随笔之自定义渐变进度条

多的不说，少的不唠，上图

Screenshot_1601345389.png

自定义view的流程又不多说了，网上一大堆，直接上代码，咦，我为什么说了个又字？好吧，不管了，上代码。

1，自定义style

2，自定义view

package com.rsw.rswtestdemo.views;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;

import com.rsw.rswtestdemo.R;

public class GradualChangeProgess extends View implements Runnable {


    private Handler handler = new Handler(); // 用于延时更新，实现动画
    private float animprogress; // 进度条动画高度

    /**
     * 控件的宽和高
     */
    private int view_width;
    private int view_height;

    private Paint linePaint;


    /**
     * 默认都是20
     */
    private float margin_left = 20;//进度条左边的间距
    private float margin_right = 20;//进度条右边的间距

    /**
     * 游标刻度值
     */
    private float max_Value = 100;//最大值

    private String progessText;
    private float currentProgess = (float) 0.0;//当前值
    private float progessHeight = 20;//线的高度
    private float progessWidth;//线的宽度

    private int defaultSize = 100;

    private int width = 0;
    private int height = 0;
    private Context context;

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


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

    public GradualChangeProgess(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.GradualChangeProgess);
        progessText = ta.getString(R.styleable.GradualChangeProgess_progessText);
        currentProgess = ta.getFloat(R.styleable.GradualChangeProgess_currentProgess, 0.0f);
        progessWidth = ta.getDimensionPixelSize(R.styleable.GradualChangeProgess_progessWidth, 100);
        progessHeight = ta.getDimensionPixelSize(R.styleable.GradualChangeProgess_progessHeight, 10);
        ta.recycle();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        width = getSize(widthMeasureSpec);
        height = getSize(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    private int getSize(int measureSpec) {
        int mySize = defaultSize;
        int mode = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        switch (mode) {
            case MeasureSpec.UNSPECIFIED: {//如果没有指定大小，就设置为默认大小
                mySize = defaultSize;
                break;
            }
            case MeasureSpec.AT_MOST: {//如果测量模式是最大取值为size
                //我们将大小取最大值,你也可以取其他值
                mySize = size;
                break;
            }
            case MeasureSpec.EXACTLY: {//如果是固定的大小，那就不要去改变它
                mySize = size;
                break;
            }
        }
        return mySize;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        initView(canvas);
    }

    private void initView(Canvas canvas) {
        view_width = getWidth();
        view_height = getHeight();
        /**进度条的画笔*/
        if (linePaint == null) {
            linePaint = new Paint();
            Shader mShader = new LinearGradient(0, 0, canvas.getWidth(), canvas.getHeight(), new int[]{Color.parseColor("#ffc40d"), Color.parseColor("#3fdbd6"), Color.parseColor("#039dea")}, null, Shader.TileMode.CLAMP);
            linePaint.setColor(Color.parseColor("#039dea"));
            linePaint.setAntiAlias(true);
            linePaint.setShader(mShader);
        }

        /**居中显示进度条*/
        RectF rf = new RectF(margin_left, view_height - 2 * progessHeight, view_width - margin_right, view_height - progessHeight);
        progessWidth = rf.width();
        /*绘制圆角进度条，背景色为画笔颜色*/
        canvas.drawRoundRect(rf, rf.height() / 2, rf.height() / 2, linePaint);//开始绘制


        /**绘制游标顶部的文字*/
        Paint tv_piant = new Paint(Paint.ANTI_ALIAS_FLAG);
        tv_piant.setTextSize(30);
        tv_piant.setColor(Color.WHITE);
        tv_piant.setTextAlign(Paint.Align.LEFT);
        Rect tv_Rect = new Rect();
        if (null == progessText) {
            return;
        }
        tv_piant.getTextBounds(progessText, 0, progessText.length(), tv_Rect);

        //游标的宽度
        int width = tv_Rect.width();
        /**计算游标显示完整的位置*/
        if (margin_left < width) {
            margin_left = width / 2;
        }
        if (margin_right < width) {
            margin_right = width / 2;
        }

        /*游标在进度条上显示的位置*/
        if (currentProgess > max_Value) {
            currentProgess = max_Value;
        }
        float leftd = (margin_left - width / 2) + (animprogress * progessWidth / max_Value) - tv_Rect.height() / 2;
        RectF mDestRect = new RectF(leftd, (view_height - 5 * progessHeight), leftd + width + tv_Rect.width() / 2, view_height - 3 * progessHeight);//图片所在区域
        canvas.drawRoundRect(mDestRect, 10, 10, linePaint);//开始绘制
        handler.postDelayed(this, 1);
        Path path = new Path();
        path.moveTo(leftd + width / 3.0f + margin_left / 2, view_height - 3 * progessHeight);// 此点为多边形的起点
        path.lineTo(leftd + width / 3.0f * 2 + margin_left / 2, view_height - 3 * progessHeight);
        path.lineTo(leftd + width / 2.0f + margin_left / 2, (float) (Math.cbrt(3) / 2 * 1 / 6 * dip2px(context,35) + view_height - 3 * progessHeight));
        path.close(); // 使这些点构成封闭的多边形
        canvas.drawPath(path, linePaint);

        canvas.drawText(progessText, leftd + width / 2.0f - tv_Rect.width() / 4, (view_height - 3 * progessHeight - progessHeight / 2), tv_piant);

    }


    public void settitle(String title) {
        this.progessText = title;
        invalidate();
    }

    public void setCurr_Value(float curr_Value) {
        this.currentProgess = curr_Value;
        invalidate();
    }

    // 根据手机的分辨率将dp的单位转成px(像素)
    public int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    @Override
    public void run() {
        animprogress += 1;
        if (animprogress >= currentProgess) {
            return;
        } else {
            invalidate();
        }
    }
}

3，xml布局引用

4，完事了