仪表盘在工业软件中很常见,今天整一个图片式仪表盘控件(非几何图形绘制)。实现非常简单,一张背景图,一张指针。创建一个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); }); } }
最终效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持自学编程网。
- 本文固定链接: https://zxbcw.cn/post/213422/
- 转载请注明:必须在正文中标注并保留原文链接
- QQ群: PHP高手阵营官方总群(344148542)
- QQ群: Yii2.0开发(304864863)