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

Question

提问by oikonomopo

I want to have a simple gauge view where i will define the start value and the end value and have a pointer to show given variable value.

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

enter image description here

在此处输入图片说明

So i can show a given value like speedmeter. For example if my the value of a textView is 1300, then next to the textview i want to have this custom meter view animation like this!

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

It is possible? Any existing example code?

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

Answer 1

回答by oikonomopo

Another one i found at Evelina Vrabie's blog, used it and worked perfect!

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

Look at Evelina Vrabie's GitHub. It has a gauge library and some samples to interact with.

看看Evelina Vrabie's GitHub。它有一个仪表库和一些可以与之交互的样本。

Big thanks to the owner Evelina Vrabie!

非常感谢店主 Evelina Vrabie！

enter image description here

在此处输入图片说明

However it is not working on XHDPI/Few versions of android devices (above 4). Problem is the text in gauge view.

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

Answer 2

回答by pkleczko

For anyone looking for simple gauge view I made a library that you can clone and use/modify for your needs.

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

CustomGauge

自定义仪表

enter image description here

在此处输入图片说明

Answer 3

回答by Sulejman Sarajlija

All other gauges you recommended have bugs and don't run fine on Kitkat and Lollipop. Also there is no Android Studio and gradle friendly library here.

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

Here's git repo for the more recent one updated for Lollipop you can use with Gradle:

这是最近更新的 Lollipop 的 git repo，您可以与 Gradle 一起使用：

https://github.com/Sulejman/GaugeView

https://github.com/Sulejman/GaugeView

enter image description here

在此处输入图片说明

After you include library in your project add gaugelibrary to xml layout of your activity:

在项目中包含库后，将 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"
 />

This will show static gauge without needle. To instantiate needle with random animation you need to do that in activity class file. See how it's done here:

这将显示没有针的静态仪表。要使用随机动画实例化针，您需要在活动类文件中执行此操作。在这里查看它是如何完成的：

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() {}
   };
}

This will instantiate needle and make it animate moving to random values.

这将实例化针并使其动画移动到随机值。

Answer 4

回答by Pygmalion

I made this one a while ago. Feel free to clone and modify. (It takes some ideas from the old Vintage Thermometer.)

我不久前做了这个。随意克隆和修改。（它需要一些来自旧式温度计的想法。）

github.com/Pygmalion69/Gauge

It can easily be added to your Gradle project:

它可以轻松添加到您的 Gradle 项目中：

repositories {
    maven {
        url 'https://www.jitpack.io'
    }
}

dependencies {
    compile 'com.github.Pygmalion69:Gauge:1.1'
}

The views are declared in XML:

视图在 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" />

Here's an example of setting the values programmatically:

这是以编程方式设置值的示例：

    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

回答by Samuele Carassai

On this site you will find some free customizable gauges.

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

ScComponents

Very easy to install and well documented. For example you can have for free something like this in 5 minutes following the instruction below.

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

Go on the above linked website. Click the GR004 and after the popup appear click on "Download for FREE". The library will downloaded, unzip and follow the instruction to install the library (aar file) inside your Android project.

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

Write this code in your XML layout and your gauge will done:

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

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

You have many XML options to customize it:

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

sccAnimDuration
sccEnableTouch
sccInverted
sccFontName
sccLabelsSizeAdjust
sccMajorTicks
sccMaxValue
sccMinorTicks
sccMinValue
sccShowContour
sccShowLabels
sccText
sccValue

sccAnimDuration
sccEnableTouch
scc倒置
字体名称
sccLabelsSizeAdjust
sccMajorTicks
最大值
sccMinorTicks
最小值
sccShowContour
sccShowLabels
文本
scc 值

And the related function by coding.

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

Answer 6

回答by Samuele Carassai

I don't know whether the late answer is going to help or not. I also came to the same situation where i want to use a gauge to visualize data, since gauge is not given as widget in android, as a enthusiast i went for libraries like above which can be found through various links in the Internet, although it was quite helpful(thanks to the wonderful authors of it..) i find myself difficult to visualize the during certain situations, so another solution what i have done is for my app is i integreated the JavaScript gauges into my android application. You can do that by the following steps

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

Create an asset folder in our project-look this linkand 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 siteor 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");
                }
            });

在我们的项目中创建一个资产文件夹 -查看此链接，如果有人不知道，您将看到如何创建资产文件夹。
下一个是你设计了一个关于你的页面看起来如何的 html 页面，例如 - 标题，no.of guages 等......并将其放置在文件夹资产中。
有许多站点提供类似“这是一个站点”这样的标准，或者您可以浏览其他站点并选择您觉得很酷的任何内容...！将所有内容包括 .js 文件放入资产文件夹中。
Android 提供了一个名为“WebViewClient”的处理 webiview 的类，您可以在互联网上浏览更多信息以了解更多信息

这是查看 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");
                }
            });

The above for loading the html & javscript.

以上用于加载 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);
    }
}

This the webview class

这是 webview 类

You can also send data from activity to html page.. Refer This link

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

Kindly read through all, corrections are welcomed..!!

请通读所有，欢迎更正..！！

Answer 7

回答by Jigs Patel

Use this : Sample Project

使用这个：示例项目

It can easily be added to your Gradle project:

它可以轻松添加到您的 Gradle 项目中：

repositories {
    maven {
        url 'https://www.jitpack.io'
    }
}

dependencies {
implementation 'com.jignesh13.speedometer:speedometer:1.0.0'
}

The views are declared in XML:

视图在 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" />

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

提问by oikonomopo

回答by oikonomopo

回答by pkleczko

回答by Sulejman Sarajlija

回答by Pygmalion

回答by Samuele Carassai

回答by Samuele Carassai

回答by Jigs Patel

相关推荐

最近更新

标签

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

提问by oikonomopo

回答by oikonomopo

回答by pkleczko

回答by Sulejman Sarajlija

回答by Pygmalion

回答by Samuele Carassai

回答by Samuele Carassai

回答by Jigs Patel

相关推荐

Android 如何将媒体控制器按钮放在通知栏上？

检查androids资产文件夹中的文件是否存在？

Android 如何从PC安装apk文件？

Android 有没有办法从 APK 文件中获取源代码？

相关推荐

最近更新

标签