#1 Android Bottom Sheet Tutorial – Persistent Bottom Sheet Design

¡¡Hola a todos!! Soy Belal Khan y estás viendo
codificación simplificada. En esta lista de reproducción, aprenderemos a hacer una
Hoja inferior en nuestra aplicación de Android. Una hoja inferior es otro componente de vista en
Android que se desliza hacia arriba desde la parte inferior de la pantalla. Se puede utilizar para proporcionar al usuario más contenido
sobre la pantalla actual o también se puede utilizar para proporcionar más opciones
a su usuario. Puede ver una hoja inferior en la
aplicación de Google Drive como la tengo aquí. Cuando toco este botón Agregar, la hoja inferior se
desliza hacia arriba. Así que esta es la hoja inferior de la que estaba
hablando. Y aquí en esta aplicación de Google Drive
, es un modelo de hoja inferior. Así que tenemos dos tipos de láminas inferiores, como
puede ver en las pautas de diseño de materiales. Entonces, la primera es una hoja inferior persistente
y la siguiente es una hoja inferior modelo. Puede ver aquí que tenemos dos tipos de
hojas inferiores y esta es la hoja inferior modelo o de diálogo.

Pero en este video, aprenderemos sobre la
hoja inferior persistente. Entonces, comencemos nuestro proyecto de Android y veamos
cómo podemos crear una hoja inferior persistente en nuestro proyecto de Android. Entonces, primero crearé un nuevo proyecto de estudio de Android
usando una actividad vacía. Y lo llamaré SampleBottomSheet,
puedes nombrarlo como quieras y el idioma es Kotline y el SDK mínimo es
5.O puedes cambiarlo si quieres. Entonces, nuestro proyecto está listo y lo primero
que debemos hacer es agregar nuestra dependencia de diseño de materiales para que
ingresemos al nivel de la aplicación build.gradle. Y dentro de la dependencia hay un bloque,
agregaremos la dependencia, así que obtengamos el diseño de material gradleandroid, abriremos el primer
enlace y agregaremos esta dependencia a nuestro proyecto de Android. Así que agréguelo aquí, también necesitamos agregar la versión,
así que lo que haremos es visitar el repositorio Naumann de Google para encontrar la última versión
de la biblioteca. Así que tenemos material aquí y la versión es
1.3.O-alpha1, así que lo copiaré en esta versión y lo pegaré aquí así. Ahora necesitamos sincronizar nuestro proyecto y la sincronización
está lista.

Ahora necesitamos crear nuestra hoja inferior y
para crear una hoja inferior, creamos un
archivo de recursos de diseño normal y lo hacemos dentro de la carpeta de diseños, así que haremos clic con el botón derecho en Ir a Nuevo y
seleccionaremos el archivo de recursos de diseño. Y aquí crearé un archivo llamado my_persistent_bottom_sheet
o puedes nombrar este archivo como quieras. Así que presionemos ok para crear el archivo y ya
tenemos listo nuestro archivo de diseño de hoja inferior.

Ahora, aquí tenemos que diseñar nuestra hoja inferior
. No dedicaré mucho tiempo al diseño, pero puedes diseñar
lo que quieras. Entonces, lo primero que haré es cambiar
este diseño de restricción a un diseño relativo solo para
simplificar las cosas o también podemos usar un diseño lineal que es más fácil y usaré la
orientación que es vertical. Ahora crearé dos diseños más, así que
crearé dos diseños relativos y esto es para la sección superior
de nuestra hoja inferior, así que lamentaré no usar contenido envolvente, pero
definiré una altura, digamos 32dp o 64dp. Ahora definiré un fondo, digamos que
tenemos, puedes poner el código de color blanco y luego aquí puedes seleccionar el color que
quieras.

