android 自定义表盘控件

效果图如下

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!--弧的颜色-->
    <attr name="part1_color" format="color" />
    <attr name="part2_color" format="color" />
    <attr name="part3_color" format="color" />

    <!--刻度颜色-->
    <attr name="scale_font_color" format="color" />
    <!--刻度大小-->
    <attr name="scale_font_size" format="dimension" />
    
    <!--半径-->
    <attr name="radius" format="dimension" />
    <!--弧线宽度-->
    <attr name="arc_width" format="dimension" />
    <!--补偿 越大 越外-->
    <attr name="offset" format="dimension" />

    <declare-styleable name="FlowView">
        <attr name="part1_color" />
        <attr name="part2_color" />
        <attr name="part3_color" />

        <attr name="scale_font_color" />
        <attr name="scale_font_size" />
        <attr name="radius" />
        <attr name="arc_width" />
        <attr name="offset" />
    </declare-styleable>

</resources>

 

FlowView.java

 

package com.hutao.liaoningmobile.view;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.TimeInterpolator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

import com.hutao.liaoningmobile.R;

/**
 * Created by aoc on 2016/10/10.
 */

public class FlowView extends View {

    private final Rect mBound;
    private int part1Color;
    private int part2Color;
    private int part3Color;

    private int scaleFontColor;
    private int scaleFontSize;

    private int radius;
    private int arcWidth;
    private int offset;

    private float startAngle = 135f;
    private float sweepAngle = 90f;

    private Paint paint;
    private RectF rectF;

    private Paint textPaint;

    private String[] scaleText = {"0", "15", "30", "45", "60", "75", "90", "105", "120", "135"};

    private float percent;
    private float oldPercent = 0f;
    private float speed;
    private ValueAnimator valueAnimator;
    private long animatorDuration;

    private TimeInterpolator interpolator = new SpringInterpolator();

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

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

