Interfaz de usuario adaptable con Jetpack Compose | Udit Verma

Foto de Daniel Romero en Unsplash Android ha impulsado una variedad de dispositivos con todo tipo de tamaños de pantalla. Desde pantallas compactas de 4″ hasta tabletas con pantallas de más de 12″, y ahora tenemos computadoras de escritorio plegables y completas que pueden ejecutar aplicaciones de Android. Por lo tanto, es más importante que nunca que las aplicaciones se sientan como en casa y se vean hermosas en todos estos diferentes tamaños de pantalla. Es igualmente importante hacer un buen uso del espacio de pantalla adicional cuando esté disponible, para que los usuarios puedan hacer y ver más donde tenga sentido. Afortunadamente, Jetpack Compose viene con un conjunto de herramientas para facilitar a los desarrolladores la creación de esas interfaces de usuario hermosas y receptivas que se adaptan a cualquier tamaño de pantalla. En esta publicación de blog, veremos las herramientas más importantes y de uso común.

Cambios de nivel de pantalla

En esta sección veremos cómo adaptar la interfaz de nuestra pantalla a diferentes factores de forma. Los elementos componibles a nivel de pantalla o raíz son componentes que ocupan toda la pantalla y están formados por varios componentes más pequeños. Por ejemplo, en un dispositivo más pequeño, queremos mostrar solo la lista de elementos y solo mostrar la pantalla de detalles cuando el usuario selecciona un elemento (interfaz de usuario compacta). Por otro lado, en un dispositivo de pantalla grande, podríamos mostrar ambos uno al lado del otro (interfaz de usuario extendida).Por lo tanto, hemos decidido mostrar u ocultar ciertos componentes de la interfaz de usuario según el dispositivo o el tamaño de la pantalla. Esto constituye el primer peldaño para nuestra aplicación de interfaz de usuario receptiva. Hay varias maneras de lograr esto. Podríamos consultar el ancho y alto del dispositivo y luego hacer algunos cálculos. Por ejemplo, si el ancho supera los 600 píxeles, elegiríamos ExpandedUI, y para cualquier valor inferior a 600 píxeles, nos quedaremos con CompactUI. Aunque el método mencionado anteriormente es completamente posible, deja algunos problemas importantes para que los desarrolladores se encarguen. Por ejemplo, el número mágico 600: se podría argumentar por qué 600 y no 500 o 700 píxeles sirven como punto de ruptura. Otros grandes problemas con este método son que un dispositivo puede tener varias pantallas (plegables) o que su aplicación no ocupa toda la pantalla (ventana múltiple). En este caso, solo debes considerar el espacio asignado a tu aplicación y, para facilitar el proceso de toma de decisiones, Android ha introducido Clases de tamaño de ventana. Estos son puntos de interrupción predefinidos que tienen en cuenta la orientación y el espacio en pantalla disponible para su aplicación, en función de los cuales puede dibujar diferentes IU. Clasifica el área de visualización enTanto la altura como el ancho del dispositivo tienen asignada una categoría que se puede utilizar para representar la interfaz de usuario más adecuada. Volviendo a nuestro ejemplo, podríamos optar por renderizar CompactUI en dispositivos de ancho compacto, mientras que ExpandedUI tendría más sentido para Medium y Expanded

Cambios de nivel de componente

Ahora que se han tomado decisiones a nivel de pantalla, podemos echar un vistazo más de cerca a los componibles no root y ver cómo se pueden adaptar a diferentes tamaños de pantalla. Según el espacio disponible, debería poder tomar una decisión.

• Qué datos deben mostrarse
• Cómo estructurar estos datos

Si podemos resolver las dos cuestiones anteriores, podemos asegurarnos de que nuestro componible pueda colocarse en cualquier lugar de la pantalla y adaptarse de forma óptima al renderizado. ¡Integrar la personalización en elementos componibles individuales también garantiza que cuando se utilizan para crear estructuras de interfaz de usuario complejas, cada componente puede ocuparse de sí mismo para crear siempre la interfaz de usuario más significativa y personalizable en su conjunto! Veamos qué herramientas podemos usar para responder las dos preguntas anteriores.

Qué datos deben mostrarse

Dependiendo del espacio disponible, puede tener sentido ocultar o mostrar algunos campos. Por ejemplo, solo muestre la imagen de perfil si hay suficiente espacio, de lo contrario, solo muestre el nombre de usuario.Para tales casos podemos usar BoxWithConstraints Composable. Como su nombre indica, se asemeja a una caja componible pero ofrece las dimensiones disponibles dentro de su alcance. Le brinda la altura y el ancho mínimos y máximos disponibles, en función de los cuales puede tomar decisiones para mostrar u ocultar componentes específicos. Esta es una herramienta poderosa que resulta útil para tomar decisiones en función del espacio disponible, pero debe usarse con precaución. BoxWithConstraints aplaza la composición a la etapa de diseño porque necesita conocer sus dimensiones antes de poder comenzar a componer. Básicamente, esto significa más trabajo en la fase de diseño. Si quieres saber más sobre las diferentes fases de un componible, puedes leer aquí.

