我想要一个简单的仪表盘视图，其中我将定义起始值和结束值，并有一个指针来显示给定变量的值。
这样我就可以像速度表一样显示给定的值。例如，如果我的textView的值为1300，则我想在textView旁边拥有这样的自定义表视图动画！
这是可能的吗？有现有的示例代码吗？
7个回答
21
我在 Evelina Vrabie的博客上发现了一个库，并使用后表现完美!
看看 Evelina Vrabie的GitHub。它有一个仪表盘库和一些与之交互的示例。
非常感谢Evelina Vrabie的所有者！
然而，在XHDPI /某些Android设备（4.0以上）上无法正常工作，问题出在仪表盘视图中的文本。
- oikonomopo
3
这个视图还能用吗？当我使用它时，我得到了这个错误：java.lang.NullPointerException
at android.content.res.BridgeResources.getString(BridgeResources.java:501)
at android.content.Context.getString(Context.java:334)
at org.codeandmagic.android.gauge.GaugeView.readAttrs(GaugeView.java:224)
at org.codeandmagic.android.gauge.GaugeView.<init>(GaugeView.java:170)
at org.codeandmagic.android.gauge.GaugeView.<init>(GaugeView.java:175)
at ......... - Or Kazaz
太棒了。你怎么自定义它？比如设置不同的针尖样式？ - Machado
它没有配置gradle。现在如何在Android项目中使用它？ - Kruti Parekh
18
任何想要简单仪表盘视图的人，我制作了一个库，你可以克隆并使用/修改来满足你的需求。
CustomGauge
- pkleczko
8
不错的库，但我只需要它180度，我该如何处理？ - Mina Fawzy
2我使用了你的库，但是在所有的
gauge:*** 属性中都显示错误。我添加了 xmlns:gauge="http://schemas.android.com/apk/res-auto" 但仍然出现错误。@pkleczko 你能说一下问题出在哪里吗？ - Nirmal Raj1@lschuetze - 请随意使用它。为什么GPL不足够？ - pkleczko
这太棒了！谢谢。我喜欢它因为它简单但看起来很好。 - Led
@Mann，我无法解决我遇到的错误，所以我写了自己的代码，而不是使用库。 - Nirmal Raj
显示剩余3条评论
13
所有你推荐的其他仪表盘都存在漏洞，在Kitkat和Lollipop上无法正常运行。此外，这里也没有与Android Studio和Gradle兼容的库。
这是一个Git存储库，用于更近期的更新版本，可以与Gradle一起使用，并且已经适配Lollipop：
这将显示没有指针的静态仪表盘。要实例化带有随机动画的指针，您需要在活动类文件中执行此操作。请参阅此处的操作方式：
这将实例化 needle 并使其动画移动到随机值。
这是一个Git存储库，用于更近期的更新版本，可以与Gradle一起使用，并且已经适配Lollipop：
<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() {}
};
}
这将实例化 needle 并使其动画移动到随机值。
- Sulejman Sarajlija
7
嘿@sulejman，这个库的minSdk版本设置为21，对于我的应用程序来说有点太高了，所以当我将其导入到我的应用程序中，由于我的minSdk版本为9，在构建时会出现合并错误，请问你能否将minSdk设置为较低的版本或提出解决方法？ - user3677331
我们可以将负值应用于这个GaugeView吗？我尝试过了，但没有成功。 - Amol Sawant
它支持负值吗？ - Moeez
它是免费使用的吗？ - Moeez
依赖在哪里？ - Moeez
显示剩余2条评论
4
在这个网站上，您可以找到一些免费可定制的仪表。
ScComponents
非常容易安装并有良好的文档。例如，您可以免费获得以下内容，并在5分钟内按照以下说明进行操作。
你有许多XML选项可自定义它：
打开上面链接的网站。点击GR004，然后在弹出窗口中点击“免费下载”。
库将被下载，解压缩并按照说明将库（aar文件）安装到您的Android项目中。
将此代码写入您的XML布局中，您的仪表就完成了：
<com.sccomponents.gauges.gr004.GR004
android:layout_width="match_parent"
android:layout_height="match_parent" />
你有许多XML选项可自定义它：
- sccAnimDuration（动画持续时间）
- sccEnableTouch（启用触摸）
- sccInverted（反转）
- sccFontName（字体名称）
- sccLabelsSizeAdjust（标签大小调整）
- sccMajorTicks（主要刻度线）
- sccMaxValue（最大值）
- sccMinorTicks（次要刻度线）
- sccMinValue（最小值）
- sccShowContour（显示轮廓）
- sccShowLabels（显示标签）
- sccText（文本）
- sccValue（数值）
- Samuele
4
我之前做过这个。随意克隆和修改。(它借鉴了旧的复古温度计的一些想法。)
它可以轻松地添加到您的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);
- Pygmalion
2
我不知道晚回答是否有帮助。我也遇到了同样的情况，想要使用仪表盘来可视化数据，因为在android中没有提供仪表盘作为小部件。作为一名爱好者，我去找了像上面那样的库，这些库可以通过互联网上的各种链接找到，虽然它们非常有帮助（感谢优秀的作者……），但我发现在某些情况下难以可视化，所以我做的另一个解决方案是将JavaScript仪表盘集成到我的android应用程序中。您可以按照以下步骤执行：
- Create an asset folder in our project-look this link and you will see how to create an asset folder if someone don't knows about it.
- Next one is you have design an html page on how your page sholud look like, for eg- header,no.of guages etc... and place it in the folder asset.
- There are many sites which provide the guages like This is one site or you can browse other sites and take whatever you feel cool...!! take it all including .js files and place it in the asset folder.
- Android provides a class for handling webiview called "WebViewClient" you can browse more to know more about it in internet
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类
- 你也可以从activity向html页面发送数据。请参考此链接
请仔细阅读所有内容，欢迎指正！
- user6602265
2
一种绕路的方法，但仍然有效。即使如此，在Android开发中，自定义视图始终比Webview内的HTML / JS表现和外观更好。 - mix3d
我是一个初学者，时间也比较少... 感谢 @mix3d，你能详细解释一下你的答案吗？ - user6602265
0
使用这个: 示例项目
它可以轻松地添加到您的 Gradle 项目中:
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" />
- Jigs Patel
1
这个很酷，但是最高速度和刻度值都是硬编码的。 - KeatsKelleher
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接