Ramp Me Up, Scotty!

Jetpack Compose - Navigation

4 min read

Eine praktische Einfuehrung

In diesem Tutorial lernst du die Grundlagen der Jetpack Compose Navigation - eine Reihe verwandter Klassen, die dir helfen, klaren, gut strukturierten Navigationscode fuer deine Android-App zu erstellen. Die Verwendung dieser Klassen vereinfacht die Navigationslogik und erleichtert die Wartung und Aktualisierung. Lass uns loslegen!

Das werden wir bauen:

Die Animation unten zeigt eine fertige Beispielanwendung, bei der der Benutzer zwischen mehreren Views navigieren kann. Um dies zu erreichen, fuehrt dich das Tutorial durch die Verwendung von NavHost, NavController und der composable-Funktion aus der Navigation-Bibliothek.

Abhaengigkeiten

Um Jetpack Compose Navigation zu verwenden, fuege folgende Abhaengigkeit zu deiner build.gradle hinzu:

dependencies {
...
 implementation 'androidx.navigation:navigation-compose:2.5.3'
}

Der Code

Der Code unten zeigt das vollstaendige Beispiel, das in der obigen Animation verwendet wird. Wir werden es in den folgenden Absaetzen Schritt fuer Schritt durchgehen.

@Composable
fun NavigationView() {
 val navController = rememberNavController()
 NavHost(navController = navController, startDestination = "home") {
 composable("home") {
  HomeScreen(navController)
 }
 composable("settings") {
  SettingsScreen(
  onHome = { navController.popBackStack() },
  onProfile = { navController.navigate("profile") }
  )
 }
 composable("profile") {
  ProfileScreen { navController.popBackStack("home", false) }
 }
 }
}
 
@Composable
fun HomeScreen(navController: NavHostController) {
 Column(
 Modifier.fillMaxSize(),
  horizontalAlignment = Alignment.CenterHorizontally,
  verticalArrangement = Arrangement.Center
 ) {
 Text("Home Screen")
 Button(onClick = { navController.navigate("settings") }) {
  Text("Go to Settings")
 }
 Button(onClick = { navController.navigate("about") }) {
  Text("Go to About")
 }
 }
}
 
@Composable
fun SettingsScreen(onHome: () -> Unit, onProfile: () -> Unit) {
 Column(
 Modifier.fillMaxSize(),
 horizontalAlignment = Alignment.CenterHorizontally,
 verticalArrangement = Arrangement.Center
 ) {
 Text("Settings Screen")
 Button(onClick = onHome) { Text("Go back to Home") }
 Button(onClick = onProfile) { Text("Go to Profile") }
 }
}
 
@Composable
fun ProfileScreen(onHome: () -> Unit) {
 Column(
 Modifier.fillMaxSize(),
 horizontalAlignment = Alignment.CenterHorizontally,
 verticalArrangement = Arrangement.Center
 ) {
 Button(onClick = onHome) {
  Text("Go back to Home")
 }
 }
}

Das vollstaendige Android Studio Projekt findest du in meinem Github-Repository mit Android- und iOS-Codebeispielen.

Ein grundlegendes Jetpack Compose Navigation Setup umfasst diese Komponenten: NavHost, NavController und die composable-Funktion. Der NavHost ist der Container, der alle Navigationsziele enthaelt. Der NavController verwaltet die Navigation zwischen Zielen und den Navigations-Backstack. Die composable-Funktion wird verwendet, um ein bestimmtes Ziel innerhalb des NavHost zu deklarieren.

Der Navigationsstack ist die Reihenfolge der Composables, durch die der Benutzer navigiert ist, wobei das aktuelle Composable oben liegt. Funktionen wie navigate, popUpTo und popBackStack werden zur Verwaltung dieses Stacks verwendet.

  • navigate wechselt von einem Composable zu einem anderen (zum Beispiel von HomeScreen zu SettingsScreen). Es nimmt den Zielnamen als String und akzeptiert optional Argumente, um Daten an das Ziel zu uebergeben.
  • popUpTo navigiert zurueck zu einem bestimmten Composable im Stack und entfernt alle danach hinzugefuegten Composables (zum Beispiel gibt popUpTo("home") zum HomeScreen zurueck und verwirft SettingsScreen und ProfileScreen).
  • popBackStack navigiert einen Schritt zurueck im Stack, verwirft das aktuelle Composable und kehrt zum vorherigen zurueck.

Hinweis: Im Beispielcode wird von HomeScreen zur “about”-Route navigiert, aber es gibt kein entsprechendes Composable fuer “about” im NavHost deklariert.

Im bereitgestellten Code gibt es zwei Bereiche, die verbessert werden koennten.

Erstens wird das Uebergeben des NavController in eine View als Anti-Pattern betrachtet und sollte vermieden werden. Views sollten nichts von der Navigation wissen; sie sollten nur einen Parent ueber Ereignisse informieren, die eine Navigation erfordern koennten. Der Parent kann dann die Navigationslogik handhaben, ohne die View einzubeziehen.

Zweitens ist die Verwendung von rohen Strings fuer Navigationsrouten fehleranfaellig. Ein einfacher Tippfehler kann zu Laufzeitabstuerzen fuehren und das Debugging erschweren. Verwende stattdessen Enums oder Sealed Classes zur Darstellung von Routen - dies bietet Compile-Time-Sicherheit und verhindert Tippfehler.

Die Implementierung dieser Best Practices macht deinen Code einfacher zu warten, besser organisiert und weniger fehleranfaellig.

Das schliesst diese kurze Einfuehrung ab. Ich hoffe, du fandest sie hilfreich und informativ.

Vielen Dank fuers Lesen!

Ressourcen