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.

Not: Gezinme grafiği, bir araç grubu olan geri yığınından farklıdır. NavController içinde, kullanıcının yakın zamanda sahip olduğu hedefleri barındıran yığın ziyaret edilir.

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.

Tür	Açıklama	Kullanım örnekleri
Barındırılan	Gezinme ana makinesinin tamamını doldurur. Yani barındırılan bir hedefin boyutu, gezinme ana makinesinin boyutuyla aynıdır ve önceki hedefler görünmez.	Ana ekran ve ayrıntı ekranları.
Dialog	Yer paylaşımı kullanıcı arayüzü bileşenlerini sunar. Bu kullanıcı arayüzü, gezinme ana makinesinin konumuna veya boyutuna bağlı değildir. Önceki hedefler hedefin altında görünür.	Uyarılar, seçimler, formlar.
Etkinlik	Uygulamadaki benzersiz ekranları veya özellikleri temsil eder.	Gezinme bileşeninden ayrı olarak yönetilen yeni bir Android etkinliği başlatan gezinme grafiğine çıkış noktası görevi verir. Modern Android geliştirmede uygulama tek bir etkinlikten oluşur. Bu nedenle, etkinlik hedeflerinin en iyi şekilde kullanılması, üçüncü taraf etkinlikleriyle etkileşim kurduğunuzda veya taşıma sürecinin bir parçası olarak gerçekleştirilir.

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.

ziyaret edin.

Not: NavController üzerinden grafikle etkileşimde bulunma biçiminiz benzerdir yardımcı olur. Daha fazla bilgi için Bir hedefe gitme rehberine bakın öğrenebilirsiniz.

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.

ziyaret edin.

Dikkat: Bir türü composable() öğesine iletmek yerine route dize veya bir tam sayı id olmalıdır. Ancak bu durum, yönetimi çok daha zorlaştırır. hedefe ek bağımsız değişkenler aktarmanızı sağlar.

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)

Önemli: NavController tek bir NavHost ile ilişkilendirilir. composable'dan bahsetmek istiyorum. NavHost, gezinme için NavController erişimi sağlar grafiğe dönüştürülebilir. Bir hedefe gitmek için NavController kullandığınızda NavController, ilişkilendirilmiş NavHost ile etkileşimde bulunacak.

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.

Not: Bağımsız değişkenler içeren bir rota için data class; bağımsız değişken içermeyen bir rota için object veya data object kullanın.

İsteğe bağlı bağımsız değişkenler için varsayılan değere sahip boş değer atanabilir alanlar oluşturun.

@Serializable
data class Profile(val nickname: String? = null)

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().

Not: Rota sınıfının parametrelerini kullanarak verileri tam tür güvenlikle belirtilen bir hedef. Örneğin, önceki kodda Profile.name, name öğesinin her zaman String olmasını sağlar.

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.

Not: Gezinme bileşeni, tek bir ana etkinliği olan uygulamalar için tasarlanmıştır parçalı hedeflere sahip olmaları gerekir. Ana etkinlik, ziyaret edilmesini sağlayan bir NavHostFragment hedefleri gerektiği gibi değiştirin. Birden fazla etkinlik hedefi olan bir uygulamada her etkinliğin kendi gezinme grafiği var.

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.

Not: DSL örneğinde, geçerli olmayan işlemler olduğundan bu bağlam. DSL'yi kullanırken doğrudan NavController.navigate() 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.