    public FlowView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.FlowView, defStyleAttr, 0);
        int count = array.getIndexCount();
        for (int i = 0; i < count; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.FlowView_part1_color:
                    part1Color = array.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.FlowView_part2_color:
                    part2Color = array.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.FlowView_part3_color:
                    part3Color = array.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.FlowView_scale_font_color:
                    scaleFontColor = array.getColor(attr, Color.WHITE);
                    break;
                case R.styleable.FlowView_scale_font_size:
                    scaleFontSize = array.getDimensionPixelSize(attr,
                            (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, context.getResources().getDisplayMetrics()));
                    break;
                case R.styleable.FlowView_radius:
                    radius = array.getDimensionPixelSize(attr,
                            (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, context.getResources().getDisplayMetrics()));
                    break;
                case R.styleable.FlowView_arc_width:
                    arcWidth = array.getDimensionPixelSize(attr,
                            (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, context.getResources().getDisplayMetrics()));
                    break;
                case R.styleable.FlowView_offset:
                    offset = array.getDimensionPixelSize(attr,
                            (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 16, context.getResources().getDisplayMetrics()));
                    break;
            }
        }
        array.recycle();
        paint = new Paint();
        paint.setAntiAlias(true);
        rectF = new RectF();
        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setTextSize(scaleFontSize);
        textPaint.setColor(scaleFontColor);
        mBound = new Rect();
        textPaint.getTextBounds(String.valueOf(speed), 0, String.valueOf(speed).length(), mBound);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height ;
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        }
        else {
            width = radius * 2 + arcWidth;
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        }
        else {
            height = radius * 2 + arcWidth;
        }
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        drawArc(canvas);

        drawScale(canvas);

        drawPointer(canvas);

        drawUnit(canvas);

        drawSpeed(canvas);
    }

    //画表盘
    private void drawArc(Canvas canvas) {
//        paint.setColor(Color.BLUE);
//        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);
        paint.setColor(part1Color);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(arcWidth);

        int left = getWidth() / 2;
        int top = getHeight() / 2;
        rectF.set(left - radius, top - radius , left + radius , top + radius );
        canvas.drawArc(rectF, startAngle, sweepAngle, false,paint);
        paint.setColor(part2Color);
        canvas.drawArc(rectF, startAngle + sweepAngle, sweepAngle, false,paint);
        paint.setColor(part3Color);
        canvas.drawArc(rectF, startAngle + sweepAngle * 2, sweepAngle, false,paint);
        //圆心
        paint.setColor(Color.YELLOW);
        canvas.drawCircle(rectF.centerX(), rectF.centerY(), 10, paint);
    }

    //画刻度
    private void drawScale(Canvas canvas) {
        canvas.save(); //记录画布状态
        paint.setColor(scaleFontColor);
        paint.setStrokeWidth(3);
        canvas.rotate(-90f, rectF.centerX(), rectF.centerY());
        float rAngle = sweepAngle * 3 / (scaleText.length - 1);
        for (int i = 0; i < scaleText.length  ; i++) {
            canvas.save(); //记录画布状态
            canvas.rotate(rAngle * i, rectF.centerX(), rectF.centerY());
            float startX = rectF.centerX() - radius + arcWidth * 4 - offset;
            float startY = rectF.centerY() - radius + arcWidth * 4 - offset;
            canvas.drawLine(startX, startY , startX + 15, startY + 15, paint);//画短刻度线

            canvas.drawText(scaleText[i] , startX + 25, startY + 35,  textPaint);
            canvas.restore();
        }
        canvas.restore();
    }

    //画指针
    private void drawPointer(Canvas canvas) {
        canvas.save();
        canvas.rotate(percent, rectF.centerX(), rectF.centerY());
        canvas.drawLine(rectF.centerX(), rectF.centerY(), rectF.centerX() - radius / 2 + 20 , rectF.centerY() + radius / 2 - 20, paint);
        canvas.restore();
    }

    //单位
    private void drawUnit(Canvas canvas) {
        textPaint.setColor(Color.GRAY);
        textPaint.setTextSize(scaleFontSize / 1.2f);
        canvas.drawText("Kbps", rectF.centerX() - mBound.width() / 2 - arcWidth / 3, rectF.centerY() +  radius / 2  + arcWidth, textPaint);
    }

    //显示速度
    private void drawSpeed(Canvas canvas) {
        textPaint.setColor(Color.YELLOW);
        textPaint.setTextSize(scaleFontSize);
        canvas.drawText(String.valueOf(speed), rectF.centerX() - mBound.width() / 2, rectF.centerY() + radius - arcWidth, textPaint);
    }

    public void setSpeed(float speed) {
        this.speed = speed;
        percent = sweepAngle * 3 / 135 * speed;
        setAnimator(percent);
    }
    //动画
    private void setAnimator(final float percent) {
        if (valueAnimator != null && valueAnimator.isRunning()) {
            valueAnimator.cancel();
        }

        animatorDuration = (long) Math.abs(percent - oldPercent) * 20;

        valueAnimator = ValueAnimator.ofFloat(oldPercent, percent).setDuration(animatorDuration);
        valueAnimator.setInterpolator(interpolator);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                FlowView.this.percent = (float) animation.getAnimatedValue();
                invalidate();

            }

        });
        valueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                oldPercent = percent;
            }
        });
        valueAnimator.start();
    }

}

 

SpringInterpolator

package com.hutao.liaoningmobile.view;

import android.view.animation.Interpolator;

/**
 * Created by aoc on 2016/10/11.
 */

public class SpringInterpolator implements Interpolator {

    private final float mTension;
    public SpringInterpolator() {
        mTension = 0.4f;

    }
    public SpringInterpolator(float tension) {
        mTension = tension;
    }

    @Override
    public float getInterpolation(float input) {
        float result = (float) (Math.pow(2,-10 * input) *
                Math.sin((input - mTension / 4) * (2 * Math.PI)/mTension) + 1);
        return result;
    }
}

 

main.xml

  <net.sytm.liaoningmobile.view.FlowView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:part1_color="#00efae"
                    app:part2_color="#00c6ff"
                    app:part3_color="#df3979"
                    app:scale_font_color="@android:color/white"
                    app:radius="100dp"
                    app:arc_width="10dp"
                    app:scale_font_size="14sp"
                    app:offset="7dp"
                    android:id="@+id/flow_view_id"/>

mainactivity.java

        FlowView flowView = (FlowView) view.findViewById(R.id.flow_view_id);
        flowView.setSpeed(100f);