Navigationsdiagramm entwerfen

Die Navigationskomponente nutzt ein Navigationsdiagramm, um die Aktivitäten Ihrer App zu verwalten. Navigation. Das Navigationsdiagramm ist eine Datenstruktur, die in Ihrer App und die Verbindungen zwischen ihnen.

Zieltypen

Es gibt drei allgemeine Arten von Zielen: „Gehostet“, „Dialogfeld“ und „Aktivität“. Die In der folgenden Tabelle werden diese drei Zieltypen und ihre Zwecke erläutert.

Dieses Dokument enthält Beispiele für gehostete Ziele. gemeinsame und grundlegende Ziele. In den folgenden Leitfäden finden Sie Informationen zu die anderen Ziele:

• Dialogziele
• Ziele der Aktivität

Rahmenbedingungen

Obwohl in jedem Fall derselbe allgemeine Workflow gilt, wie genau erstellen Sie ein Navigationshost und ein Diagramm hängt vom verwendeten UI-Framework ab.

• Schreiben:Verwenden Sie die zusammensetzbare Funktion NavHost. Fügen Sie ein NavGraph hinzu. Verwenden Sie dazu die Kotlin DSL Sie können die Grafik auf zwei Arten erstellen: <ph type="x-smartling-placeholder">
  </ph>
  • Als Teil von NavHost:Erstellen Sie das Navigationsdiagramm direkt als NavHost hinzu.
  • Programmatisch:Verwenden Sie die Methode NavController.createGraph(). um einen NavGraph zu erstellen und direkt an NavHost zu übergeben.
• Fragmente:Wenn Sie Fragmente mit dem UI-Framework für Ansichten verwenden, verwenden Sie einen NavHostFragment als Host. Es gibt mehrere Möglichkeiten, eine Navigation zu erstellen. Grafik: <ph type="x-smartling-placeholder">
  </ph>
  • Programmatisch:Erstellen Sie mit der Kotlin DSL eine NavGraph und wenden Sie es direkt auf NavHostFragment an.
    • Die Funktion createGraph(), die mit Kotlin DSL für beide verwendet wird Fragmente und „Compose“ sind gleich.
  • XML:Sie schreiben den Navigationshost und die Grafik direkt in XML.
  • Android Studio-Editor:Verwenden Sie den GUI-Editor in Android Studio, um Erstellen und passen Sie die Grafik als XML-Ressourcendatei an.

Schreiben

Verwenden Sie in Compose ein serialisierbares Objekt oder eine serialisierbare Klasse, um eine route zu definieren. Eine Route beschreibt, wie man zu einem Ziel gelangt, und enthält alle Informationen, Ziel erfordert. Nachdem Sie Ihre Routen definiert haben, verwenden Sie die NavHost zusammensetzbar ist, um Ihr Navigationsdiagramm zu erstellen. Betrachten Sie das folgende Beispiel:

@Serializable
object Profile
@Serializable
object FriendsList

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
    // Add more destinations similarly.
}

1. Ein serialisierbares Objekt stellt jede der beiden Routen Profile und FriendsList.
2. Der Aufruf der zusammensetzbaren Funktion NavHost übergibt ein NavController und eine Route. für das Startziel.
3. Die an NavHost übergebene Lambda-Funktion ruft letztendlich NavController.createGraph() und gibt eine NavGraph zurück.
4. Jede Route wird als Typargument für NavGraphBuilder.composable<T>(), wodurch das Ziel dem Daraus ergibt sich: NavGraph.
5. Die an composable übergebene Lambda-Funktion wird von NavHost dafür angezeigt. Ziel.

Lambda verstehen

Um die Lambda-Funktion, die das NavGraph erzeugt, besser zu verstehen, berücksichtige das, dieselbe Grafik wie im vorherigen Snippet erstellen, können Sie NavGraph separat mit NavController.createGraph() und übergeben Sie sie an NavHost:

val navGraph by remember(navController) {
  navController.createGraph(startDestination = Profile)) {
    composable<Profile> { ProfileScreen( /* ... */ ) }
    composable<FriendsList> { FriendsListScreen( /* ... */ ) }
  }
}
NavHost(navController, navGraph)

