Android Academy · Lektion

Navigation Component

Verwalten Sie die Navigation zwischen mehreren Bildschirmen mit einem visuellen NavGraph, typsicheren Argumenten über Safe Args, NavController und Deep-Link-Unterstützung.

Lektion 5 von 613 Schritte

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.xml

Back 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
  • NavHostFragment im Activity-Layout
  • findNavController().navigate(actionId), um zwischen Bildschirmen zu wechseln
  • Safe Args — typsichere Argumentübergabe (keine Casts, keine Tippfehler)
  • setupActionBarWithNavController() — automatische Up-Schaltfläche
  • setupWithNavController() — automatische BottomNavigationView

Als Nächstes: Fügen Sie mit Hilt Dependency Injection für eine saubere Architektur hinzu.

Kostenlos starten

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

  1. ViewModel und LiveData
  2. Room-Datenbank
  3. Coroutines und Suspend-Funktionen
  4. Repository-Pattern
  5. Navigation Component
  6. Dependency Injection mit Hilt
← Zurück zu Android Academy