Gezinme grafiğinizi tasarlama

Gezinme bileşeni, uygulamanızın özelliklerini yönetmek için bir gezinme grafiği kullanır. yardımcı olabilir. Gezinme grafiği her bir Sprint’i içeren bir veri yapısıdır ve bunlar arasındaki bağlantılara göre değerlendireceksiniz.

Hedef türleri

Üç genel hedef türü vardır: barındırılan, iletişim kutusu ve etkinlik. İlgili içeriği oluşturmak için kullanılan Aşağıdaki tabloda bu üç hedef türü ve amaçları özetlenmektedir.

Bu doküman, barındırdığınız dilin en yaygın temel hedefleri belirlemenize yardımcı olur. Bilgi edinmek için aşağıdaki kılavuzlara bakabilirsiniz: diğer hedefler:

• İletişim kutusu hedefleri
• Etkinlik hedefleri

Çerçeveler

Her durum için aynı genel iş akışı geçerli olsa da, projeyi tam olarak nasıl gezinme ana makinesi ve grafiği, kullandığınız kullanıcı arayüzü çerçevesine bağlıdır.

• Oluştur: NavHost composable'ı kullanın. Şunu kullanarak bir NavGraph ekleyin: Kotlin DSL. Grafiği iki şekilde oluşturabilirsiniz:
  • NavHost'un bir parçası olarak: Gezinme grafiğini doğrudan NavHost ekleme işleminin bir parçasıdır.
  • Programatik olarak: NavController.createGraph() yöntemini kullanın bir NavGraph oluşturun ve bunu doğrudan NavHost öğesine aktarın.
• Parçalar: Görünümler kullanıcı arayüzü çerçevesiyle parçaları kullanırken NavHostFragment, düzenleyen kullanıcı olarak. Gezinme oluşturmanın birkaç yolu vardır grafik:
  • Programatik olarak: Kotlin DSL'yi kullanarak NavGraph ve NavHostFragment üzerinde doğrudan uygulayabilirsiniz.
    • Her ikisi için Kotlin DSL ile kullanılan createGraph() işlevi parçaları ile Oluşturma aynıdır.
  • XML: Gezinme ana makinenizi ve grafiğinizi doğrudan XML'e yazın.
  • Android Studio düzenleyicisi: Android Studio'daki GUI düzenleyicisini kullanarak grafiğinizi XML kaynak dosyası olarak oluşturun ve ayarlayın.

Oluştur

Compose'da yönlendirme tanımlamak için seri hale getirilebilir bir nesne veya sınıf kullanın. Bir rota bir hedefe nasıl ulaşılacağını açıklar ve gösterir. Rotalarınızı tanımladıktan sonra NavHost kullanın. composable'ı kullanarak gezinme grafiğinizi oluşturun. Aşağıdaki örneği inceleyin:

@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. Serileştirilebilir nesne, iki rotanın her birini temsil eder: Profile ve FriendsList.
2. NavHost composable'a yapılan çağrı, bir NavController ve bir rota geçer başlangıç hedefi için.
3. Lambda nihai olarak NavHost çağrısına iletildi NavController.createGraph() ve NavGraph döndürür.
4. Her rota, NavGraphBuilder.composable<T>() ise hedefi sonuçta NavGraph.
5. composable öğesine iletilen lambda, NavHost tarafından bunun için gösterilir seçeceğiz.

Lambda'yı anlama

NavGraph öğesini oluşturan lambda'yı daha iyi anlamak için şunu göz önünde bulundurun: snippet'tekiyle aynı grafiği oluşturmak yerine, NavGraph NavController.createGraph() kullanarak ayrı ayrı oluşturup NavHost doğrudan:

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

Bağımsız değişkenleri iletme

Verileri bir hedefe aktarmanız gerekiyorsa rotayı parametresidir. Örneğin, Profile rotası, name içeren bir veri sınıfıdır. parametresinden sonra bir değer girin.

@Serializable
data class Profile(val name: String)

Bu hedefe bağımsız değişkenler aktarmanız gerektiğinde bir örnek oluşturursunuz bağımsız değişkenleri sınıf oluşturucuya ileterek.

Rota örneği alma

Rota örneğini NavBackStackEntry.toRoute() veya SavedStateHandle.toRoute(). Şunu kullanarak bir hedef oluşturduğunuzda: composable(), NavBackStackEntry parametre olarak kullanılabilir.

@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) }
}

Bu snippet'te aşağıdakilere dikkat edin:

• Profile rotası, navigasyondaki başlangıç hedefini belirtir name için bağımsız değişken olarak "John Smith" içeren grafik.
• Hedefin kendisi composable<Profile>{} bloku.
• ProfileScreen composable, profile.name değerini kendi başına alır name bağımsız değişkeni.
• Dolayısıyla, "John Smith" değeri ProfileScreen öğesine iletilir.

Minimum örnek

NavController ve NavHost öğelerinin birlikte çalışmasına ilişkin tam bir örnek:

@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")
          )
        }
      )
    }
  }
}

Snippet'te gösterildiği gibi, NavController öğesini composable'lar için bir etkinlik NavHost'a gösterilir. Yani composable’larınız NavHost öğesinin bir lambda ilettiği () -> Unit türünde bir parametreye sahiptir NavController.navigate().

Parçalar

Önceki bölümlerde belirtildiği gibi, parçaları kullanırken kullanarak programlı bir gezinme grafiği oluşturmak için Kotlin DSL, XML veya Android Studio düzenleyicisi.

Aşağıdaki bölümlerde bu farklı yaklaşımlar ayrıntılı olarak açıklanmaktadır.

Programatik olarak

Kotlin DSL, programlı bir gezinme grafiği oluşturmak için parçalar. Birçok bakımdan, XML kullanmaya kıyasla daha düzenli ve moderndir. kaynak dosya.

İki ekranlı gezinme grafiğinin uygulandığı aşağıdaki örneği düşünün.

İlk olarak, NavHostFragment oluşturmanız gerekir. Bu öğe, şunları içermemelidir: app:navGraph öğesi:

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

Sonra NavHostFragment id ayarını şuraya geçirin: NavController.findNavController. Bu, NavController'ı NavHostFragment.

Ardından, NavController.createGraph() çağrısı, grafiği NavController ve dolayısıyla NavHostFragment şunları da ekler:

@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.
}

DSL'nin bu şekilde kullanılması, Oluştur'un önceki bölümüne gidin. Örneğin, hem burada hem de NavController.createGraph() işlevi, NavGraph oluşturur. Aynı şekilde NavGraphBuilder.composable(), grafiğe derlenebilir hedefler ekler NavGraphBuilder.fragment(), parça hedefi ekler.

Kotlin DSL'nin nasıl kullanılacağı hakkında daha fazla bilgi için NavGraphBuilder DSL'yi seçin.

XML

XML dosyasını doğrudan kendiniz yazabilirsiniz. Aşağıdaki örnek projeyi yansıtır ve iki ekran örneğine eşdeğerdir.

İlk olarak bir NavHostFragment oluşturun. Bu işlem, gezinme ana makinesi olarak gerçek gezinme grafiğini içerir.

Minimum bir NavHostFragment kullanımı:

<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, app:navGraph özelliğini içeriyor. Bu özelliği kullan gezinme grafiğinizi gezinme ana makinesine bağlamak için. Bu, Grafiği nasıl uygulayabileceğinize ilişkin bir örnek:

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

Farklı hedefler arasındaki bağlantıları tanımlamak için işlemler kullanırsınız. İçinde Bu örnekte, profile parçası friendslist. Daha fazla bilgi için Gezinme işlemlerini kullanma ve parçalarını kullanın.

Düzenleyici

Uygulamanızın gezinme grafiğini, Android Studio'ya gidin. Bu temelde, verilerinizi oluşturmak ve düzenlemek için kullanabileceğiniz NavigationFragment XML, önceki bölümde gösterildiği gibi).

Daha fazla bilgi için Gezinme düzenleyici konusuna bakın.

İç içe yerleştirilmiş grafikler

İç içe yerleştirilmiş grafikleri de kullanabilirsiniz. Bu, bir grafiği gezinme olarak kullanmayı içerir seçeceğiz. Daha fazla bilgi için İç içe yerleştirilmiş grafikler konusuna bakın.

Diğer Okumalar

Daha temel gezinme kavramları için aşağıdaki kılavuzlara bakın:

• Genel bakış: Navigasyon uygulamasının genel bakışını okuduğunuzdan emin olun bir bileşenidir.
• Etkinlik hedefleri: Hedeflerin nasıl uygulanacağına ilişkin örnekler yönlendiren reklamlar da vardır.
• Diyalog hedefleri: Hedeflerinize ulaşmanıza yardımcı olacak hedefler kullanıcıyı bir iletişim kutusuna götürebilir.
• Bir hedefe gitme: Nasıl yapıldığını açıklayan ayrıntılı bir kılavuz bir hedeften diğerine gitmektir.
• İç içe yerleştirilmiş grafikler: Gezinme çubuğunda nasıl iç içe yerleştirileceğine dair ayrıntılı kılavuz bir arada kullanabilirsiniz.