Argumente übergeben

Wenn Sie Daten an ein Ziel übergeben müssen, definieren Sie die Route mit einer Klasse, die enthält Parameter. Die Route Profile ist beispielsweise eine Datenklasse mit einem name. .

@Serializable
data class Profile(val name: String)

Wenn Sie Argumente an dieses Ziel übergeben müssen, erstellen Sie eine Instanz. Ihrer Routenklasse, indem Sie die Argumente an den Klassenkonstruktor übergeben.

Routeninstanz abrufen

Sie können die Routeninstanz mit NavBackStackEntry.toRoute() oder SavedStateHandle.toRoute(). Wenn Sie ein Ziel mit composable() ist die NavBackStackEntry als Parameter verfügbar.

@Serializable
data class Profile(val name: String)

val navController = rememberNavController()

NavHost(navController = navController, startDestination = Profile(name="John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(name = profile.name) }
}

Beachten Sie in diesem Snippet Folgendes:

• Die Route Profile gibt das Startziel in der Navigation an. Grafik, mit "John Smith" als Argument für name.
• Das Ziel selbst ist der composable<Profile>{}-Block.
• Die zusammensetzbare Funktion ProfileScreen übernimmt den Wert von profile.name name-Argument.
• Daher wird der Wert "John Smith" an ProfileScreen weitergegeben.

Mindestbeispiel

Hier ein vollständiges Beispiel für die Zusammenarbeit von NavController und NavHost:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// Define the ProfileScreen composable.
@Composable
fun ProfileScreen(
    profile: Profile
    onNavigateToFriendsList: () -> Unit,
  ) {
  Text("Profile for ${profile.name}")
  Button(onClick = { onNavigateToFriendsList() }) {
    Text("Go to Friends List")
  }
}

// Define the FriendsListScreen composable.
@Composable
fun FriendsListScreen(onNavigateToProfile: () -> Unit) {
  Text("Friends List")
  Button(onClick = { onNavigateToProfile() }) {
    Text("Go to Profile")
  }
}

// Define the MyApp composable, including the `NavController` and `NavHost`.
@Composable
fun MyApp() {
  val navController = rememberNavController()
  NavHost(navController, startDestination = Profile(name = "John Smith")) {
    composable<Profile> { backStackEntry ->
        val profile: Profile = backStackEntry.toRoute()
        ProfileScreen(
            profile = profile,
            onNavigateToFriendsList = {
                navController.navigate(route = FriendsList)
            }
        )
    }
    composable<FriendsList> {
      FriendsListScreen(
        onNavigateToProfile = {
          navController.navigate(
            route = Profile(name = "Aisha Devi")
          )
        }
      )
    }
  }
}

Wie das Snippet zeigt, müssen Sie, anstatt NavController an Ihren zusammensetzbaren Funktionen aktivieren, stellen Sie ein Ereignis für die NavHost bereit. Das heißt, Ihre zusammensetzbaren Funktionen sollten haben einen Parameter vom Typ () -> Unit, für den NavHost eine Lambda-Funktion übergibt. das NavController.navigate() aufruft.

Fragmente

Wie in den vorherigen Abschnitten beschrieben, haben Sie bei der Verwendung von Fragmenten die Möglichkeit, ein Navigationsdiagramm programmatisch mit Kotlin DSL, XML oder der Android Studio-Editor

In den folgenden Abschnitten werden diese unterschiedlichen Ansätze erläutert.

Programmatisch

Kotlin DSL bietet eine programmatische Möglichkeit zum Erstellen einer Navigationsgrafik mit Fragmenten. In vielerlei Hinsicht ist dies ordentlicher und moderner als die Verwendung einer XML-Datei. Ressourcendatei.

Im folgenden Beispiel wird ein Navigationsdiagramm mit zwei Bildschirmen implementiert.

Zuerst muss die NavHostFragment erstellt werden, die keine ein app:navGraph-Element:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

Als Nächstes übergeben Sie den id von NavHostFragment an NavController.findNavController Dadurch wird der NavController mit NavHostFragment.

Anschließend verknüpft der Aufruf von NavController.createGraph() das Diagramm mit NavController und folglich auch für NavHostFragment:

@Serializable
data class Profile(val name: String)

@Serializable
object FriendsList

// Retrieve the NavController.
val navController = findNavController(R.id.nav_host_fragment)

// Add the graph to the NavController with `createGraph()`.
navController.graph = navController.createGraph(
    startDestination = Profile(name = "John Smith")
) {
    // Associate each destination with one of the route constants.
    fragment<ProfileFragment, Profile> {
        label = "Profile"
    }

    fragment<FriendsListFragment, FriendsList>() {
        label = "Friends List"
    }

    // Add other fragment destinations similarly.
}

Diese Verwendung von DSL ähnelt dem in der vorherigen Abschnitts zum Schreiben. Sowohl dort als auch hier Die Funktion NavController.createGraph() generiert die NavGraph. Ähnlich verhält es sich, wenn NavGraphBuilder.composable() fügt der Grafik hier zusammensetzbare Ziele hinzu Mit NavGraphBuilder.fragment() wird ein Fragmentziel hinzugefügt.

Weitere Informationen zur Verwendung von Kotlin DSL finden Sie unter Build a graph with the NavGraphBuilder DSL

XML

Sie können die XML-Datei direkt selbst schreiben. Das folgende Beispiel spiegelt Dies entspricht dem Beispiel mit zwei Bildschirmen aus dem vorherigen Abschnitt.

Erstellen Sie zuerst ein NavHostFragment. Sie dient als Navigationshost, enthält die eigentliche Navigationsgrafik.

Minimale Implementierung einer NavHostFragment:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navGraph="@navigation/nav_graph" />

</FrameLayout>

NavHostFragment enthält das Attribut app:navGraph. Dieses Attribut verwenden um Ihren Navigationsdiagramm mit dem Navigationshost zu verbinden. Im Folgenden finden Sie Beispiel für die Implementierung der Grafik:

<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/profile">

    <fragment
        android:id="@+id/profile"
        android:name="com.example.ProfileFragment"
        android:label="Profile">

        <!-- Action to navigate from Profile to Friends List. -->
        <action
            android:id="@+id/action_profile_to_friendslist"
            app:destination="@id/friendslist" />
    </fragment>

    <fragment
        android:id="@+id/friendslist"
        android:name="com.example.FriendsListFragment"
        android:label="Friends List" />

    <!-- Add other fragment destinations similarly. -->
</navigation>

Sie verwenden Aktionen, um die Verbindungen zwischen verschiedenen Zielen zu definieren. In In diesem Beispiel enthält das Fragment profile eine Aktion, die zu friendslist. Weitere Informationen finden Sie unter Verwenden von Navigationsaktionen und Fragmente.

Editor

Sie können das Navigationsdiagramm Ihrer App mit dem Navigationseditor verwalten in Android Studio Dies ist im Grunde eine GUI, mit der Sie Ihre NavigationFragment-XML, wie im vorherigen Abschnitt dargestellt.

Weitere Informationen finden Sie unter Navigationseditor.

Verschachtelte Grafiken

Sie können auch verschachtelte Grafiken verwenden. Dazu wird ein Diagramm zur Navigation Ziel. Weitere Informationen finden Sie unter Verschachtelte Grafiken.

Weitere Informationen

Weitere grundlegende Navigationskonzepte finden Sie in den folgenden Leitfäden:

• Überblick:Lesen Sie den allgemeinen Überblick über die Navigation Komponente.
• Aktivitätsziele: Beispiele für die Implementierung von Zielen die Nutzende zu Aktivitäten führen.
• Dialogziele: Sie können beispielsweise Ziele erstellen, die und die Nutzenden zu einem Dialogfeld weiterleiten.
• Zu einem Ziel navigieren:Eine detaillierte Anleitung, die zeigt, wie Sie um von einem Ziel zum anderen zu navigieren.
• Verschachtelte Grafiken:Eine ausführliche Anleitung zum Verschachteln einer Navigation innerhalb einer anderen.