多的不說，少的不嘮，上圖

Screenshot_1601345389.png

自定義view的流程又不多說了，網(wǎng)上一大堆，直接上代碼，咦，我為什么說了個(gè)又字？好吧，不管了，上代碼。

1，自定義style

    <declare-styleable name="GradualChangeProgess">
        <!--        目標(biāo)進(jìn)度-->
        <attr name="currentProgess" format="float" />
        <!--        進(jìn)度條文字-->
        <attr name="progessText" format="string" />
        <!--        進(jìn)度條寬度-->
        <attr name="progessWidth" format="dimension" />
        <!--        進(jìn)度條高度-->
        <attr name="progessHeight" format="dimension" />
    </declare-styleable>

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(); // 用于延時(shí)更新，實(shí)現(xiàn)動(dòng)畫
    private float animprogress; // 進(jìn)度條動(dòng)畫高度

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

    private Paint linePaint;


    /**
     * 默認(rèn)都是20
     */
    private float margin_left = 20;//進(jìn)度條左邊的間距
    private float margin_right = 20;//進(jìn)度條右邊的間距

    /**
     * 游標(biāo)刻度值
     */
    private float max_Value = 100;//最大值

    private String progessText;
    private float currentProgess = (float) 0.0;//當(dāng)前值
    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: {//如果沒有指定大小，就設(shè)置為默認(rèn)大小
                mySize = defaultSize;
                break;
            }
            case MeasureSpec.AT_MOST: {//如果測(cè)量模式是最大取值為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();
        /**進(jìn)度條的畫筆*/
        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);
        }

        /**居中顯示進(jìn)度條*/
        RectF rf = new RectF(margin_left, view_height - 2 * progessHeight, view_width - margin_right, view_height - progessHeight);
        progessWidth = rf.width();
        /*繪制圓角進(jìn)度條，背景色為畫筆顏色*/
        canvas.drawRoundRect(rf, rf.height() / 2, rf.height() / 2, linePaint);//開始繪制


        /**繪制游標(biāo)頂部的文字*/
        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);

        //游標(biāo)的寬度
        int width = tv_Rect.width();
        /**計(jì)算游標(biāo)顯示完整的位置*/
        if (margin_left < width) {
            margin_left = width / 2;
        }
        if (margin_right < width) {
            margin_right = width / 2;
        }

        /*游標(biāo)在進(jìn)度條上顯示的位置*/
        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);//圖片所在區(qū)域
        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);// 此點(diǎn)為多邊形的起點(diǎn)
        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(); // 使這些點(diǎn)構(gòu)成封閉的多邊形
        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();
    }

    // 根據(jù)手機(jī)的分辨率將dp的單位轉(zhuǎn)成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布局引用

    <com.rsw.rswtestdemo.views.GradualChangeProgess
        android:id="@+id/jianbianProgess"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:currentProgess="50"
        app:progessHeight="10dp"
        app:progessText="50%"
        app:progessWidth="100dp">

    </com.rsw.rswtestdemo.views.GradualChangeProgess>

4，完事了