我想要一个简单的仪表盘视图,其中我将定义起始值和结束值,并有一个指针来显示给定变量的值。
这样我就可以像速度表一样显示给定的值。例如,如果我的textView的值为1300,则我想在textView旁边拥有这样的自定义表视图动画!
这是可能的吗?有现有的示例代码吗?
我想要一个简单的仪表盘视图,其中我将定义起始值和结束值,并有一个指针来显示给定变量的值。
这样我就可以像速度表一样显示给定的值。例如,如果我的textView的值为1300,则我想在textView旁边拥有这样的自定义表视图动画!
这是可能的吗?有现有的示例代码吗?
我在 Evelina Vrabie的博客
上发现了一个库,并使用后表现完美!
看看 Evelina Vrabie的GitHub
。它有一个仪表盘库和一些与之交互的示例。
非常感谢Evelina Vrabie的所有者!
然而,在XHDPI /某些Android设备(4.0以上)上无法正常工作,问题出在仪表盘视图中的文本。
gauge:***
属性中都显示错误。我添加了 xmlns:gauge="http://schemas.android.com/apk/res-auto"
但仍然出现错误。@pkleczko 你能说一下问题出在哪里吗? - Nirmal Raj<io.sule.gaugelibrary.GaugeView
android:id="@+id/gauge_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
gauge:showOuterShadow="false"
gauge:showOuterRim="false"
gauge:showInnerRim="false"
gauge:needleWidth="0.010"
gauge:needleHeight="0.40"
gauge:scaleStartValue="0"
gauge:scaleEndValue="100"
/>
package io.sule.testapplication;
import android.app.Activity;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.view.Menu;
import android.view.MenuItem;
import java.util.Random;
import io.sule.gaugelibrary.GaugeView;
public class MainActivity extends Activity {
private GaugeView mGaugeView;
private final Random RAND = new Random();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mGaugeView = (GaugeView) findViewById(R.id.gauge_view);
mTimer.start();
}
private final CountDownTimer mTimer = new CountDownTimer(30000, 1000) {
@Override
public void onTick(final long millisUntilFinished) {
mGaugeView.setTargetValue(RAND.nextInt(101));
}
@Override
public void onFinish() {}
};
}
打开上面链接的网站。点击GR004,然后在弹出窗口中点击“免费下载”。
库将被下载,解压缩并按照说明将库(aar文件)安装到您的Android项目中。
将此代码写入您的XML布局中,您的仪表就完成了:
<com.sccomponents.gauges.gr004.GR004
android:layout_width="match_parent"
android:layout_height="match_parent" />
我之前做过这个。随意克隆和修改。(它借鉴了旧的复古温度计的一些想法。)
它可以轻松地添加到您的Gradle项目中:
repositories {
maven {
url 'https://www.jitpack.io'
}
}
dependencies {
compile 'com.github.Pygmalion69:Gauge:1.1'
}
这些视图是在XML中声明的:
<de.nitri.gauge.Gauge
android:id="@+id/gauge1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:layout_weight="0.75"
gauge:labelTextSize="42"
gauge:maxValue="1000"
gauge:minValue="0"
gauge:totalNicks="120"
gauge:valuePerNick="10"
gauge:upperText="Qty"
gauge:lowerText="@string/per_minute" />
final Gauge gauge1 = (Gauge) findViewById(R.id.gauge1);
final Gauge gauge2 = (Gauge) findViewById(R.id.gauge2);
final Gauge gauge3 = (Gauge) findViewById(R.id.gauge3);
final Gauge gauge4 = (Gauge) findViewById(R.id.gauge4);
gauge1.moveToValue(800);
HandlerThread thread = new HandlerThread("GaugeDemoThread");
thread.start();
Handler handler = new Handler(thread.getLooper());
handler.postDelayed(new Runnable() {
@Override
public void run() {
gauge1.moveToValue(300);
}
}, 2800);
handler.postDelayed(new Runnable() {
@Override
public void run() {
gauge1.moveToValue(550);
}
}, 5600);
HandlerThread gauge3Thread = new HandlerThread("Gauge3DemoThread");
gauge3Thread.start();
Handler gauge3Handler = new Handler(gauge3Thread.getLooper());
gauge3Handler.post(new Runnable() {
@Override
public void run() {
for (float x = 0; x <= 6; x += .1) {
float value = (float) Math.atan(x) * 20;
gauge3.moveToValue(value);
try {
Thread.sleep(100);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
});
gauge4.setValue(333);
我不知道晚回答是否有帮助。我也遇到了同样的情况,想要使用仪表盘来可视化数据,因为在android中没有提供仪表盘作为小部件。作为一名爱好者,我去找了像上面那样的库,这些库可以通过互联网上的各种链接找到,虽然它们非常有帮助(感谢优秀的作者……),但我发现在某些情况下难以可视化,所以我做的另一个解决方案是将JavaScript仪表盘集成到我的android应用程序中。您可以按照以下步骤执行:
This is sample code for viewing the webview content..
web = (WebView) findViewById(R.id.webview01); progressBar = (ProgressBar) findViewById(R.id.progressBar1);
web.setWebViewClient(new myWebClient());
web.getSettings().setJavaScriptEnabled(true);
web.post(new Runnable() {
@Override
public void run() {
web.loadUrl("file:///android_asset/fonts/guage.html");
}
});
public class myWebClient extends WebViewClient
{
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stub
super.onPageStarted(view, url, favicon);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
progressBar.setVisibility(View.VISIBLE);
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
// TODO Auto-generated method stub
super.onPageFinished(view, url);
progressBar.setVisibility(View.GONE);
}
}
这是Webview类
请仔细阅读所有内容,欢迎指正!
repositories {
maven {
url 'https://www.jitpack.io'
}
}
dependencies {
implementation 'com.jignesh13.speedometer:speedometer:1.0.0'
}
视图是在XML中声明的:
<com.jignesh13.speedometer.SpeedoMeterView
android:id="@+id/speedometerview"
android:layout_width="250dp"
android:layout_height="250dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.453"
app:layout_constraintStart_toStartOf="parent"
app:backimage="@android:color/black"
app:needlecolor="#fff"
app:removeborder="false"
app:linecolor="#fff"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.079" />