web-dev-qa-db-ja.com

Androidのスピードメーターのようなシンプルなゲージビュー？

開始値と終了値を定義し、指定された変数値を表示するためのポインターを持つ単純なゲージビューが必要です。

enter image description here

だから私はスピードメーターのような与えられた値を示すことができます。たとえば、textViewの値が1300の場合、textviewの横に、このようなカスタムメータービューアニメーションが必要です。

可能です？既存のサンプルコードはありますか？

androidviewandroid-animationandroid-custom-viewgauge
19
oikonomopo

Evelina Vrabie's blog 、それを使用して完璧に動作しました！

見る - Evelina Vrabie's GitHub 。ゲージライブラリと対話するサンプルがあります。

オーナーのEvelina Vrabieに感謝します！

enter image description here

ただし、Androidデバイス（4以上）のXHDPI/Fewバージョンでは動作しません。問題はゲージビューのテキストです。

21
oikonomopo

シンプルなゲージビューを探している人のために、必要に応じてクローンを作成して使用/変更できるライブラリを作成しました。

CustomGauge

enter image description here

16
pkleczko

推奨される他のすべてのゲージにはバグがあり、KitKatおよびLollipopでは正常に動作しません。また、ここにはAndroid Studioおよびgradleフレンドリーなライブラリはありません。

Gradleで使用できるLollipop用に更新された最新のもののgitリポジトリを次に示します。

enter image description here

ライブラリをプロジェクトに追加した後、アクティビティのXMLレイアウトにgaugelibraryを追加します。

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

これにより、針がインスタンス化され、ランダムな値に移動するアニメーションが作成されます。

11
Sulejman Sarajlija

少し前にこれを作りました。クローンや修正をお気軽に。 （古い 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);
3
Pygmalion

このサイトには、カスタマイズ可能な無料のゲージがいくつかあります。

ScComponents

インストールが非常に簡単で、十分に文書化されています。たとえば、次の手順に従って5分でこのようなものを無料で使用できます。

enter image description here

上記のリンクされたWebサイトにアクセスします。 GR004をクリックし、ポップアップが表示されたら、「Download for FREE」をクリックします。ライブラリがダウンロードされ、解凍され、指示に従ってライブラリ（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

そして、コーディングによる関連機能。

2
Samuele Carassai

遅い答えが助けになるかどうかはわかりません。ゲージはAndroidのウィジェットとして提供されていないため、ゲージを使用してデータを視覚化したいという同じ状況になりました。マニアとしては、インターネットのさまざまなリンクから見つけることができる上記のようなライブラリを探しましたが、非常に役に立ちました（素晴らしい作者のおかげです。）特定の状況で視覚化するのが難しいと感じたので、アプリのもう1つの解決策は、JavaScriptゲージをAndroid application。次の手順で実行できます

  1. プロジェクトにアセットフォルダーを作成します- このリンクを見てください 知らない人がアセットフォルダーを作成する方法がわかります。
  2. 次に、ヘッダー、no.of guagesなどのために、ページがどのように見えるかに関するhtmlページを設計し、それをフォルダーアセットに配置します。
  3. これは1つのサイトです のようなゲージを提供する多くのサイトがあります。または、他のサイトを閲覧して、クールなものは何でも取ることができます... !! .jsファイルを含むすべてを取り、アセットフォルダーに配置します。
  4. Androidは "WebViewClient"というwebiviewを処理するためのクラスを提供します

  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ページにデータを送信することもできます。 このリンクを参照

親切にすべてを読んで、修正を歓迎します.. !!

2
user6602265

これを使用してください： サンプルプロジェクト

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" />
0
Jigs Patel