Selector de número de medidor en Android

El selector de medidores es una de las funciones más populares utilizadas en las aplicaciones de Android para rastrear el medidor. Puede ver esta función en la aplicación de seguimiento de distancia. Con la ayuda de esto, puede realizar un seguimiento de la distancia que ha viajado. En este artículo, vamos a aprender cómo implementar un selector de medidores en la aplicación de Android. qué

Aplicación del selector de número de medidor

• Este Meter Picker es uno de los juegos para rastrear cuánto has viajado.
• En la mayoría de las aplicaciones de entrega de alimentos, este selector de medidor se usa para rastrear la distancia que ha recorrido el repartidor.

Atributos del selector de número de medidor

Paso 1: Crear un nuevo proyecto

Cómo crear/iniciar un nuevo proyecto en Android Studio Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia de la biblioteca de selección de números de medidor en el archivo build.gradle

Primero navegue a los scripts de Gradle y luego al nivel build.gradle (Proyecto). Agregue la línea que se proporciona a continuación en la sección allprojects{}.

mavenCentral()

Luego navegue a los scripts de gradle y luego al nivel build.gradle (Módulo). Agregue la siguiente línea en el archivo build.gradle en la sección de dependencias.

implementación ‘com.alex-zaitsev:meternumberpicker:1.0.5’

Ahora haga clic en Sincronizar ahora sincronizará todos sus archivos en build.gradle().

Paso 3: agregue código para el estilo en el archivo themes.xml

Primero navegue a la carpeta res , luego vaya a la carpeta de valores y luego navegue al archivo themes.xml y agregue el siguiente código dentro de la etiqueta <resources> .

<!--style created for meter picker--> 
<style name="MeterNumberPickerStyle">
  <item name="mnp_min">0</item>
  <item name="mnp_max">9</item>
  <item name="mnp_textColor">@android:color/white</item>
  <item name="mnp_textSize">50sp</item>
  <item name="mnp_paddingHorizontal">5dp</item>
  <item name="mnp_paddingVertical">25dp</item>
</style>
  
<!--style given for first 5 elements is black
    And for last element is red-->
<style name="MeterViewStyle">
  <item name="mv_firstColor">@android:color/black</item>
  <item name="mv_numberOfFirst">5</item>
  <item name="mv_numberOfSecond">1</item>
  <item name="mv_pickerStyle">@style/MeterNumberPickerStyle</item>
  <item name="mv_secondColor">@android:color/holo_red_dark</item>
</style>

Paso 4: Cree un nuevo ShadowImageView en su archivo activity_main.xml

actividad_principal.xml actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <com.alexzaitsev.meternumberpicker.MeterView
        android:id="@+id/meterView"
        style="@style/MeterViewStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" />
  
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/meterView"
        android:layout_centerInParent="true"
        android:layout_marginTop="70dp"
        android:text="Get"
        android:textColor="@color/white"
        android:textSize="20dp"
        android:textStyle="bold" />
  
</RelativeLayout>

Paso 5: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.alexzaitsev.meternumberpicker.MeterView;
  
public class MainActivity extends AppCompatActivity {
  
    // variable to pick number
    MeterView meterNumberPicker;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // number picker called using meter picker id
        meterNumberPicker = findViewById(R.id.meterView);
  
        // button called using button id
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int number = meterNumberPicker.getValue();
  
                // Toast value to display the number
                Toast.makeText(MainActivity.this, "" + number, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Producción: