Navigation Component
Gestisca la navigazione tra più schermate con un NavGraph visivo, Safe Args per argomenti tipizzati, NavController e supporto ai deep link.
Navigation Component è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 5 di 6. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 6 lezioni in totale.
Che cos'è il Navigation Component?
Il Navigation Component è una libreria Android Jetpack che gestisce la navigazione tra fragment, il back stack, i deep link e le animazioni di transizione in un unico grafo visivo.
Vantaggi principali:
- Grafo di navigazione visivo in Android Studio
- Passaggio di argomenti type-safe (Safe Args)
- Gestione automatica del back stack
- Supporto integrato per i deep link
Configurazione: dipendenze
Aggiunga a 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'
}Grafo di navigazione (nav_graph.xml)
Crei res/navigation/nav_graph.xml. Definisce le destinazioni (fragment) e le azioni (percorsi di navigazione):
<!-- 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 nel layout dell'Activity
Sostituisca il contenitore FrameLayout con NavHostFragment. Funge da host per tutte le destinazioni di navigazione:
<!-- 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 — navigazione tra fragment
Recuperi un NavController e chiami navigate() con un ID di azione:
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 — argomenti type-safe
Safe Args genera classi per passare argomenti tra fragment senza cast o errori nei nomi delle chiavi:
// 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)
}
}Navigazione verso l'alto
Colleghi il pulsante Up della Toolbar al NavController per ottenere automaticamente la navigazione indietro:
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()
}
}Navigazione inferiore con NavController
Colleghi una BottomNavigationView al NavController: gestirà automaticamente la selezione delle schede e il back stack:
// 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.xmlEstrazione dal back stack
Torni indietro a livello di codice oppure raggiunga una destinazione specifica:
// 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()
)Deep link
Aggiunga un deep link a una destinazione per consentire l'apertura dell'app da un 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>Transizioni tra fragment
Aggiunga animazioni personalizzate alle azioni di navigazione nel grafo di navigazione:
<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" />Verifica rapida
Che cosa deve coincidere tra l'ID della voce di menu BottomNavigationView e il grafo di navigazione per gestire automaticamente le schede?
Riepilogo: Navigation Component
Navigation Component semplifica le app con più schermate:
nav_graph.xmlvisivo — destinazioni + azioniNavHostFragmentnel layout dell'ActivityfindNavController().navigate(actionId)per spostarsi tra le schermate- Safe Args — passaggio di argomenti type-safe (senza cast né errori di battitura)
setupActionBarWithNavController()— pulsante Up automaticosetupWithNavController()— BottomNavigationView automatica
Prossimo argomento: aggiungere la Dependency Injection con Hilt per un'architettura pulita.
Domande Frequenti
La lezione «Navigation Component» è gratuita?
Sì — il testo completo di «Navigation Component» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 6 lezioni in totale.
Cosa imparerò in «Navigation Component»?
Gestisca la navigazione tra più schermate con un NavGraph visivo, Safe Args per argomenti tipizzati, NavController e supporto ai deep link. Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Android Academy?
Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 5 di 6.
Quanto tempo richiede la lezione «Navigation Component»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Android Academy?
Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- ViewModel e LiveData
- Database Room
- Coroutines e funzioni suspend
- Pattern Repository
- Navigation Component
- Dependency Injection con Hilt