android實現(xiàn)簡單儀表盤效果

更新時間：2021年05月27日 10:37:43 作者：昊帥

這篇文章主要為大家詳細介紹了android實現(xiàn)簡單儀表盤效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了android實現(xiàn)簡單儀表盤效果的具體代碼，供大家參考，具體內容如下

實現(xiàn)這個效果：

中間的文字很好寫，外層的進度條就需要自定義控件了，代碼如下：

public class CirCleProgressBar extends View {

    private Paint circlePaint;
    private Paint textPaint;
    private int circleColor;//圓弧顏色
    private int circleBgColor;//圓弧背景顏色
    private float circleWidth;//圓弧寬度
    private float circleBgWidth;//圓弧背景寬度
    private int textColor;//字體顏色
    private float textSize;//字體大小
    private int totalAngle;//總角度
    private int startAngle;//開始角度
    private float currentProgress;//當前進度
    private float maxProgress;//最大進度
    private float section;//分段

    private float currentAngle;//當前角度
    private float lastAngle;
    private ValueAnimator progressAnimator;//圓弧動畫
    private int duration = 1000;//動畫時長
    private  boolean isDefaultText;//是否設置文字顯示的值
    private  String mTextValue;//字體顯示的值

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

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

    public CirCleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        circlePaint = new Paint();
        textPaint = new Paint();
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CirCleProgressBar);
        circleColor = typedArray.getColor(R.styleable.CirCleProgressBar_circle_color, Color.RED);
        circleBgColor = typedArray.getColor(R.styleable.CirCleProgressBar_circle_bg_color, Color.YELLOW);
        circleWidth = typedArray.getDimension(R.styleable.CirCleProgressBar_circle_width, 2);
        circleBgWidth = typedArray.getDimension(R.styleable.CirCleProgressBar_circle_bg_width, 2);
        textColor = typedArray.getColor(R.styleable.CirCleProgressBar_text_color, Color.BLUE);
        textSize = typedArray.getDimension(R.styleable.CirCleProgressBar_text_size, 10);
        totalAngle = typedArray.getInteger(R.styleable.CirCleProgressBar_total_angle, 360);
        startAngle = typedArray.getInteger(R.styleable.CirCleProgressBar_start_angle, 0);
        currentProgress = typedArray.getFloat(R.styleable.CirCleProgressBar_current_progress, 0);
        maxProgress = typedArray.getFloat(R.styleable.CirCleProgressBar_max_progress, 100);
        setCurrentProgress(currentProgress);
        setMaxProgress(maxProgress);
        //
        typedArray.recycle();
    }

    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 畫最外層的大圓環(huán)
         */
        int centre = getWidth() / 2; // 獲取圓心的x坐標
        int radius = (int) (centre - circleWidth / 2) - 2; // 圓環(huán)的半徑
        circlePaint.setColor(circleBgColor);
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setAntiAlias(true);
        circlePaint.setStrokeCap(Paint.Cap.ROUND);// 圓頭
        circlePaint.setStrokeWidth(circleBgWidth);
        RectF oval = new RectF(centre - radius - 1, centre - radius - 1, centre + radius + 1, centre + radius + 1); // 用于定義的圓弧的形狀和大小的界限
        //背景圓
        canvas.drawArc(oval, startAngle, totalAngle, false, circlePaint);
        //數(shù)據(jù)圓
        circlePaint.setStrokeWidth(circleWidth);
        circlePaint.setColor(circleColor);
        canvas.drawArc(oval, startAngle, currentAngle, false, circlePaint);
        //
        textPaint.setAntiAlias(true);
        textPaint.setColor(textColor);
        textPaint.setTextSize(textSize);
        float textWidth = textPaint.measureText((int) currentProgress + "");
        if(!isDefaultText) {
            canvas.drawText(String.valueOf((int)currentProgress), centre - textWidth / 2, centre + textSize / 2, textPaint);
        }else {
            canvas.drawText(mTextValue, centre - textWidth / 2, centre + textSize / 2, textPaint);
        }
        //
        invalidate();
    }

    public float getMaxProgress(){
        return maxProgress;
    }

    public void setMaxProgress(float maxProgress){
        if(maxProgress < 0){
            throw new IllegalArgumentException("max not less than 0");
        }
        this.maxProgress = maxProgress;
        section = totalAngle / maxProgress;
    }

    public void setAnimationDuration(int duration){
        this.duration = duration;
    }

    public void setCurrentProgress(float progress){
        if(progress >= 0){
            this.currentProgress = progress;
            if(progress > maxProgress){
                progress = maxProgress;
            }
            lastAngle = currentAngle;
            setAnimation(lastAngle, progress * section, duration);
        }

    }

    private void setAnimation(float last, float current, int duration){
        progressAnimator = ValueAnimator.ofFloat(last, current);
        progressAnimator.setDuration(duration);
        progressAnimator.setTarget(currentAngle);
        progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                currentAngle = (float) valueAnimator.getAnimatedValue();
                currentProgress = currentAngle / section;
            }
        });
        progressAnimator.start();
    }

    public int getCircleColor() {
        return circleColor;
    }

    public void setCircleColor(int circleColor) {
        this.circleColor = circleColor;
    }

    public int getCircleBgColor() {
        return circleBgColor;
    }

    public void setCircleBgColor(int circleBgColor) {
        this.circleBgColor = circleBgColor;
    }

    public float getCircleWidth() {
        return circleWidth;
    }

    public void setCircleWidth(float circleWidth) {
        this.circleWidth = circleWidth;
    }

    public float getCircleBgWidth() {
        return circleBgWidth;
    }

    public void setCircleBgWidth(float circleBgWidth) {
        this.circleBgWidth = circleBgWidth;
    }

    public int getTextColor() {
        return textColor;
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
    }

    public float getTextSize() {
        return textSize;
    }

    public void setTextSize(float textSize) {
        this.textSize = textSize;
    }

    /**
     * @param isText 為true,自定義設置字體顯示
     * @param text
     */
    public  void setText(boolean isText,String text){
        isDefaultText = isText;
        mTextValue = text;
    }
}

