Cette page a été traduite par l'API Cloud Translation.

Migrer la navigation Jetpack vers Navigation Compose
Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

L'API Navigation Compose vous permet de naviguer entre les composables dans une application Compose, tout en profitant du composant, de l'infrastructure et des fonctionnalités de Navigation Jetpack.

Cette page décrit comment passer d'une navigation Jetpack basée sur des fragments à Navigation Compose, dans le cadre de la migration plus large de l'UI basée sur les vues vers Jetpack Compose.

Conditions préalables à la migration

Vous pourrez migrer vers Navigation Compose une fois que vous pourrez remplacer tous vos Fragments avec les composables d'écran correspondants Les composables d'écran peuvent contenir un mélange de contenu Compose et de vues, mais toutes les destinations de navigation doivent être des composables pour permettre la migration de Compose Navigation. En attendant, vous devriez continuez à utiliser le composant Navigation basée sur des fragments dans votre vue d'interopérabilité et Codebase Compose. Pour en savoir plus, consultez la documentation sur l'interopérabilité de la navigation. des informations.

L'utilisation de Navigation Compose dans une application réservée à Compose n'est pas une condition préalable. Vous pouvez continuer à utiliser le composant Navigation basé sur des fragments, à condition de conserver les fragments pour héberger votre contenu composable.

Procédure de migration

si vous suivez notre stratégie de migration recommandée ou si vous suivez une autre approche, vous atteindrez un point où toutes les destinations de navigation des composables d'écran, les fragments n'agissant que comme des conteneurs composables. À ce stade, vous pouvez migrer vers Navigation Compose.

Si votre application suit déjà un modèle de conception défini par l'utilisateur et notre guide sur , la migration vers Jetpack Compose et Navigation Compose ne devrait pas nécessitent des refactorisations majeures des autres couches de votre application, en dehors de la couche d'UI.

Pour migrer vers Navigation Compose, procédez comme suit :

Ajoutez la dépendance Compose Navigation à votre application.

Créez un composable App-level et ajoutez-le à votre Activity en tant que Point d'entrée de Compose, qui remplace la configuration de la mise en page Vue:

class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
        setContent {
            SampleApp(/* ... */)
        }
    }
}MigrationCommonScenariosSnippets.kt

Créez des types pour chaque destination de navigation. Utilisez un data object pour les destinations qui ne nécessitent aucune donnée, et data class ou class pour les destinations qui en nécessitent.
```
@Serializable data object First
@Serializable data class Second(val id: String)
@Serializable data object Third
MigrationCommonScenariosSnippets.kt
```
Configurez le NavController à un endroit où tous les composables qui doivent le référencer peuvent y accéder (généralement dans votre composable App). Cette approche suit les principes du hissage d'état. et vous permet d'utiliser NavController comme source de référence pour Naviguer entre les écrans composables et maintenir la pile "Retour" :
```
@Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}MigrationCommonScenariosSnippets.kt
```

Créez le NavHost de votre application dans le composable App et transmettez la navController:

@Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Ajoutez les destinations composable pour créer votre graphique de navigation. Si chaque écran a déjà été migré vers Compose, cette étape ne consiste qu'à extraire ces composables d'écran de vos fragments vers les destinations composable :

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                // FirstScreen(...) EXTRACT FROM HERE
            }
        }
    }
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(/* ... */) // EXTRACT TO HERE
        }
        composable<Second> {
            SecondScreen(/* ... */)
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Si vous avez suivi les instructions sur la conception de l'architecture de votre interface utilisateur Compose, en particulier la manière dont les ViewModel et les événements de navigation doivent être transmis à l'étape suivante consiste à modifier la façon dont vous fournissez le ViewModel pour chaque composable d'écran. Vous pouvez souvent utiliser l'injection de Hilt et son intégration point avec Compose et Navigation via hiltViewModel:
```
@Composable
fun FirstScreen(
    // viewModel: FirstViewModel = viewModel(),
    viewModel: FirstViewModel = hiltViewModel(),
    onButtonClick: () -> Unit = {},
) {
    // ...
}MigrationCommonScenariosSnippets.kt
```

Remplacez tous les appels de navigation findNavController() par des appels navController et transmettez-les en tant qu'événements de navigation à chaque écran composable, au lieu de transmettre l'intégralité de navController. Cette approche suit les bonnes pratiques d'exposition des événements des fonctions modulables aux appelants et conserve navController comme référence unique.

Vous pouvez transmettre des données à une destination en créant une instance de la classe de route définie pour cette destination. Il peut ensuite être obtenu directement à partir de l'entrée de la pile "Retour" à la destination ou à partir d'un ViewModel à l'aide de SavedStateHandle.toRoute().

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate(Second(id = "ABC"))
                }
            )
        }
        composable<Second> { backStackEntry ->
            val secondRoute = backStackEntry.toRoute<Second>()
            SecondScreen(
                id = secondRoute.id,
                onIconClick = {
                    // findNavController().navigate(secondScreenToThirdScreenAction)
                    navController.navigate(Third)
                }
            )
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Supprimez tous les fragments, les mises en page XML pertinentes, la navigation et d'autres ressources inutiles, ainsi que les dépendances obsolètes de Fragment et de Jetpack Navigation.

Vous trouverez les mêmes étapes avec d'autres informations concernant Navigation Compose dans le Documentation sur la configuration

Cas d'utilisation courants

Quel que soit le composant de navigation que vous utilisez, les mêmes principes de navigation s'appliquent.

Voici quelques cas d'utilisation courants lors de la migration :

Pour en savoir plus sur ces cas d'utilisation, consultez la section Naviguer avec Nouveau message.

Récupérer des données complexes lors de la navigation

Nous vous recommandons vivement de ne pas transmettre d'objets de données complexes lors de la navigation. Transmettez plutôt les informations minimales nécessaires, telles qu'un identifiant unique ou autre forme d'ID, en tant qu'arguments lors de l'exécution d'actions de navigation. Vous devez stocker les objets complexes sous forme de données dans une référence unique, telle que la couche de données. Pour en savoir plus, consultez la section Récupérer des données complexes lorsque navigation.

Si vos fragments transmettent des objets complexes en tant qu'arguments, envisagez de refactoriser votre code, de sorte que vous puissiez stocker et récupérer ces objets la couche de données. Consultez le dépôt Now in Android pour découvrir exemples.

Limites

Cette section décrit les limites actuelles de Navigation Compose.

Migration incrémentielle vers Navigation Compose

Pour le moment, vous ne pouvez pas utiliser Navigation Compose tout en utilisant des fragments comme destinations dans votre code. Pour commencer à utiliser Navigation Compose, toutes vos destinations doivent être composables. Vous pouvez suivre cette demande de fonctionnalité sur la Issue Tracker.

Animations de transition

À partir de Navigation 2.7.0-alpha01, possibilité de définir des paramètres personnalisés de AnimatedNavHost, est désormais directement disponible dans NavHost. Lisez les notes de version pour découvrir plus d'informations.

En savoir plus

Pour en savoir plus sur la migration vers Navigation Compose, consultez les ressources suivantes : ressources:

Atelier de programmation Navigation Compose: découvrez les principes de base de Navigation Compose lors d'un atelier de programmation pratique.
Dépôt "Now in Android": une application Android entièrement fonctionnelle conçu entièrement avec Kotlin et Jetpack Compose, qui respecte la conception Android et de développement, et inclut Navigation Compose.
Migrer Sunflower vers Jetpack Compose: un article de blog documente le parcours de migration de l'application exemple Sunflower de Views vers Compose, qui inclut également la migration vers Navigation Compose.
Jetnews pour tous les écrans : article de blog qui décrit le refactoring et la migration de l'exemple Jetnews pour prendre en charge tous les écrans avec Jetpack Compose et Navigation Compose.

Recommandations personnalisées

Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
Naviguer avec Compose
Compose et autres bibliothèques
Autres points à prendre en compte