Si te estás lanzando al mundo de Jetpack Compose, seguro que te habrás dado cuenta de que montar una pantalla desde cero puede ser un poco tedioso si quieres que siga los estándares de Android. Aquí es donde entra en juego Scaffold, un layout comodín que nos facilita la vida al proporcionarnos una estructura ya predefinida para los elementos más típicos de una aplicación.
Básicamente, piensa en el Scaffold como un armazón con «huecos» o slots específicos donde puedes encajar la barra superior, el menú lateral o el botón flotante sin tener que pelearte con las coordenadas o el posicionamiento manual. Es la herramienta definitiva para que tu app tenga aspecto profesional y siga el Material Design sin romperte la cabeza.
Configuración previa de la Activity
Antes de meterle mano al código de Compose, hay un detalle técnico que no podemos pasar por alto. Por defecto, muchas actividades de Android intentan mostrar una barra de acciones clásica. Para que nuestro Scaffold tome el control total, debemos eliminar la ActionBar del tema en el archivo Manifest. Lo ideal es asignar a la Activity el tema NoActionBar, asegurando así que no tengamos dos barras superiores peleándose por el mismo espacio en la pantalla, entendiendo bien el ciclo de vida de las Activity.
Desglosando los elementos del Scaffold
El Scaffold no es un elemento visual en sí mismo, sino un organizador. Sus parámetros principales son los que definen la arquitectura de la pantalla:
- topBar: Aquí es donde colocamos la barra de navegación superior. Lo más habitual es usar una TopAppBar para mostrar el título de la sección y botones de acción.
- bottomBar: Reservada para la parte inferior. Es el sitio perfecto para una BottomAppBar o BottomNavigation, permitiendo al usuario saltar entre las secciones principales de la app.
- floatingActionButton (FAB): Ese botón circular que flota sobre el contenido y sirve para la acción principal de la pantalla.
- snackbarHost: Un espacio dedicado para lanzar esos avisos temporales (Snackbars) que aparecen abajo sin tapar la navegación.
- drawer: Permite implementar el menú lateral desplegable, muy útil para aplicaciones con muchas categorías o perfiles de usuario.
Dominando la TopAppBar y sus Slot APIs
La barra superior es probablemente el elemento que más vamos a tocar. Gracias al concepto de Slot API, Compose no nos obliga a usar un texto simple para el título; podemos meter ahí lo que nos dé la gana. Por ejemplo, si queremos poner un icono junto al nombre de la app, simplemente envolvemos ambos elementos en una Row dentro del parámetro title, aplicando un estilizado avanzado de texto si es necesario.
Para darle funcionalidad, contamos con el navigationIcon, donde lo más recomendable es colocar un IconButton con una flecha de retroceso. Asimismo, el parámetro actions nos permite añadir una fila de botones a la derecha, ideales para implementar funciones de búsqueda o compartir contenido, manteniendo siempre la coherencia visual.
El manejo crítico del contenido y los PaddingValues
Un error muy común cuando se empieza es ignorar el parámetro de padding que nos devuelve el Scaffold. Cuando definimos el contenido principal, el Scaffold nos entrega unos PaddingValues calculados automáticamente basándose en los elementos que hayamos añadido (como la TopBar o la BottomBar).
Es vital aplicar este padding al Composable raíz de nuestro contenido mediante el uso de modificadores personalizados o estándar. Si no lo hacemos, es muy probable que la barra superior o la inferior tapen una parte de nuestra lista o de los textos, creando una experiencia de usuario bastante pobre. La forma correcta es pasar este modificador al componente interno, por ejemplo, usando Modifier.padding(padding) en el contenedor principal.
Estrategias de navegación y Scaffold
Cuando trabajamos con Compose Navigation y rutas tipadas, surge la duda de si poner un único Scaffold global o uno diferente por cada pantalla. Si necesitas que la visibilidad del FAB o el título de la TopBar cambien dinámicamente según la ruta, tienes dos opciones: crear Scaffolds independientes en cada destino para un control total, o gestionar un estado global que actualice los componentes del Scaffold común mediante la navegación.
Tener la estructura bien organizada mediante el uso de estos componentes permite que la aplicación sea escalable y fácil de mantener, asegurando que la interfaz de usuario sea intuitiva y cumpla con todas las expectativas de navegación de Android, optimizando el flujo de trabajo del desarrollador al no tener que programar la disposición de los elementos desde cero.
Continúar leyendo...