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



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í:
Con respecto a este:
Pantalla de menú desplegable expuestasí 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:
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í:
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!