Generalidades

Crear y diseñar menús desplegables en Android | Autor: Stelios Papamihail | Julio de 2021

1*KJ2206I4BTaZ70hJN1qqzA
Stelios Papamicell

Recientemente tuve que implementar un menú desplegable personalizado para mi aplicación, y me tomó mucho tiempo averiguar qué estilo diseñar y cómo hacerlo correctamente para lograr la apariencia que quería. Por lo tanto, en este artículo, presentaré cómo usar TextInputLayout y AutoCompleteTextView para personalizar el menú desplegable público. Empezaremos aquí:

Menú desplegable expuesto ligeramente personalizado

Con respecto a este:

El menú desplegable finalmente expuesto

Pantalla de menú desplegable expuesta El elemento de menú seleccionado actualmente sobre la lista de opciones. Algunas variantes pueden aceptar la entrada del usuario.En Android, esta función se puede utilizar TextInputLayout Con anidación AutocompleteTextView Todos son componentes de la biblioteca de materiales de Android. Importemos la biblioteca a nuestro proyecto:

implementation ‘com.google.android.material:material:1.4.0’

También usaré VVer enlace Para este tutorial, asegúrese de habilitarlo en build.gradle del módulo agregando lo siguiente:

android 
...
buildFeatures
viewBinding true

Primero declaremos el diseño básico de un menú desplegable expuesto por el material.

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/dateFilterContainer" style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/label">

<AutoCompleteTextView
android:id="@+id/datesFilterSpinner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="none"
tools:text="All Time"" />
</com.google.android.material.textfield.TextInputLayout>

Aquí simplemente agregamos un TextInputLayout Contiene una AutoCompleteTextView Esto servirá como nuestro menú desplegable.Precauciones inputType="none" De acuerdo, porque le dice a AutoCompleteTextView que no vamos a ingresar manualmente ningún detalle de texto. Esto, combinado con el estilo personalizado que asignamos a TextInputLayout, permitirá que AutoCompleteTextView funcione como una ruleta cuando se hace clic.

Para obtener más información sobre los diversos estilos disponibles y las opciones de personalización, consulte la documentación de diseño de materiales del menú de Google.

Comencemos con el color que usaremos para el fondo de la lista desplegable.

<color name="pastel_orange_light">#FBE8DF</color>

A continuación, crearemos un nuevo filter_spinner_dropdown_bg.xml dibujable y dale forma con el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/pastel_orange_light" />
<corners android:radius="20dp" />
</shape>

Lo último que necesitamos es un icono desplegable, que se colocará al final de TextInputLayout. Usé la flecha hacia abajo del paquete de iconos de plumas gratuito. Bien, ahora que tenemos todos los recursos, modifiquemos el estilo del menú desplegable.

Primero, tenemos que configurar background Nuestro TextInputLayout al dibujable que creamos anteriormente.

A continuación, cambiaremos las esquinas de los cuadros colocados alrededor del TextInputLayout (debido al estilo que elegimos) radius Cada rincón y escenario boxStrokeWidth y boxStrokeWidthFocused llegar 0dp Porque no queremos ningún esquema en la lista desplegable.

Además, usemos endIconDrawable Atribúyelo y úsalo para colorear a juego con nuestro estilo endIconTint.

Ahora hemos completado el estilo de TextInputLayout, así que pasemos a AutoCompleteTextView.Aquí ponemos background="@null" De esta manera, no se superpondrá con el fondo de nuestro TextInputLayout.

A continuación, especificamos un dropDownSelector dibujable, en este caso, será el mismo que el dibujable que creamos anteriormente.

dropDownSelector es un elemento de diseño que se utiliza para resaltar un elemento al hacer clic en él.

Para mi aplicación, no quiero que nada como esto sea visible, así que lo configuré para que sea el mismo que nuestro dibujable de fondo.

Adelante, agregar las siguientes líneas solo limitará el texto a una línea para que todo se vea igual y los puntos suspensivos (...) Se agregará al final del texto si es demasiado largo.

android:ellipsize="end"
android:maxLines="1"
android:singleLine="true"

También agregaremos algo de relleno en la parte superior e inferior, porque por alguna razón, anidar AutoCompleteTextView en TextInputLayout hará que se recorte a los bordes de TextInputLayout.

Finalmente, centramos el texto y le damos estilo, y eso es todo. A continuación se muestra el código final.

<com.google.android.material.textfield.TextInputLayout
android:id="@+id/typesFilterContainer" style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:background="@drawable/filter_spinner_dropdown_bg"
app:boxBackgroundColor="@color/pastel_orange_light"
app:boxCornerRadiusBottomEnd="20dp"
app:boxCornerRadiusBottomStart="20dp"
app:boxCornerRadiusTopEnd="20dp"
app:boxCornerRadiusTopStart="20dp"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:endIconDrawable="@drawable/ic_arrow_down"
app:endIconTint="@color/pastel_orange_txt_highlight">

<AutoCompleteTextView
android:id="@+id/typesFilter"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@null"
android:fontFamily="@font/lato" android:dropDownSelector="@drawable/filter_spinner_dropdown_bg"
android:ellipsize="end"
android:inputType="none"
android:maxLines="1"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:singleLine="true"
android:text="All Types"
android:textAlignment="center"
android:textColor="@color/pastel_orange_txt_highlight"
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>

Ahora debería tener algo que se parezca mucho a esto:

Producción

A continuación, veamos cómo llenar la lista desplegable con elementos.

Para configurar los elementos desplegables de nuestro menú, debemos usar ArrayAdapter<>() Y pase el contexto, el diseño del proyecto y la lista de proyectos.En este caso, usaremos el predefinido android.R.layout.simple_spinner_dropdown_item El diseño, porque satisfará nuestras necesidades actuales, pero también puede usar un diseño personalizado y personalizarlo aún más en la subclase ArrayAdapter personalizada. Veamos el código hasta ahora:

val adapter = ArrayAdapter(
requireContext(), android.R.layout.simple_spinner_dropdown_item, arraylistOf("All Types", "Assignments", "Exam", "Lab")
)
binding?.typesFilterSpinner?.setAdapter(adapter)
binding?.typesFilterSpinner?.setText("All Types")

Genial, ahora que nuestro menú desplegable está lleno de elementos, necesitamos definir un elemento de diseño personalizado para usarlo como fondo desplegable, porque ahora se usará el color blanco predeterminado.

Una vez más, usaremos nuestro filter_spinner_dropdown_bg.xml Dibujable.Solo llama setDropDownBackgroundDrawable() En AutoCompleteTextView, este será el fondo.

binding?.typesFilterSpinner.setDropDownBackgroundDrawable(
ResourcesCompat.getDrawable(
resources,
R.drawable.filter_spinner_dropdown_bg,
null
)
)

Bien, finalmente terminamos el estilo del menú desplegable. Ahora debería verse así:

resultado final

En nuestra última parte, veremos cómo manejar los eventos de clic de elementos.

Para recibir una notificación cuando se haga clic en el elemento desplegable, simplemente definiremos nuestro propio AdapterView.OnItemClickListener Y utilícelo en nuestro AutoCompleteTextView.

binding?.typesFilterSpinner.onItemClickListener =
AdapterView.OnItemClickListener parent, view, position, id->
// do something with the available information

Con esto concluye este tutorial, y ahora debería tener un menú desplegable / indicador giratorio completamente funcional y de aspecto hermoso. Si tiene alguna sugerencia, mejora o comentario general, hágamelo saber en los comentarios e intentaré incluirlos. ¡Feliz codificación!

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba