简单的仪表视图像android中的车速表?

时间:2012-09-23 09:50:03

标签: android view android-animation android-custom-view gauge

我希望有一个简单的仪表视图,我将定义起始值和结束值,并有一个指针来显示给定的变量值。

enter image description here

所以我可以像速度计一样显示给定值。例如,如果我的textView的值是1300,那么在textview旁边我想要这样的自定义米视图动画!

有可能吗?任何现有的示例代码?

7 个答案:

答案 0 :(得分:22)

我在Evelina Vrabie's blog找到的另一个,使用它并且完美无缺!

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

  

非常感谢主人Evelina Vrabie!


enter image description here

然而,它不适用于XHDPI /几个版本的Android设备(4以上)。问题是仪表视图中的文字。

答案 1 :(得分:16)

对于任何寻找简单规格视图的人,我建立了一个可以根据需要克隆和使用/修改的库。

CustomGauge

enter image description here

答案 2 :(得分:11)

您推荐的所有其他仪表都有缺陷,并且在Kitkat和Lollipop上运行不正常。此处还没有Android Studio和gradle友好库。

这里有关于Lollipop更新的git repo,你可以使用Gradle:

enter image description here

在项目中包含库后,将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() {}
   };
}

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

答案 3 :(得分:3)

我刚才做了这个。随意克隆和修改。 (它需要旧Vintage Thermometer的一些想法。)

github.com/Pygmalion69/Gauge

enter image description here

可以轻松添加到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);

答案 4 :(得分:2)

我不知道迟到的答案是否会有所帮助。我也遇到了同样的情况,我想使用一个仪表来显示数据,因为规范不是作为Android中的小部件给出的,作为一个发烧友,我去了上面的图书馆,可以通过互联网上的各种链接找到,虽然它非常有帮助(感谢它的精彩作者..)我发现自己很难在某些情况下可视化,所以我做的另一个解决方案是我的应用程序是我将JavaScript计量器集成到我的Android应用程序中。 您可以通过以下步骤

执行此操作
  1. 在我们的项目中创建资产文件夹 - look this link,如果有人不知道,您将看到如何创建资产文件夹。
  2. 接下来你要设计一个关于你的页面如何形成的html页面,如eg-header,no.of guages等...并将它放在文件夹资产中。
  3. 有许多网站提供像This is one site这样的文章,或者你可以浏览其他网站并采取任何你感觉很酷的东西...... !! 全部包括.js文件并将其放在资产文件夹中。
  4. Android提供了一个处理webiview的课程,名为&#34; WebViewClient&#34; 您可以浏览更多内容以了解有关它的更多信息
  5. 这是查看网页视图内容的示例代码..

    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");
                    }
                });
    
  6. 以上加载html&amp; 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页面。Refer This link
    2. 请仔细阅读所有内容,欢迎更正。!!

答案 5 :(得分:2)

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

ScComponents

非常容易安装和记录良好。 例如,您可以按照以下说明在5分钟内免费获得此类内容。

enter image description here

转到上述链接网站。单击GR004,弹出窗口后单击&#34;免费下载&#34;。 该库将下载,解压缩并按照说明在您的Android项目中安装库(aar文件)。

将此代码写入您的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

通过编码和相关功能。

答案 6 :(得分:0)

使用此命令:Sample Project

可以轻松将其添加到您的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" />