WheelView en Android

En este artículo, WheelView se agrega en Android. WheelView proporciona una interfaz de usuario muy impresionante que permite al desarrollador crear una rueda y agregar elementos según sus necesidades. Algunas etiquetas importantes proporcionadas por WheelView son wheelArcBackgroundColor, wheelAnchorAngle, wheelStartAngle, wheelMode, wheelCenterIcon y muchas más. Se puede utilizar cuando el usuario desea seleccionar elementos de una lista de elementos. Supongamos que en la aplicación bancaria, el usuario tiene la opción de seleccionar su cuenta bancaria para verificar el saldo, el historial de pagos, etc., en ese caso se puede usar.

ventajas:  

• Se puede personalizar según los requisitos.
• Proporciona animación con la vista que mejora la interfaz de usuario.
• Proporciona un diseño incorporado que sus alternativas, como el cuadro de diálogo personalizado , que se puede usar en lugar de la vista de rueda, no proporcionan.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Paso 2: agregue la dependencia y el repositorio de JitPack

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘com.github.psuzn:WheelView:1.0.1’

Agregue el repositorio de JitPack a su archivo de compilación. Agréguelo a su root build.gradle al final de los repositorios dentro de la sección allprojects{ }.

todos los proyectos {

 repositorios {

   …

   experto {url «https://jitpack.io»}

     }

}

Después de agregar esta dependencia, sincronice su proyecto y ahora avanzaremos hacia su implementación.  

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <me.sujanpoudel.wheelview.WheelView
        android:id="@+id/wheel_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="16dp"
        app:wheelDividerStrokeWidth="16dp"
        app:wheelArcBackgroundColor="#F7F8FB"
        app:wheelSelectedArcBackgroundColor="@color/colorPrimary"
        app:wheelCenterIcon="@drawable/ic_baseline_add_24"
        app:wheelCenterIconPadding="16dp"
        app:wheelCenterIconTint="@android:color/white"
        app:wheelAnchorAngle="270"
        app:wheelStartAngle="315"
        app:wheelTextSize="16sp"
        app:wheelSelectedTextColor="#FFF"
        app:wheelTextColor="#000000"
        app:wheelAnimationDuration="800"
        app:wheelMode="ANIMATE_TO_ANCHOR"
        />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4: trabajar con el archivo MainActivity

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

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import java.util.Arrays;
import me.sujanpoudel.wheelview.WheelView;
 
public class MainActivity extends AppCompatActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // create a string array  of tiles
        String[] titles={"Bubble Sort", "Quick Sort", "Merge Sort", "Radix Sort"};
         
        // get the reference of the wheelView
        WheelView wheelView =(WheelView)findViewById(R.id.wheel_view);
 
        // convert tiles array to list and pass it to setTitles
        wheelView.setTitles(Arrays.asList(titles));
    }
}

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import me.sujanpoudel.wheelview.WheelView
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        val wheelView = findViewById<WheelView>(R.id.wheel_view)
        wheelView.titles = listOf("Bubble Sort", "Quick Sort", "Merge Sort", "Radix Sort")
    }
}

Producción: