Stratégie de migration

Si l'interface utilisateur de votre application est basée sur les vues, vous préférerez peut-être la réécrire par étape plutôt qu'en une seule fois. Cette page vous aidera à ajouter de nouveaux éléments Compose à votre UI existante.

L'interopérabilité avec les vues a été conçue dès le départ dans Jetpack Compose. Cette fonctionnalité vous permet de migrer votre application existante basée sur des vues vers Compose tout en continuant à développer de nouvelles fonctionnalités. Pour migrer vers Compose, nous vous recommandons une migration incrémentielle durant laquelle Compose et les vues coexistent dans votre codebase jusqu'à ce que votre application soit entièrement dans Compose.

**Figure 1**. Étapes de la migration d'une application basée sur les vues vers Compose

Pour migrer votre application vers Compose, procédez comme suit :

Créez de nouvelles fonctionnalités avec Compose.
Lorsque vous créez des fonctionnalités, identifiez les éléments réutilisables et commencez à créer une bibliothèque de composants d'interface utilisateur courants.
Remplacez les fonctionnalités existantes un écran à la fois.

Créer de nouvelles fonctionnalités avec Compose

L'utilisation de Compose pour créer de nouvelles fonctionnalités est le meilleur moyen de favoriser votre adoption de Compose. Cette stratégie vous permet d'ajouter des fonctionnalités et de profiter des avantages de Compose, tout en continuant à répondre aux besoins de votre entreprise.

Nouveaux écrans

**Figure 2**. Nouvel écran créé dans Compose

Lorsque vous utilisez Compose pour créer de nouvelles fonctionnalités dans votre application existante, vous continuez à travailler dans les limites de l'architecture de votre application. Si vous utilisez des fragments et le composant Navigation, et que la fonctionnalité que vous êtes en train de concevoir couvre un écran entier, vous devez créer un fragment, mais son contenu se trouvera dans Compose.

Pour utiliser Compose dans un fragment, renvoyez un ComposeView dans la méthode de cycle de vie onCreateView() de votre fragment. ComposeView dispose d'une méthode setContent() dans laquelle vous pouvez fournir une fonction modulable.

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}MigrationStrategySnippets.kt

Pour en savoir plus, consultez la section ComposeView dans les fragments.

Écrans existants

**Figure 3**. Écran existant avec à la fois des vues et Compose

Si votre nouvelle fonctionnalité doit faire partie d'un écran existant, vous pouvez ajouter ComposeView à la hiérarchie de l'interface utilisateur, comme n'importe quelle autre vue.

Par exemple, supposons que vous souhaitiez ajouter une vue enfant à un LinearLayout. Vous pouvez le faire en XML comme suit :

<LinearLayout ...>

  <Button ... />

  <TextView ... />

  <androidx.compose.ui.platform.ComposeView
    android:id="@+id/compose_view" ... />

</LinearLayout>

Une fois la vue gonflée, vous pouvez ensuite référencer ComposeView dans la hiérarchie et appeler setContent().

Pour en savoir plus sur ComposeView, consultez la page sur les API d'interopérabilité.

Créer une bibliothèque de composants d'interface utilisateur courants

Lorsque vous créez des fonctionnalités avec Compose, vous vous apercevez rapidement que vous créez aussi une bibliothèque de composants. La création d'une bibliothèque de composants d'interface utilisateur courants vous permet de disposer d'une source unique et fiable pour ces composants dans votre application et d'encourager leur réutilisation. Les fonctionnalités que vous créez peuvent ensuite dépendre de cette bibliothèque. Cette technique est particulièrement utile si vous créez un système de conception personnalisé dans Compose.

Selon la taille de votre application, cette bibliothèque peut prendre la forme d'un package, d'un module ou d'un module de bibliothèque distinct. Pour plus d'informations sur l'organisation des modules dans votre application, consultez le guide de modularisation des applications Android.

Remplacer des fonctionnalités existantes avec Compose

En plus d'utiliser Compose afin de créer de nouvelles fonctionnalités, vous pouvez migrer progressivement les fonctionnalités existantes de votre application pour bénéficier des avantages de Compose.

Si votre application est exclusivement dans Compose, vous pouvez accélérer le développement, et également réduire la taille de l'APK et les durées de compilation de votre application. Pour en savoir plus, consultez la page Ergonomie du développeur dans Compose.

Écrans simples

Lorsque vous migrez des fonctionnalités existantes vers Compose, vous devez d'abord vous occuper des écrans simples. Il peut s'agir d'un écran de bienvenue, d'un écran de confirmation ou d'un écran de paramétrage dans lesquels les données affichées dans l'interface utilisateur sont relativement statiques.

Prenons le fichier XML suivant :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

 <TextView
   android:id="@+id/title_text"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/title"
     android:textAppearance="?attr/textAppearanceHeadline2" />

 <TextView
     android:id="@+id/subtitle_text"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="@string/subtitle"
     android:textAppearance="?attr/textAppearanceHeadline6" />

 <TextView
     android:id="@+id/body_text"
     android:layout_width="wrap_content"
     android:layout_height="0dp"
     android:layout_weight="1"
     android:text="@string/body"
     android:textAppearance="?attr/textAppearanceBody1" />

 <Button
     android:id="@+id/confirm_button"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:text="@string/confirm"/>

</LinearLayout>

Le fichier XML peut être réécrit dans Compose en quelques lignes :

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}MigrationStrategySnippets.kt

Écrans mixtes vues et Compose

Un écran qui contient déjà un peu de code Compose est un autre candidat idéal pour une migration complète vers Compose. Selon la complexité de l'écran, vous pouvez le migrer vers Compose en une seule fois ou procéder progressivement. Si l'écran commence par Compose dans une sous-arborescence de la hiérarchie de l'UI, vous continuez de migrer les éléments de l'interface utilisateur jusqu'à ce que l'intégralité de l'écran se trouve dans Compose. Cette approche est également appelée approche ascendante.

**Figure 4**. Approche ascendante de la migration d'une interface mixte vues et Compose vers Compose

Suppression de fragments et composant Navigation

Une fois que toutes les interfaces utilisateur de votre application sont dans Compose, l'utilisation de fragments dans votre application devient inutile. Vous pouvez alors supprimer entièrement les fragments et les remplacer par des composables au niveau de l'écran pilotés par la navigation dans Compose.

Pour en savoir plus, consultez la page Naviguer avec Compose.

Étapes suivantes

Si vous souhaitez découvrir directement comment ajouter Compose à votre application, consultez la page Ajouter Jetpack Compose à votre application. Vous pouvez également consulter les ressources suivantes :

Atelier de programmation
- Effectuer une migration vers Jetpack Compose : Découvrez comment migrer des éléments de l'application exemple Sunflower vers Compose dans cet atelier de programmation.
Exemple
- Sunflower : Examinez le code de l'application exemple Sunflower, qui contient à la fois du code de vues et du code Compose.
Article de blog
- Interopérabilité Jetpack Compose : Utiliser Compose dans un RecyclerView : Découvrez comment utiliser efficacement Compose dans un RecyclerView.