Navigation Component
Verwalten Sie die Navigation zwischen mehreren Bildschirmen mit einem visuellen NavGraph, typsicheren Argumenten über Safe Args, NavController und Deep-Link-Unterstützung.
Navigation Component ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 5 von 6. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 6 Lektionen.
Was ist die Navigation Component?
Die Navigation Component ist eine Android-Jetpack-Bibliothek, die Fragment-Navigation, Back Stack, Deep Links und Übergangsanimationen in einem einzigen visuellen Graphen verwaltet.
Wichtige Vorteile:
- Visueller Navigationsgraph in Android Studio
- Typsichere Argumentübergabe (Safe Args)
- Automatische Verwaltung des Back Stack
- Deep-Link-Unterstützung direkt integriert
Einrichtung: Abhängigkeiten
Fügen Sie Folgendes zu app/build.gradle hinzu:
// 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'
}Navigationsgraph (nav_graph.xml)
Erstellen Sie res/navigation/nav_graph.xml. Darin werden Ziele (Fragmente) und Aktionen (Navigationspfade) definiert:
<!-- 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 im Activity-Layout
Ersetzen Sie den FrameLayout-Container durch NavHostFragment. Er dient als Host für alle Navigationsziele:
<!-- 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 — Zwischen Fragmenten navigieren
Rufen Sie einen NavController ab und verwenden Sie navigate() mit einer Aktions-ID:
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 — Typsichere Argumente
Safe Args generiert Klassen für die Übergabe von Argumenten zwischen Fragmenten, ohne Casts oder Tippfehler bei Schlüsseln:
// 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)
}
}Up-Navigation
Verbinden Sie die Up-Schaltfläche der Toolbar mit dem NavController, um die automatische Rückwärtsnavigation zu aktivieren:
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()
}
}Bottom-Navigation mit NavController
Verbinden Sie eine BottomNavigationView mit dem NavController – Tab-Auswahl und Back Stack werden automatisch verwaltet:
// 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.xmlBack Stack zurücksetzen
Navigieren Sie programmgesteuert zurück oder zu einem bestimmten Ziel:
// 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 Links
Fügen Sie einem Ziel einen Deep Link hinzu, damit Ihre App über eine URL geöffnet werden kann:
<!-- 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>Übergänge zwischen Fragmenten
Fügen Sie den Navigationsaktionen im Navigationsgraphen benutzerdefinierte Animationen hinzu:
<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" />Schnelltest
Was muss zwischen der ID des Menüelements der BottomNavigationView und dem Navigationsgraphen übereinstimmen, damit Tabs automatisch verarbeitet werden?
Zusammenfassung: Navigation Component
Die Navigation Component vereinfacht Apps mit mehreren Bildschirmen:
- Visueller
nav_graph.xml— Ziele + Aktionen NavHostFragmentim Activity-LayoutfindNavController().navigate(actionId), um zwischen Bildschirmen zu wechseln- Safe Args — typsichere Argumentübergabe (keine Casts, keine Tippfehler)
setupActionBarWithNavController()— automatische Up-SchaltflächesetupWithNavController()— automatische BottomNavigationView
Als Nächstes: Fügen Sie mit Hilt Dependency Injection für eine saubere Architektur hinzu.
Lerne Kotlin mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 36
- Lektionen
- 152
Häufig gestellte Fragen
Ist die Lektion „Navigation Component“ kostenlos?
Ja — der vollständige Text von „Navigation Component“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 6 Lektionen.
Was lerne ich in „Navigation Component“?
Verwalten Sie die Navigation zwischen mehreren Bildschirmen mit einem visuellen NavGraph, typsicheren Argumenten über Safe Args, NavController und Deep-Link-Unterstützung. Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Android Academy zu starten?
Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 5 von 6.
Wie lange dauert die Lektion „Navigation Component“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?
Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- ViewModel und LiveData
- Room-Datenbank
- Coroutines und Suspend-Funktionen
- Repository-Pattern
- Navigation Component
- Dependency Injection mit Hilt