自定义控件-进度条

Android自定义进度条控件（仿汽车码表进度条）

具体demo可前往github下载，github地址：https://github.com/chenguo0421/FaceCompare

 

啥也不说了，先上图：

 

该控件逻辑比较简单，这里直接贴代码了：

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import com.cg.base.utils.DensityUtils;


/**
 * @ProjectName: NVMS_3.0
 * @CreateDate: 2020/8/6 10:03
 * @Author: ChenGuo
 * @Description: 半圆环仪表盘进度条，共计180°，总计百分比100%， 从0-100分51小块，0°为第0块，正90°为第25块，正180°为第50块
 * @Version: 1.0
 */
public class InstrumentView extends View {

    private int width;//控件宽度
    private int height;//控件高度
    private int similarityAreaHeight;//相似度文字区域高度

    private int centerX ;//圆心X
    private int centerY;//圆心Y
    private int centerColor = Color.parseColor("#696969");
    private int blueColor = Color.parseColor("#00a1e4");
    private int orangeColor = Color.parseColor("#FFA500");
    private int redColor = Color.parseColor("#FF0000");


    private float anger = 0;//起始角度
    private int strokeWidth = 8;//刻度线的宽度
    private int outStrokeWidth = 16;//刻度线的宽度

    private RectF innerRectF;

    private Paint centerPointPaint;//黑色圆心画笔
    private Paint linePaint;//内半圆的线的画笔
    private Paint outLineBluePaint;//内半圆的线的画笔
    private Paint outLineOrangePaint;//内半圆的线的画笔
    private Paint outLineRedPaint;//内半圆的线的画笔
    private Paint textPaint;//文字画笔
    private Paint scaleTextPaint;//刻度画笔

    private int innerRadio;//内圆半径（刻度圆弧）
    private int progress;
    private int startProgress = 0;
    private int handlerDelayTime = 30;
    private MyHandler handler = new MyHandler();
    private String text;
    private float[] arr;


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

