Android实现仪表盘控件开发

Fredrica ·

更新时间:2024-09-21

· 961 次阅读

仪表盘在工业软件中很常见，今天整一个图片式仪表盘控件（非几何图形绘制）。实现非常简单，一张背景图，一张指针。创建一个RelativeLayout布局文件，然后在里面布置好控件的位置，代码如下


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <ImageView
        android:id="@+id/id_dial"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@mipmap/meter_h_bk" />
    <ImageView
        android:id="@+id/id_dial_point"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/id_dial"
        android:layout_centerInParent="true"
        android:src="@mipmap/meter_fr" />
    <com.tech.view.DigitalText
        android:id="@+id/id_value"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/id_dial"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="2dp"
        android:text="29.9"
        android:textColor="@android:color/white"
        android:textSize="21sp" />
</RelativeLayout>

DigitalText是使用第三方字体控件，这个可自行百度搜索想要的字体。然后写一个仪表盘控件类，DialBoard

代码如下


public class DialBoard {
    private static final String TAG = DialBoard.class.getName();
    private ImageView dialPoint;
    private TextView text;
    private static final float MAX = 120.0f;
    private static final float MIN = -120.0f;
    private boolean animationDone = true;
    public DialBoard(Activity activity) {
        dialPoint = activity.findViewById(R.id.id_dial_point);
        text = activity.findViewById(R.id.id_value);
        text.setText(String.format("%.02f", 0.0f));
        setRotation(MIN, true);
    }
    public synchronized void moveTo(float progress) {
        if (animationDone) new Thread(() -> move(progress)).start();
    }
    private void move(float progress) {
        animationDone = false;
        float offset = (MAX - MIN) / 100;
        final float STEP = 2.0f;//理论上要小于offset
        float curProgress = (dialPoint.getRotation() - MIN) / offset;
        //计算当前进度和目标进度方向，步数
        float value = Math.abs(curProgress - progress);
        while (value > 0.1f) {
            value = (value < 1.0f ? 0.2f : STEP);
            if (progress < curProgress) value = -value;
            setRotation(dialPoint.getRotation() + value, false);
            Tools.sleep(10);
            curProgress = (dialPoint.getRotation() - MIN) / offset;
            value = Math.abs(curProgress - progress);
            final float textValue = curProgress;
            text.post(() -> text.setText(String.format("%.02f", textValue)));
        }
        text.post(() -> text.setText(String.format("%.02f", progress)));
        animationDone = true;
    }
    /**
     * @param rotation MIN~MAX
     */
    public void setRotation(float rotation) {
        this.setRotation(rotation, false);
    }
    private void setRotation(float rotation, boolean onCreate) {
        if (onCreate) {
            int w = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
            int h = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
            dialPoint.measure(w, h);//测量控件大小
        }
        int width = dialPoint.getMeasuredWidth();
        int height = dialPoint.getMeasuredHeight();
        dialPoint.post(() -> {
            dialPoint.setPivotX(width * 0.5f);
            dialPoint.setPivotY(height * 0.82666f);
            dialPoint.setRotation(rotation);
        });
    }
}

最终效果图