Jetpack Compose

Vamos a entrar a fondo en la creación de Layouts en Compose. Qué componentes tenemos y cómo organizarlos para convertir los diseños en realidad.

• Columns, Rows, Boxes
• Qué son los Modifiers
• Primeros componentes básicos: 
• Text
• TextField
• Button
• IconButton
• Icon…

En interfaces declarativas, gestionar correctamente el estado es vital, pues de ese estado dependerá que las vistas se actualicen correctamente de forma automática.

Aquí aprenderemos varios conceptos imprescindibles sobre el estado:

• Cómo se actualiza la UI de Compose basada en el estado
• Cómo sobrevivir a las recomposiciones y los cambios de configuración
• Qué es Unidirectional Data Flow
• State hoisting
• Jerarquía de estados y cómo organizar el código
• State Holders
• ViewModels
• Compatibilidad con LiveData y StateFlow
• CompositionLocal y dependencias implícitas

Necesitamos componentes que no necesiten pintar de antemano todos los elementos, sino que se vayan cargando según necesiten mostrarse en pantalla. En Jetpack Compose tenemos varios layouts que sustituyen al RecyclerView:

• LazyRow
• LazyColumn
• LazyVerticalGrid

También veremos en este punto cómo cargar imágenes con Coil, así como otros componentes esenciales para crear UIs:

• ListItem
• DropDownMenu

Un componente que actúa como plantilla para posicionar otros componentes en la UI. Junto con el Scaffold, explicaremos cómo usar:

• TopAppBar
• BottomNavigation
• NavigationDrawer
• FloatingActionButton
• SnackBar

En ocasiones, necesitamos realizar acciones que se escapan del ciclo de recomposición de los composables.

Cualquier parte del código que no emita UI se considera un Side-Effect, y hay que tratarlo por separado.

En este módulo veremos cómo y cuándo usarlos:

• LaunchedEffect
• rememberCoroutineScope
• DisposableEffect
• SideEffect
• produceState
• derivedStateOf

Veremos cómo usar la librería Navigation en Jetpack Compose para navegar entre pantallas:

• Introducción a la librería Navigation-Compose
• Navigation en Compose
• Pasar argumentos de navegación
• Integración del ViewModel con la librería de navegación
• Cómo crear múltiples grafos de navegación

En el estilo tradicional, usábamos XMLs para diseñar los temas de las Apps. En Compose esto cambia mucho, y necesitamos reaprender cómo definirlos:

• Temas Material
• Colores
• Tipografías, y  cómo usar fuentes de terceros
• Formas
• Cómo definir estilos o temas genéricos para componentes

Vamos a entrar más a fondo en los distintos tipos de animaciones que se pueden realizar en Compose. Veremos cómo animar:

• Visibilidad
• Cambio de contenido
• Cambio de tamaño
• Un único valor
• Múltiples valores
• Animaciones infinitas

Compose está diseñado con el testing en mente. Aquí vamos a ver cuáles son las herramientas necesarias para crear tus primeros tests de UI en Compose:

• Introducción al testing con Compose
• Árboles semánticos
• Depuración de tests
• Uso de testTag
• Primer test de UI
• Test sobre un componente aislado
• Test sobre varios componentes
• Tests para elementos con scroll
• Tests de navegación

Aunque lo ideal es empezar proyectos donde solo utilicemos Jetpack Compose como sistema de UI, la realidad es que en la mayoría de las situaciones nos encontraremos con proyectos que ya usan vistas en XML y queremos empezar a usar Compose.

Aquí veremos cómo interoperan ambos sistemas de vistas:

• Cómo crear una activity o fragment completos usando Jetpack Compose
• Cómo integrar Compose en una vista clásica
• Cómo cargar un componente de Jetpack Compose en una vista clásica
• Usar el tema XML en Compose
• Cargar una vista en XML en Jetpack Compose