Jetpack Compose est interopérable avec les vues. Vous pouvez utiliser Compose dans les vues et les vues dans Compose. Cela permet d'adopter Compose dans les applications existantes basées sur les vues sans avoir à migrer toutes les vues immédiatement.
Procédure de migration
- Créez un plan : élaborez un plan solide et détaillé pour effectuer la migration. Nous vous recommandons de créer un backlog de tâches de migration par ordre de priorité.
- Identifiez le candidat XML pour la migration : identifiez les plus petits composants qui sont des nœuds feuilles dans la hiérarchie et commencez par ceux-ci. Développez ensuite le plan de migration de bas en haut, en passant progressivement aux composants de niveau supérieur dans la hiérarchie. Les bons candidats pour la migration initiale sont les composants petits, sans état et ayant moins de dépendances.
- Analysez la hiérarchie : une fois que vous avez identifié la vue XML à migrer, analysez sa structure et son implémentation de mise en page XML.
- Capturez l'état initial : exécutez un test de capture d'écran pour capturer l'état initial de la vue XML sélectionnée.
- Prérequis : Configurer les dépendances Compose Identifiez si le projet a configuré les dépendances et le compilateur Compose. Si ce n'est pas le cas, suivez Configurer les dépendances et le compilateur Compose.
- Prérequis : Configurer le thème Compose Déterminez si le thème Compose est déjà configuré dans le projet. Si ce n'est pas le cas, suivez la procédure de création de thèmes Compose. Conservez la thématisation XML d'origine pendant que l'application est interopérable. Migrez le thème XML vers Compose pour comprendre les modèles d'état et jusqu'à ce que le projet soit entièrement migré vers Compose.
- Migrer la vue XML vers Compose : commencez la conversion du code XML vers Compose, appliquez le thème approprié et ajoutez des aperçus Compose pour les composables migrés. Pour les scénarios de migration courants, consultez les ressources supplémentaires. Par exemple, pour migrer vers les API Lazy dans Compose, suivez les étapes décrites dans Migrer RecyclerView vers Compose.
- Remplacer les utilisations : remplacez les utilisations précédentes de la vue XML pour utiliser le nouveau composant Compose. Pour ajouter Compose dans Views, suivez les étapes décrites dans Compose dans Views. Pour ajouter des vues dans Compose, suivez les étapes décrites dans Vues dans Compose.
- Validez la migration : vérifiez que l'état initial capturé dans le test de capture d'écran est identique à l'aperçu Compose du composable migré. Si elles ne correspondent pas, itérez sur la nouvelle UI composable et améliorez-la pour l'aligner sur l'état initial. Créez des tests d'interface utilisateur Compose pour le nouveau composable.
- Suppression du code XML : une fois que le composable nouvellement migré correspond à l'interface utilisateur XML initiale, supprimez le code de vue XML obsolète et ses tests.
Scénarios de migration courants
Vérifiez que les extensions dp et sp sont utilisées (16.dp, 20.sp) dans les composables.
Si tools:text est présent dans la vue XML, utilisez-le dans un composable @Preview distinct.
Conversion d'un attribut en modificateur
La plupart des attributs XML font partie de la chaîne modifier ou des paramètres de la fonction composable.
| Attribut XML | Équivalent Compose |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(Comportement par défaut, généralement aucun modificateur n'est nécessaire) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (marge extérieure) |
android:gravity="center" |
contentAlignment = Alignment.Center (case) ou horizontalAlignment / verticalArrangement (colonne/ligne) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
Encapsuler dans le bloc if (visible) { ... } |
Migrer les styles (styles.xml)
Les styles XML combinent souvent plusieurs attributs pour créer un style. Dans Compose, cela se fait en créant une variante composable avec un style spécifique.
Fournissez des fonctions @Composable distinctes nommées en fonction du style et du composant de base, pour indiquer la différence de style et les cas d'utilisation de ces composants.
- Modèle : Si un élément XML utilise un style personnalisé (par exemple,
style="@style/MyPrimaryButton"), ne tentez pas de reproduire le style en ligne. À la place, suggérez de créer un composable spécifique. - Exemple :
- XML :
<Button style="@style/MyPrimaryButton" ... /> - Nouveau message :
MyPrimaryButton(onClick = { ... })
- XML :
- Groupes d'attributs courants : si un style définit des modificateurs courants (comme la marge intérieure et la hauteur), extrayez-les dans une propriété d'extension lisible ou une variable Modifier partagée.