0Pricing
Android Academy · Leçon

Composant de navigation

Gérez la navigation entre plusieurs écrans avec un NavGraph visuel, Safe Args pour des arguments vérifiés par le type, NavController et la prise en charge des liens profonds.

Composant de navigation est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 5 sur 6. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 6 leçons au total.

Qu'est-ce que le composant Navigation ?

Le composant Navigation est une bibliothèque Android Jetpack qui gère la navigation entre les fragments, la pile de retour, les liens profonds et les animations de transition dans un graphe visuel unique.

Principaux avantages :

  • Graphe de navigation visuel dans Android Studio
  • Transmission d'arguments avec vérification des types (Safe Args)
  • Gestion automatique de la pile de retour
  • Prise en charge des liens profonds prête à l'emploi

Configuration : dépendances

Ajoutez ceci à app/build.gradle :

// app/build.gradle
dependencies {
    implementation 'androidx.navigation:navigation-fragment-ktx:2.7.7'
    implementation 'androidx.navigation:navigation-ui-ktx:2.7.7'
}

// project/build.gradle (for Safe Args):
buildscript {
    dependencies {
        classpath 'androidx.navigation:navigation-safe-args-gradle-plugin:2.7.7'
    }
}

// app/build.gradle — apply the plugin:
plugins {
    id 'androidx.navigation.safeargs.kotlin'
}

Graphe de navigation (nav_graph.xml)

Créez res/navigation/nav_graph.xml. Il définit les destinations (fragments) et les actions (chemins de navigation) :

<!-- res/navigation/nav_graph.xml -->
<navigation
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/nav_graph"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.HomeFragment">
        <action
            android:id="@+id/action_home_to_detail"
            app:destination="@id/detailFragment" />
    </fragment>

    <fragment
        android:id="@+id/detailFragment"
        android:name="com.example.DetailFragment">
        <argument
            android:name="itemId"
            app:argType="integer" />
    </fragment>
</navigation>

NavHostFragment dans la mise en page de l'activité

Remplacez le conteneur FrameLayout par NavHostFragment. Il sert d'hôte pour toutes les destinations de navigation :

<!-- activity_main.xml -->
<androidx.fragment.app.FragmentContainerView
    android:id="@+id/navHostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:navGraph="@navigation/nav_graph"
    app:defaultNavHost="true" />

NavController — naviguer entre les fragments

Récupérez un NavController et appelez navigate() avec un identifiant d'action :

class HomeFragment : Fragment() {

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        binding.btnOpenDetail.setOnClickListener {
            // Navigate using action ID from nav_graph
            findNavController().navigate(R.id.action_home_to_detail)
        }
    }
}

Safe Args — arguments avec vérification des types

Safe Args génère des classes pour transmettre des arguments entre les fragments, sans conversion de type ni erreur de clé :

// In HomeFragment — pass itemId:
binding.btnOpenDetail.setOnClickListener {
    val action = HomeFragmentDirections.actionHomeToDetail(itemId = 42)
    findNavController().navigate(action)
}

// In DetailFragment — receive itemId:
class DetailFragment : Fragment() {
    private val args: DetailFragmentArgs by navArgs()

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        val id = args.itemId   // Int, type-safe
        viewModel.loadItem(id)
    }
}

Navigation vers le niveau supérieur

Reliez le bouton de remontée de la barre d'outils au NavController pour activer automatiquement la navigation de retour :

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val navHostFragment = supportFragmentManager
            .findFragmentById(R.id.navHostFragment) as NavHostFragment
        navController = navHostFragment.navController

        // Wire toolbar Up button
        setupActionBarWithNavController(navController)
    }

    override fun onSupportNavigateUp(): Boolean {
        return navController.navigateUp() || super.onSupportNavigateUp()
    }
}

Navigation inférieure avec NavController

Reliez un BottomNavigationView au NavController : il gère automatiquement la sélection des onglets et la pile de retour :

// In Activity.onCreate():
val navHostFragment = supportFragmentManager
    .findFragmentById(R.id.navHostFragment) as NavHostFragment
val navController = navHostFragment.navController

// Wire BottomNavigationView
binding.bottomNav.setupWithNavController(navController)

// Each menu item ID must match a fragment destination ID in nav_graph.xml

Dépiler la pile de retour

Revenez en arrière par programmation ou accédez à une destination précise :

// Go back one step
findNavController().popBackStack()

// Navigate back to a specific destination (popping everything on top)
findNavController().popBackStack(R.id.homeFragment, inclusive = false)

// Navigate and clear back stack (e.g., after login)
findNavController().navigate(
    R.id.action_login_to_home,
    null,
    NavOptions.Builder()
        .setPopUpTo(R.id.loginFragment, inclusive = true)
        .build()
)

Liens profonds

Ajoutez un lien profond à une destination afin que votre application puisse être ouverte depuis une URL :

<!-- In nav_graph.xml, inside the destination fragment: -->
<deepLink
    android:id="@+id/deepLinkDetail"
    app:uri="https://example.com/items/{itemId}" />

<!-- Also add intent-filter in AndroidManifest.xml for the Activity: -->
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="https" android:host="example.com" />
</intent-filter>

Transitions entre les fragments

Ajoutez des animations personnalisées aux actions de navigation dans le graphe de navigation :

<action
    android:id="@+id/action_home_to_detail"
    app:destination="@id/detailFragment"
    app:enterAnim="@anim/slide_in_right"
    app:exitAnim="@anim/slide_out_left"
    app:popEnterAnim="@anim/slide_in_left"
    app:popExitAnim="@anim/slide_out_right" />

Vérification rapide

Quel élément doit correspondre entre l'identifiant de l'élément de menu BottomNavigationView et le graphe de navigation pour gérer automatiquement les onglets ?

Récapitulatif : composant Navigation

Le composant Navigation simplifie les applications comportant plusieurs écrans :

  • nav_graph.xml visuel — destinations et actions
  • NavHostFragment dans la mise en page de l'activité
  • findNavController().navigate(actionId) pour passer d'un écran à l'autre
  • Safe Args — transmission d'arguments avec vérification des types (sans conversion ni faute de frappe)
  • setupActionBarWithNavController() — bouton de remontée automatique
  • setupWithNavController() — BottomNavigationView automatique

Ensuite : ajoutez l'injection de dépendances avec Hilt pour une architecture propre.

Questions Fréquemment Posées

La leçon « Composant de navigation » est-elle gratuite ?

Oui — le texte complet de « Composant de navigation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 6 leçons au total.

Qu'est-ce que j'apprendrai dans « Composant de navigation » ?

Gérez la navigation entre plusieurs écrans avec un NavGraph visuel, Safe Args pour des arguments vérifiés par le type, NavController et la prise en charge des liens profonds. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 5 sur 6.

Combien de temps prend la leçon « Composant de navigation » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. ViewModel et LiveData
  2. Base de données Room
  3. Coroutines et fonctions suspendues
  4. Patron Repository
  5. Composant de navigation
  6. Injection de dépendances avec Hilt
← Retour à Android Academy