    public InstrumentView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs,0);
    }

    public InstrumentView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    private void initPaint() {
        centerPointPaint = new Paint();
        centerPointPaint.setAntiAlias(true);
        centerPointPaint.setStyle(Paint.Style.FILL);
        centerPointPaint.setColor(centerColor);

        linePaint = new Paint();
        linePaint.setAntiAlias(true);
        linePaint.setStyle(Paint.Style.STROKE);
        linePaint.setStrokeWidth(strokeWidth);
        linePaint.setColor(centerColor);


        outLineRedPaint = new Paint();
        outLineRedPaint.setAntiAlias(true);
        outLineRedPaint.setStyle(Paint.Style.STROKE);
        outLineRedPaint.setStrokeWidth(outStrokeWidth);
        outLineRedPaint.setColor(redColor);

        outLineOrangePaint = new Paint();
        outLineOrangePaint.setAntiAlias(true);
        outLineOrangePaint.setStyle(Paint.Style.STROKE);
        outLineOrangePaint.setStrokeWidth(outStrokeWidth);
        outLineOrangePaint.setColor(orangeColor);

        outLineBluePaint = new Paint();
        outLineBluePaint.setAntiAlias(true);
        outLineBluePaint.setStyle(Paint.Style.STROKE);
        outLineBluePaint.setStrokeWidth(outStrokeWidth);
        outLineBluePaint.setColor(blueColor);

        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setColor(blueColor);

        scaleTextPaint = new Paint();
        scaleTextPaint.setAntiAlias(true);
        scaleTextPaint.setStyle(Paint.Style.FILL);
        scaleTextPaint.setTextAlign(Paint.Align.CENTER);
        scaleTextPaint.setColor(centerColor);
    }


    public void setProgress(int progress){
        startProgress = 0;
        if (progress <= 0) {
            this.progress = 0;
        }
        if (progress >= 100) {
            this.progress = 100;
        }
        this.progress = progress;
        if (this.progress > 0) {
            handler.sendEmptyMessageDelayed(startProgress,handlerDelayTime);
        }
    }



    /**
     * 设置控件大小
     * @param width
     */
    public void setSize(int width){
        this.width = width;
        similarityAreaHeight = DensityUtils.dip2px(getContext(), 30);
        this.height = width / 2 + similarityAreaHeight;
        centerX = width/2;
        centerY = height - similarityAreaHeight;

        if (textPaint == null) {
            initPaint();
        }
        textPaint.setTextSize(width / 15);
        scaleTextPaint.setTextSize(width / 30);
        text = "相似度：" + startProgress + " %";
        arr = new float[text.length()];

        innerRectF = new RectF(width / 10, width / 10, 9 * width / 10, 9 * width / 10);
        innerRadio = 2 * width / 5;
        invalidate();
    }


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

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (innerRectF == null) {
            return;
        }
        //绘制圆弧
        canvas.drawArc(innerRectF,180,180,false,linePaint);
        //绘制中心点
        canvas.drawCircle(centerX,centerY,20,centerPointPaint);

        //绘制刻度
        for (int i = 180; i <= 360; i+=9) {
            double degrees = Math.toRadians(i - 180);
            if ((i - 180) % 45 == 0) {//绘制大刻度
                if (i == 180){
                    canvas.drawLine((float) (centerX - (innerRadio * Math.cos(degrees)) - strokeWidth / 2),(float)(centerY - (innerRadio * Math.sin(degrees))),(float) (centerX - ( (7 * innerRadio / 8) * Math.cos(degrees))),(float) (centerY - ((7 * innerRadio / 8) * Math.sin(degrees))),linePaint);
                    canvas.drawText("0",(float) (centerX - ( (13 * innerRadio / 16) * Math.cos(degrees))),centerY,scaleTextPaint);
                } else if (i == 360){
                    canvas.drawLine((float) (centerX - (innerRadio * Math.cos(degrees)) + strokeWidth / 2),(float)(centerY - (innerRadio * Math.sin(degrees))),(float) (centerX - ( (7 * innerRadio / 8) * Math.cos(degrees))),(float) (centerY - ((7 * innerRadio / 8) * Math.sin(degrees))),linePaint);
                    canvas.drawText("100",(float) (centerX - ( (12 * innerRadio / 16) * Math.cos(degrees))),centerY,scaleTextPaint);
                }else {
                    canvas.drawLine((float) (centerX - (innerRadio * Math.cos(degrees))),(float)(centerY - (innerRadio * Math.sin(degrees))),(float) (centerX - ( (7 * innerRadio / 8) * Math.cos(degrees))),(float) (centerY - ((7 * innerRadio / 8) * Math.sin(degrees))),linePaint);
                    if (i == 270){
                        canvas.drawText("50",(float) centerX,(float) (centerY - ((12 * innerRadio / 16) * Math.sin(degrees))),scaleTextPaint);
                    }
                }
            } else if ((i - 180) % 9 == 0) {//绘制小刻度
                canvas.drawLine((float) (centerX - (innerRadio * Math.cos(degrees))),(float)(centerY - (innerRadio * Math.sin(degrees))),(float) (centerX - ( (19 * innerRadio / 20) * Math.cos(degrees))),(float) (centerY - ((19 * innerRadio / 20) * Math.sin(degrees))),linePaint);
            }
        }

        //绘制外层包裹着的线
        for (int i = 180; i <= 360; i+=5) {
            double degrees = Math.toRadians(i - 180);
            if ((i-180) % 5 == 0){
                if (i < 240) {
                    canvas.drawLine((float) (centerX - ((innerRadio + width / 30) * Math.cos(degrees))),(float)(centerY - ((innerRadio + width / 30) * Math.sin(degrees))),(float) (centerX - ((innerRadio + width / 15) * Math.cos(degrees))),(float) (centerY - ((innerRadio + width / 15) * Math.sin(degrees))),outLineBluePaint);
                } else if (i < 300) {
                    canvas.drawLine((float) (centerX - ((innerRadio + width / 30) * Math.cos(degrees))),(float)(centerY - ((innerRadio + width / 30) * Math.sin(degrees))),(float) (centerX - ((innerRadio + width / 15) * Math.cos(degrees))),(float) (centerY - ((innerRadio + width / 15) * Math.sin(degrees))),outLineOrangePaint);
                }else {
                    canvas.drawLine((float) (centerX - ((innerRadio + width / 30) * Math.cos(degrees))),(float)(centerY - ((innerRadio + width / 30) * Math.sin(degrees))),(float) (centerX - ((innerRadio + width / 15) * Math.cos(degrees))),(float) (centerY - ((innerRadio + width / 15) * Math.sin(degrees))),outLineRedPaint);
                }
            }
        }

        //画指针
        double degrees = Math.toRadians((double) startProgress * 180 / 100);
        canvas.drawLine((float) (centerX - ((innerRadio * 13 / 16 ) * Math.cos(degrees))),(float)(centerY - ((innerRadio * 13 / 16 ) * Math.sin(degrees))),(float) (centerX + ((similarityAreaHeight / 2) * Math.cos(degrees))),(float) (centerY + ((similarityAreaHeight / 2) * Math.sin(degrees))),linePaint);

        //画字
        if (startProgress >= 0 && startProgress <= 33) {
            textPaint.setColor(blueColor);
        }else if (startProgress > 33  && startProgress <= 66){
            textPaint.setColor(orangeColor);
        } else if (startProgress > 66 && startProgress <= 100) {
            textPaint.setColor(redColor);
        }

        canvas.drawText(text,centerX ,centerY - (innerRadio / 4),textPaint);


    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

    }


    @SuppressLint("HandlerLeak")
    class MyHandler extends Handler{
        @Override
        public void handleMessage(@NonNull Message msg) {
            if (msg.what >= 0 && msg.what + 5 <= progress) {
                startProgress += 5;
                handler.sendEmptyMessageDelayed(startProgress, handlerDelayTime);
            } else {
                startProgress = progress;
            }
            text = "相似度：" + startProgress + " %";
            arr = new float[text.length()];
            invalidate();
        }
    }


    /**
     * 移除handler，防止内存泄漏
     */
    public void onDestroy(){
        if (handler != null) {
            handler.removeCallbacksAndMessages(null);
            handler = null;
        }
    }

}

 

使用上：

1. xml引入及其简单，几乎不用配置属性：

<com.cg.base.widget.progress.InstrumentView
    android:id="@+id/iv_instrument"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/tv_compareResultTitle"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    android:layout_marginTop="@dimen/layout_margin_20"
    />

2. 由于控件没有写自定义属性，所以支持在java代码中设置控件的宽度（控件高度是通过宽度计算出来的，所以只需要设置一个宽度就行），如下：

iv_instrument = view.findViewById(R.id.iv_instrument);
iv_instrument.setSize(DensityUtils.dip2px(this,300));

3. 同时提供一个对外方法设置进度（0-100）

iv_instrument.setProgress(integer);

4. 最后退出页面时，记得调用onDestroy防止内存泄漏。

@Override
protected void onDestroy() {
    if (iv_instrument != null) {
        iv_instrument.onDestroy();
    }
    super.onDestroy();
}

到这里就结束了，打完收工！

 

本文地址：https://blog.csdn.net/xiangxiang_8_8/article/details/107861460