Entonces, seleccionemos este color para la parte superior y
luego crearé un diseño relativo más y esta
vez sería digamos 250dp y nuevamente cambiaré el color a algo como
esto, está bien. Entonces tenemos nuestra hoja inferior lista. También
cambiaré la altura principal para envolver contenido como este. Así que tenemos el diseño listo. Solo para la información que podemos definir para las
vistas de texto, es frente, por lo que lo haré centrar Inparent a verdadero y
el texto sería Encabezado de la hoja inferior y la apariencia que podemos cambiar a un título como este. Y de la misma manera, podemos poner una vista de texto en
la sección de contenido de nuestra hoja inferior y aquí escribiré el contenido de la hoja inferior
como este. Así que tenemos nuestra sábana bajera lista, en realidad
el diseño de la sábana bajera está listo. Ahora, cada vez que desee convertir un
diseño normal en la hoja inferior, debe definir tres propiedades
en caso de hoja inferior persistente. Entonces, lo primero que
debemos definir es convertir este archivo de diseño en una hoja inferior
y para hacer esto definiremos el comportamiento del diseño.

Así que aquí escribiremos una aplicación y luego
presionaremos Alt-Enter para importar la aplicación y luego escribiremos layout_behaviour. Y aquí necesitamos definir la
clase de comportamiento de la hoja inferior y
es con.google.android.material.bottomsheet y luego BottomSheetBehaviour. Ahora, mientras lo escribe, seguramente puede cometer un
error, así que para asegurarse de haber escrito
correctamente esta ruta de clase, puede ir a la documentación de diseño de materiales. Y aquí desde aquí, puede copiar esta cosa en
el comportamiento de la hoja inferior o puede copiar toda la línea de esta manera, cópiela y
luego puede pegarla en el diseño de su ruta de esta manera. Ahora estamos seguros de que es correcto y
no hemos cometido ningún error, por lo que la primera propiedad es el
comportamiento del diseño que debemos definir. La siguiente propiedad que debemos definir es,
nuevamente, tenemos los dos puntos de la aplicación , tenemos behavior_hideable y debemos hacer que
sea cierto, lo que significa que podemos ocultar nuestra hoja inferior. Ahora, otra cosa que debemos definir es
la altura máxima, por lo que definiremos la altura máxima y nuevamente es behavour_peakHeight así.

Y definiré la altura del pico
como esta altura para que tengamos 64 dp así. Ahora, después de definir estos valores, nuestra
hoja inferior está lista y ahora podemos usarla en nuestra actividad o
fragmento, pero para usar una hoja inferior persistente en su actividad o fragmento, necesita usar
un diseño de coordenadas. Así que cambiaremos este ConstraintLayout que
tenemos en nuestro acivity_main.xml a CoordinateLayout en realidad, es coordinadorlayout. Así que tenemos este diseño de coordinador y dentro de
este diseño, incluiremos nuestra hoja inferior. Así que eliminaré esta vista de texto y
usaré la etiqueta de inclusión para incluir nuestra hoja inferior. Así que tenemos diseño y @layout/my_persistent_bottom_sheet
y pueden ver que tenemos nuestra hoja inferior aquí que podemos deslizar hacia arriba o hacia abajo.

Déjame mostrarte ejecutando esta aplicación,
así que ejecútala. Así que puede ver que tenemos nuestra hoja inferior aquí
que podemos deslizar hacia arriba o hacia abajo. Así que funciona absolutamente bien. Ahora no podemos deslizarlo hacia arriba, así que lo que
podemos hacer es ocultarlo a falso y de esta manera no podemos ocultar nuestra hoja inferior. Déjame mostrarte para que podamos deslizarnos hacia arriba y
hacia abajo, pero no podemos ocultar la hoja inferior.

Así que está funcionando absolutamente bien. Así es como creamos una hoja inferior en
nuestra aplicación para mostrar más contenido al
usuario. Así que eso es todo por este video amigos. En el siguiente video, aprenderemos cómo podemos
acceder a esta hoja de nuestro código y cómo podemos rastrear el estado y controlar la
hoja inferior con nuestro programa. En caso de que tenga alguna pregunta o
confusión, puede dejar sus comentarios a continuación y nos vemos en el próximo video. Gracias a todos por verlo. Este es Belal Khan ahora despidiéndose..

Deja un comentario

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