Cómo estructurar los datos.

Ahora que hemos descubierto qué datos mostrar en un área determinada, lo siguiente que debemos averiguar es cómo estructurar u organizar los datos para aprovechar al máximo el espacio disponible. Por ejemplo, podemos usar el ancho disponible para decidir cuántos niños colocar en una fila determinada antes de pasar a la fila siguiente. Componer niños es el trabajo de un diseño componible. Fila y Columna son los dos diseños más utilizados, colocando a sus hijos horizontal y verticalmente, respectivamente. Echemos un vistazo a algunos de los otros diseños que son más personalizables.CajaConRestricciones:Podemos usar BoxWithConstraints no solo para mostrar u ocultar componentes, sino también para decidir cómo mostrarlos dado un conjunto de restricciones. Por ejemplo, si el ancho disponible es limitado, podemos representar los elementos en una columna; de lo contrario, podemos usar una fila para representarlos uno al lado del otro.Fila de flujo y Columna de flujo:Para aprovechar al máximo el espacio disponible, dos diseños pueden ser útiles: FlowRow y FlowColumn. FlowRow, por ejemplo, coloca a sus hijos en una fila hasta que haya espacio disponible. Una vez que se ocupa todo el espacio horizontal, el siguiente niño se mueve a una nueva fila. Por lo tanto, un dispositivo de pantalla grande puede tener 4 elementos seguidos, mientras que un dispositivo pequeño puede tener solo 2 elementos seguidos y el resto de la interfaz de usuario fluirá a la siguiente fila. FlowColumn funciona de manera similar, colocando a sus hijos verticalmente hasta que haya espacio disponible y luego moviéndose a una nueva columna.Estos diseños fluidos ayudan a que su interfaz de usuario se adapte a cualquier espacio sin que el desarrollador tenga que preocuparse por lo esencial.4 elementos caben en un dispositivo pequeño mientras que 11 elementos caben en un dispositivo grandeLazyGrid:LazyGrid es otro diseño listo para usar que puede adaptarse a cualquier espacio. Como sugiere el nombre, coloca a sus hijos en una cuadrícula verticalmente (LazyVerticalGrid) u horizontalmente (LazyHorizontalGrid). A los efectos de este ejemplo, nos centraremos en LazyVerticalGrid, pero LazyHorizontalGrid funciona de manera similar. LazyVerticalGrid obtiene su naturaleza adaptativa de la columna param, que tiene parámetros de tipo GridCells aceptado. GridCells puede ser básicamente de dos tipos:

• Firmemente — Esto establece el número de columnas en un número específico. El espacio horizontal disponible se divide luego en estas muchas columnas. Entonces, por ejemplo, si el ancho disponible es de 100 dp y tenemos un recuento de columnas de 4, cada columna tendrá 25 dp. Si el ancho disponible fuera de 200 dp, cada columna sería de 50 dp.

Cada fila tiene 4 elementos (fijos) – diferentes anchos

• Adaptado — Esto establece el minWidth para una columna. Con este tipo de GridCells podemos asegurarnos de que cada columna obtenga el ancho mínimo y luego el número de columnas se determina en función de cuántas columnas caben. Por ejemplo, si cada columna necesita ser de 120 dp y el ancho disponible es de 400 dp, tendríamos 3 columnas, mientras que en un dispositivo con 700 dp de espacio disponible tendríamos 5 columnas. A continuación, el espacio restante se divide por igual entre todas las columnas.

El dispositivo pequeño tiene 3 elementos, el grande tiene 5 elementos por filaDiseños personalizados:Si estos diseños listos para usar no sirven para su propósito, siempre podemos crear un nuevo diseño usando Layout Composable. Al crear un nuevo diseño componible, podemos decidir cómo colocar mejor a los niños y aprovechar al máximo el espacio disponible. Cómo crear un diseño personalizado requiere su propia publicación de blog, pero esta documentación es un buen lugar para comenzar. Con eso, hemos cubierto algunas de las formas más comunes de crear interfaces de usuario adaptables y con capacidad de respuesta que están diseñadas para verse bien en todos los factores de forma. Deja un aplauso antes de comenzar a crear hermosas aplicaciones de Android nuevamente 🙂