Crea un flujo y un ritmo flexibles con métodos de estructura y contención para tu contenido.
1. Estructura base
Para comenzar a crear una estructura sólida con parámetros de seguridad coherentes, agrega márgenes y columnas a tus diseños.
Los márgenes proporcionan espaciado en los bordes izquierdo y derecho de la pantalla y el contenido. Un valor de margen estándar para el tamaño compacto es de 16 dp, pero los márgenes deben adaptarse para admitir pantallas más grandes. El contenido y las acciones del cuerpo de tu app deben permanecer dentro de estos márgenes y alinearse con ellos.
También puedes garantizar las zonas seguras de inserción o las inserciones en este paso. Las inserciones de la barra del sistema evitan que las acciones cruciales queden debajo de las barras del sistema. Consulta Cómo dibujar tu contenido detrás de las barras del sistema para obtener más detalles.
Usa columnas para crear una estructura de cuadrícula flexible que permita una alineación coherente y para proporcionar una definición vertical a un diseño dividiendo el contenido dentro del área del cuerpo. El contenido se coloca en las áreas de la pantalla que contienen columnas. Estas columnas le dan estructura a tu diseño, lo que proporciona una estructura conveniente para organizar los elementos.
Usa una cuadrícula de columnas para alinear el contenido con una cuadrícula subyacente, pero conserva el tamaño flexible. La cuadrícula de columnas puede adaptarse a diferentes factores de forma cambiando el tamaño y la cantidad de columnas según sea necesario para el tamaño de la pantalla en ciertos puntos, a la vez que permite que el contenido también se escale. Evita ser demasiado detallado con la cuadrícula de columnas, ya que para eso está la cuadrícula base: proporcionar unidades de espaciado coherentes.
Ten cuidado al establecer una cuadrícula de filas acompañante, ya que puede restringir el ajuste horizontal del contenido en diferentes orientaciones y factores de forma. Por lo general, establecer reglas de padding proporcionará la coherencia visual necesaria.
Comienza a agregar texto a la estructura del diseño. Los márgenes protegen el contenido de los bordes de la pantalla. Las columnas proporcionan una estructura de alineación y espaciado coherente.
2. Aplica la contención
Usa la contención para agrupar visualmente los elementos.
La contención se refiere al uso conjunto de espacios en blanco y elementos visibles para crear un agrupamiento visual. Un contenedor es una forma que representa un área cerrada. En un solo diseño, puedes agrupar elementos que comparten contenido o funcionalidad similares y separarlos de otros elementos con espacio abierto, tipografía y divisores.
Puedes agrupar elementos similares con espacio en blanco o una división visible para ayudar a guiar al usuario por el contenido.
La contención implícita usa el espacio en blanco para agrupar visualmente el contenido y crear límites de contenedor, mientras que la contención explícita usa objetos, como líneas divisorias y tarjetas, para agrupar el contenido.
En la siguiente figura, se muestra un ejemplo del uso de la contención implícita para contener el encabezado y el texto principal. La cuadrícula de columnas se usa para alinear y crear agrupaciones. Los momentos destacados se incluyen de forma explícita en las tarjetas. Usar iconografía y jerarquía de escritura para una mayor separación visual
3. Posiciona el contenido
Android tiene varias formas de controlar los elementos de contenido en sus respectivos contenedores que pueden ayudar a posicionarlos de manera adecuada, incluidas la gravedad, el espaciado y el ajuste de escala.
Gravity es un estándar para colocar un objeto dentro de un contenedor potencialmente más grande para casos de uso específicos. En la siguiente figura, se muestran ejemplos de objetos de posicionamiento que comienzan y se centran (1), se centran en la parte superior y horizontalmente (2), se ubican en la parte inferior izquierda (3) y se ubican en el extremo y a la derecha (1).
4. Cómo ajustar la escala del contenido
El ajuste de escala es fundamental para adaptarse al contenido dinámico, la orientación del dispositivo y los tamaños de pantalla. Los elementos pueden permanecer fijos o escalarse.
Es importante tener en cuenta cómo se muestran las imágenes dentro de sus contenedores con el ajuste de escala y la posición para garantizar que aparezcan como deseas, independientemente del contexto del dispositivo. De lo contrario, el enfoque principal de la imagen podría aparecer cortado, las imágenes podrían ser demasiado pequeñas o grandes para el diseño, o podrían producirse otros efectos no deseados.
El contenido que no está anotado puede aparecer de forma diferente a la que esperas o deseas.
Contenido fijado
Muchos elementos tienen interacciones, desplazamiento y posicionamiento integrados con ranuras o estructuras. Algunos elementos se pueden modificar para que permanezcan fijos en lugar de reaccionar al desplazamiento, por ejemplo, los botones de acción flotantes (BAF) que contienen acciones críticas.
Alineación
Usa AlignmentLine para crear líneas de alineación personalizadas que los diseños de nivel superior pueden usar para alinear y posicionar sus elementos secundarios.
Qué debes hacer
Qué no debes hacer
Diseño del componente
Los componentes de Material 3 proporcionan sus propias configuraciones y estados para la interacción y el contenido.
Compose proporciona diseños convenientes para combinar componentes de Material en patrones de pantalla comunes. Los elementos componibles, como Scaffold, proporcionan espacios para varios componentes y otros elementos de pantalla. Obtén más información sobre los componentes y el diseño de Material.