Affichage simple de la jauge comme l'indicateur de vitesse dans Android?
Je veux avoir une vue de jauge simple où je définirai la valeur de début et la valeur de fin et avoir un pointeur pour afficher la valeur variable donnée.
Je peux donc montrer une valeur donnée comme le compteur de vitesse. Par exemple, si ma valeur d'une textView est de 1300, à côté de la TextView, je veux avoir cette animation de vue de compteur personnalisée comme celle-ci!
C'est possible? Un exemple de code existant?
Un autre que j'ai trouvé à Evelina Vrabie's blog , l'a utilisé et a parfaitement fonctionné!
Regarder Evelina Vrabie's GitHub . Il a une bibliothèque de jauges et quelques échantillons avec lesquels interagir.
Un grand merci à la propriétaire Evelina Vrabie!
Cependant, il ne fonctionne pas sur les versions XHDPI/peu de Android (au-dessus de 4). Le problème est le texte dans la vue de la jauge.
Pour ceux qui recherchent une vue de jauge simple, j'ai créé une bibliothèque que vous pouvez cloner et utiliser/modifier selon vos besoins.
Toutes les autres jauges que vous avez recommandées ont des bogues et ne fonctionnent pas bien sur KitKat et Lollipop. Il n'y a pas non plus de Android Studio et bibliothèque conviviale pour les diplômés ici.
Voici le dépôt git pour le plus récent mis à jour pour Lollipop que vous pouvez utiliser avec Gradle:
Après avoir inclus la bibliothèque dans votre projet, ajoutez la gaugelibrary à la disposition xml de votre activité:
<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"
/>
Cela montrera la jauge statique sans aiguille. Pour instancier une aiguille avec une animation aléatoire, vous devez le faire dans le fichier de classe d'activité. Voyez comment cela se fait ici:
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() {}
};
}
Cela instanciera l'aiguille et la fera animer en se déplaçant vers des valeurs aléatoires.
J'ai fait celui-ci il y a un moment. N'hésitez pas à cloner et à modifier. (Il prend quelques idées de l'ancien Thermomètre Vintage .)
Il peut facilement être ajouté à votre projet Gradle:
repositories {
maven {
url 'https://www.jitpack.io'
}
}
dependencies {
compile 'com.github.Pygmalion69:Gauge:1.1'
}
Les vues sont déclarées en 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" />
Voici un exemple de définition des valeurs par programme:
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);
Sur ce site, vous trouverez des jauges personnalisables gratuites.
Très facile à installer et bien documenté. Par exemple, vous pouvez avoir gratuitement quelque chose comme ça en 5 minutes en suivant les instructions ci-dessous.
Allez sur le site Web lié ci-dessus. Cliquez sur le GR004 et après l'apparition de la fenêtre contextuelle, cliquez sur "Télécharger gratuitement". La bibliothèque sera téléchargée, décompressez et suivez les instructions pour installer la bibliothèque (fichier aar) dans votre projet Android.
Écrivez ce code dans votre mise en page XML et votre jauge fera:
<com.sccomponents.gauges.gr004.GR004
Android:layout_width="match_parent"
Android:layout_height="match_parent" />
Vous disposez de nombreuses options XML pour le personnaliser:
- sccAnimDuration
- sccEnableTouch
- sccInverted
- sccFontName
- sccLabelsSizeAdjust
- sccMajorTicks
- sccMaxValue
- sccMinorTicks
- sccMinValue
- sccShowContour
- sccShowLabels
- sccText
- sccValue
Et la fonction associée par codage.
Je ne sais pas si la réponse tardive va aider ou non. Je suis également arrivé à la même situation où je veux utiliser une jauge pour visualiser les données, car la jauge n'est pas donnée comme widget dans Android, en tant que passionné, je suis allé pour des bibliothèques comme ci-dessus qui peuvent être trouvées via divers liens sur Internet, bien qu'il était très utile (grâce aux merveilleux auteurs de celui-ci ..) je me trouve difficile à visualiser dans certaines situations, donc une autre solution que j'ai faite est pour mon application est que j'ai intégré les jauges JavaScript dans mon Android application. Vous pouvez le faire par les étapes suivantes
- Créez un dossier de ressources dans notre projet - regardez ce lien et vous verrez comment créer un dossier de ressources si quelqu'un ne le sait pas.
- Le suivant est que vous avez conçu une page html sur l'apparence de votre page sholud, par exemple en-tête, pas de jauge etc ... et placez-la dans le dossier asset.
- Il existe de nombreux sites qui fournissent des indicateurs comme Ceci est un site ou vous pouvez parcourir d'autres sites et prendre tout ce que vous sentez cool ... !! prenez le tout, y compris les fichiers .js et placez-le dans le dossier des ressources.
- Android propose une classe de gestion de la vue Web appelée "WebViewClient" , vous pouvez en savoir plus pour en savoir plus sur Internet
Voici un exemple de code pour afficher le contenu de la vue Web.
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"); } });
Ce qui précède pour charger le 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);
}
}
C'est la classe webview
- Vous pouvez également envoyer des données d'activité à la page html .. Reportez-vous à ce lien
Veuillez lire tout, les corrections sont les bienvenues .. !!
Utilisez ceci: Exemple de projet
Il peut facilement être ajouté à votre projet Gradle:
repositories {
maven {
url 'https://www.jitpack.io'
}
}
dependencies {
implementation 'com.jignesh13.speedometer:speedometer:1.0.0'
}
Les vues sont déclarées en 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" />