android - 像android中的速度表这样的简单仪表视图？

Question

我想要一个简单的仪表视图，我将在其中定义开始值和结束值，并有一个指针来显示给定的变量值。

所以我可以显示一个给定的值，比如速度表。例如，如果我的 textView 的值为 1300，那么在 textview 旁边我想要这样的自定义仪表视图动画！

有可能的？任何现有的示例代码？

Answer 1

我在 找到的另一个Evelina Vrabie's blog，使用它并且工作完美！

看Evelina Vrabie's GitHub。它有一个量规库和一些要与之交互的样本。

非常感谢店主 Evelina Vrabie！

---

但是它不适用于 XHDPI/少数版本的 android 设备（4 以上）。问题是仪表视图中的文本。

Answer 2

对于任何寻找简单仪表视图的人，我制作了一个库，您可以根据需要克隆和使用/修改它。

定制仪表

Answer 3

您推荐的所有其他仪表都有错误，并且在 Kitkat 和 Lollipop 上运行不正常。这里也没有 Android Studio 和 gradle 友好的库。

这是最近更新的 Lollipop 的 git 存储库，您可以将其与 Gradle 一起使用：

• https://github.com/Sulejman/GaugeView

在项目中包含库后，将 gaugelibrary 添加到活动的 xml 布局中：

<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 并使其动画移动到随机值。

Answer 4

我不久前做了这个。随意克隆和修改。（它从旧的老式温度计中汲取了一些想法。）

github.com/Pygmalion69/Gauge

它可以很容易地添加到您的 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);

Answer 5

在这个网站上，您会发现一些免费的可定制仪表。

ScComponents

非常容易安装并且有据可查。例如，您可以按照以下说明在 5 分钟内免费获得类似的东西。

转到上面链接的网站。单击 GR004 并在弹出窗口出现后单击“免费下载”。该库将下载、解压缩并按照说明在您的 Android 项目中安装该库（aar 文件）。

在您的 XML 布局中编写此代码，您的仪表将完成：

<com.sccomponents.gauges.gr004.GR004
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

您有许多 XML 选项来自定义它：

• sccAnimDuration
• sccEnableTouch
• scc倒置
• scc字体名称
• sccLabelsSizeAdjust
• sccMajorTicks
• sccMaxValue
• sccMinorTicks
• sccMinValue
• sccShowContour
• sccShowLabels
• sccText
• scc值

并通过编码实现相关功能。

Answer 6

我不知道迟到的答案是否会有所帮助。我也遇到了同样的情况，我想使用仪表来可视化数据，因为仪表不是在 android 中作为小部件给出的，作为一个爱好者，我去了上面的库，可以通过互联网上的各种链接找到，尽管它非常有帮助（感谢它的出色作者..）我发现自己很难在某些情况下可视化，所以我为我的应用程序所做的另一个解决方案是将 JavaScript 仪表集成到我的 android 应用程序中。您可以通过以下步骤做到这一点

1. 在我们的项目中创建一个资产文件夹——看看这个链接，如果有人不知道，你会看到如何创建一个资产文件夹。
2. 下一个是你已经设计了一个关于你的页面应该是什么样子的 html 页面，例如标题，no.of guages 等......并将其放置在文件夹资产中。
3. 有许多网站提供像“这是一个网站”这样的说法，或者您可以浏览其他网站并采取任何您觉得很酷的方式...！！将包括 .js 文件在内的所有内容放入资产文件夹中。
4. Android 提供了一个用于处理 webiview 的类，称为“WebViewClient”，您可以在 Internet 上浏览更多信息以了解更多信息

5. 这是查看 webview 内容的示例代码。

   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");
                   }
               });
   

以上用于加载 html 和 javscript。

 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 类

1. 您还可以将数据从活动发送到 html 页面。请参阅此链接

请大家通读，欢迎指正..!!

Answer 7

使用这个：示例项目

它可以很容易地添加到您的 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" />