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.xmlDé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.xmlvisuel — destinations et actionsNavHostFragmentdans 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 automatiquesetupWithNavController()— 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
- ViewModel et LiveData
- Base de données Room
- Coroutines et fonctions suspendues
- Patron Repository
- Composant de navigation
- Injection de dépendances avec Hilt