Jetpack Compose admite la interoperabilidad con Views: puedes usar Compose en Views y Views en Compose. Esto permite adoptar Compose en apps existentes basadas en View sin tener que migrar todas las Views de inmediato.
Pasos de la migración
- Crea un plan: Crea un plan sólido y paso a paso para realizar la migración. Te recomendamos que priorices las tareas pendientes de migración.
- Identifica el candidato XML para la migración : Identifica y comienza con los componentes más pequeños que son nodos hoja en la jerarquía, y expande el plan de migración de abajo hacia arriba hasta los componentes progresivamente más altos en la jerarquía. Los buenos candidatos para la migración inicial son pequeños, sin estado y tienen menos dependencias.
- Analiza la jerarquía: Una vez que identifiques la vista XML que deseas migrar, analiza su estructura de diseño y su implementación en XML.
- Captura el estado inicial: Ejecuta una prueba de captura de pantalla para capturar el estado inicial de la vista XML seleccionada.
- Requisito previo: Configura las dependencias de Compose. Identifica si el proyecto tiene configuradas las dependencias de Compose y el compilador. Si no es así, sigue los pasos en Configura las dependencias y el compilador de Compose.
- Requisito previo: Configura el tema de Compose. Identifica si el proyecto ya tiene configurado el tema de Compose. Si no es así, sigue la composición de temas. Conserva el tema XML original mientras la app es interoperable. Migra el tema XML a Compose para comprender los patrones de cómo declarar y hasta que el proyecto se migre por completo a Compose.
- Migra la vista XML a Compose: Comienza la conversión del código XML a Compose, aplica el tema adecuado y agrega vistas previas de Compose para los elementos componibles migrados. Para situaciones de migración comunes, consulta los recursos adicionales. Por ejemplo, para migrar a las APIs de Lazy en Compose, sigue los pasos que se indican en Migra RecyclerView a Compose.
- Reemplaza los usos: Reemplaza los usos anteriores de la vista XML para usar el nuevo componente de Compose. Para agregar Compose en Views, sigue los pasos que se indican en Compose in Views. Para agregar Views en Compose, sigue los pasos que se indican en Views in Compose.
- Valida la migración: Verifica que el estado inicial capturado en la prueba de captura de pantalla sea el mismo que el de la vista previa de Compose del elemento componible migrado. Si no coinciden, itera en la nueva IU componible y mejórala para que se alinee con el estado inicial. Crea pruebas de IU de Compose nuevas para el nuevo elemento componible.
- Eliminación de XML: Una vez que el elemento componible recién migrado coincida con la IU de XML inicial, quita el código de XML View obsoleto y sus pruebas.
Situaciones comunes de migración
Verifica que se usen las extensiones dp y sp (16.dp, 20.sp) en los elementos componibles.
Si tools:text está presente en la vista XML, úsalo en un elemento @Preview que admite composición independiente.
Atributo de conversión de modificador
La mayoría de los atributos XML pasan a formar parte de la cadena modifier o de los parámetros de la función componible.
| Atributo XML | Equivalente de Compose |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(Comportamiento predeterminado, por lo general, no se necesita un modificador) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (relleno exterior) |
android:gravity="center" |
contentAlignment = Alignment.Center (Box) o horizontalAlignment / verticalArrangement (Column/Row) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
Encapsula en el bloque if (visible) { ... } |
Migra estilos (styles.xml)
Los estilos XML suelen combinar varios atributos para crear un estilo. En Compose, esto se hace creando una variación componible con un estilo específico.
Proporciona funciones @Composable separadas con nombres según el diseño y el componente base para indicar la diferencia en el diseño y los casos de uso de esos componentes.
- Patrón: Si un elemento XML usa un diseño personalizado (p.ej.,
style="@style/MyPrimaryButton"), no intentes replicar el estilo intercalado. En su lugar, sugiere crear un elemento componible específico. - Ejemplo:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - Redactar:
MyPrimaryButton(onClick = { ... })
- XML:
- Grupos de atributos comunes: Si un diseño establece modificadores comunes (como padding y altura), extráelos en una propiedad de extensión legible o en una variable de Modifier compartida.