需要在attrs中添加:

<declare-styleable name="CirCleProgressBar">
        <attr name="circle_color" format="color"/>
        <attr name="circle_bg_color" format="color"/>
        <attr name="circle_width" format="dimension"/>
        <attr name="circle_bg_width" format="dimension"/>
        <attr name="text_color" format="color"/>
        <attr name="text_size" format="dimension"/>
        <attr name="total_angle" format="integer"/>
        <attr name="start_angle" format="integer"/>
        <attr name="current_progress" format="float"/>
        <attr name="max_progress" format="float"/>
</declare-styleable>

使用方法：

在布局文件中直接引用

<com.fm.newcinema.view.CirCleProgressBar
                android:id="@+id/cc_cinema_sentiment"
                android:layout_width="139dp"
                android:layout_height="99dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="8dp"
                app:circle_bg_color="@color/gray_line_ff"
                app:circle_bg_width="10dp"
                app:circle_color="@color/main_blue"
                app:circle_width="10dp"
                app:max_progress="100"
                app:start_angle="160"
                app:text_color="@color/white_ff"
                app:text_size="@dimen/size_30px"
                app:total_angle="221"/>

其中app:circle_bg_color表示進度條底層的顏色,app:circle_color表示進度條上層的顏色,app:circle_bg_width表示進度條底層的寬度,app:circle_width表示進度條上層的寬度,app:max_progress="100"表示進度條最大進度是100,app:start_angle表示開始的角度,就是進度條從哪個角度開始畫,如下圖所示

app:total_angle表示整個進度條所需的角度.
在代碼中設置旋轉的角度,圖中進度為30%,由于在布局文件中設置的最大進度是100`app:max_progress="100",所以進行如下設置peocess.setCurrentProgress(30f)
默認情況下,進度條中間顯示進度條的值,如果需要自己寫值的畫,調用這個方法:process.setText(true, "中間的字");

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: