Bu sayfa, Cloud Translation API ile çevrilmiştir.

İç içe yerleştirilmiş grafikler

Uygulamanızdaki giriş akışları, sihirbazlar veya diğer alt akışlar genellikle en iyi şekilde iç içe yerleştirilmiş gezinme grafikleri olarak temsil edilir. Bağımsız alt gezinme akışlarını bu şekilde iç içe yerleştirmek, uygulamanızın kullanıcı arayüzünün ana akışının anlaşılması ve yönetilmesini kolaylaştırır.

Buna ek olarak, iç içe yerleştirilmiş grafikler yeniden kullanılabilir. Ayrıca, bir kapsayıcılık düzeyi de sağlarlar. İç içe yerleştirilmiş grafiğin dışındaki hedefler, iç içe yerleştirilmiş grafikteki hedeflerin hiçbirine doğrudan erişemez. Bunun yerine, iç içe yerleştirilmiş grafiğin kendisine navigate() eklemelidir. Burada dahili mantık, grafiğin geri kalanını etkilemeden değiştirilebilir.

Örnek

Uygulamanızın üst düzey gezinme grafiği, kullanıcının uygulamayı başlatırken gördüğü ilk hedefle başlamalı ve uygulamanızda hareket ederken gördüğü hedefleri içermelidir.

Örnek olarak Şekil 1'deki üst düzey gezinme grafiğini kullanarak kullanıcının title_screen ve ekranları yalnızca uygulama ilk kez başlattığında kaydetmesini zorunlu kılmak istediğinizi varsayalım. Ardından, kullanıcı bilgileri depolanır ve uygulamanın sonraki başlatmalarında bu bilgileri doğrudan eşleşme ekranına yönlendirmeniz gerekir.

En iyi uygulama olarak eşleme ekranını üst düzey gezinme grafiğinin başlangıç hedefi olarak ayarlayın ve başlık ile kayıt ekranlarını Şekil 1'de gösterildiği gibi iç içe yerleştirilmiş bir grafiğe taşıyın:

**Şekil 2.** Üst düzey gezinme grafiği artık iç içe yerleştirilmiş bir grafik içeriyor.

Eşleşme ekranı açıldığında kayıtlı bir kullanıcı olup olmadığını kontrol edin. Kullanıcı kayıtlı değilse kayıt ekranına gidin.

Koşullu gezinme senaryoları hakkında daha fazla bilgi için Koşullu gezinme bölümüne bakın.

Oluştur

Oluştur'u kullanarak iç içe yerleştirilmiş bir gezinme grafiği oluşturmak için NavGraphBuilder.navigation() işlevini kullanın. Bir grafiğe hedef eklerken navigation(), tıpkı NavGraphBuilder.composable() ve NavGraphBuilder.dialog() işlevleri gibi kullanılır.

En önemli fark, navigation ürününün yeni bir hedef yerine iç içe yerleştirilmiş bir grafik oluşturmasıdır. Daha sonra, iç içe yerleştirilmiş grafiğe hedefler eklemek için navigation() lambda içerisinde composable() ve dialog() çağrılarını yaparsınız.

Aşağıdaki snippet'in Şekil 2'deki grafiği Oluşturma özelliğini kullanarak nasıl uyguladığını düşünün:

// Routes
@Serializable object Title
@Serializable object Register

// Route for nested graph
@Serializable object Game

// Routes inside nested graph
@Serializable object Match
@Serializable object InGame
@Serializable object ResultsWinner
@Serializable object GameOver

NavHost(navController, startDestination = Title) {
   composable<Title> {
       TitleScreen(
           onPlayClicked = { navController.navigate(route = Register) },
           onLeaderboardsClicked = { /* Navigate to leaderboards */ }
       )
   }
   composable<Register> {
       RegisterScreen(
           onSignUpComplete = { navController.navigate(route = Game) }
       )
   }
   navigation<Game>(startDestination = Match) {
       composable<Match> {
           MatchScreen(
               onStartGame = { navController.navigate(route = InGame) }
           )
       }
       composable<InGame> {
           InGameScreen(
               onGameWin = { navController.navigate(route = ResultsWinner) },
               onGameLose = { navController.navigate(route = GameOver) }
           )
       }
       composable<ResultsWinner> {
           ResultsWinnerScreen(
               onNextMatchClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               },
               onLeaderboardsClicked = { /* Navigate to leaderboards */ }
           )
       }
       composable<GameOver> {
           GameOverScreen(
               onTryAgainClicked = {
                   navController.navigate(route = Match) {
                       popUpTo(route = Match) { inclusive = true }
                   }
               }
           )
       }
   }
}

İç içe yerleştirilmiş bir hedefe doğrudan gidmek için diğer herhangi bir hedefe giderken kullandığınız gibi bir rota türü kullanın. Bunun nedeni, rotaların herhangi bir ekranın gidebileceği hedefleri tanımlamak için kullanılan genel bir kavram olmasıdır:

navController.navigate(route = Match)

XML

XML kullanırken iç içe yerleştirilmiş grafiğinizi oluşturmak için Gezinme Düzenleyicisi'ni kullanabilirsiniz. Bunun için aşağıdaki adımları uygulayın:

Gezinme Düzenleyicisi'nde üst karakter tuşunu basılı tutun ve iç içe yerleştirilmiş grafiğe dahil etmek istediğiniz hedefleri tıklayın.
İçerik menüsünü açmak için sağ tıklayın ve İç İçe Grafiğe Taşı > Yeni Grafik'i seçin. Hedefler iç içe yerleştirilmiş bir grafikte gösterilir. Şekil 2'de Gezinme Düzenleyicisi'ndeki iç içe yerleştirilmiş bir grafik gösterilmektedir:

Şekil 2. Gezinme düzenleyicisinde iç içe yerleştirilmiş grafik
İç içe yerleştirilmiş grafiği tıklayın. Aşağıdaki özellikler Özellikler panelinde görünür:
- "İç İçe Grafik"i içeren Tür
- Kimlik: İç içe yerleştirilmiş grafik için sistem tarafından atanan kimliği içerir. Bu kimlik, kodunuzdaki iç içe yerleştirilmiş grafiğe referans vermek için kullanılır.
İç içe yerleştirilmiş grafiği çift tıklayarak hedeflerini görüntüleyin.

XML görünümüne geçmek için Text (Metin) sekmesini tıklayın. Grafiğe iç içe yerleştirilmiş bir gezinme grafiği eklenmiştir. Bu gezinme grafiğinin kendi navigation öğeleri, kendi kimliği ve iç içe yerleştirilmiş grafikteki ilk hedefe işaret eden startDestination özelliği vardır:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:android="http://schemas.android.com/apk/res/android"
   app:startDestination="@id/mainFragment">
   <fragment
       android:id="@+id/mainFragment"
       android:name="com.example.cashdog.cashdog.MainFragment"
       android:label="fragment_main"
       tools:layout="@layout/fragment_main" >
       <action
           android:id="@+id/action_mainFragment_to_sendMoneyGraph"
           app:destination="@id/sendMoneyGraph" />
       <action
           android:id="@+id/action_mainFragment_to_viewBalanceFragment"
           app:destination="@id/viewBalanceFragment" />
   </fragment>
   <fragment
       android:id="@+id/viewBalanceFragment"
       android:name="com.example.cashdog.cashdog.ViewBalanceFragment"
       android:label="fragment_view_balance"
       tools:layout="@layout/fragment_view_balance" />
   <navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient">
       <fragment
           android:id="@+id/chooseRecipient"
           android:name="com.example.cashdog.cashdog.ChooseRecipient"
           android:label="fragment_choose_recipient"
           tools:layout="@layout/fragment_choose_recipient">
           <action
               android:id="@+id/action_chooseRecipient_to_chooseAmountFragment"
               app:destination="@id/chooseAmountFragment" />
       </fragment>
       <fragment
           android:id="@+id/chooseAmountFragment"
           android:name="com.example.cashdog.cashdog.ChooseAmountFragment"
           android:label="fragment_choose_amount"
           tools:layout="@layout/fragment_choose_amount" />
   </navigation>
</navigation>

Kodunuzda, kök grafiği iç içe geçmiş grafiğe bağlayan işlemin kaynak kimliğini iletin:

Kotlin

view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)

Java

Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);

Tasarım sekmesine dönün ve Kök'ü tıklayarak kök grafiğe dönün.

Diğer gezinme grafiklerine referans vermek için şunları kullanın:

Grafik yapınızı modülerleştirmenin bir başka yolu da, üst gezinme grafiğinde bir <include> öğesi kullanarak bir grafiği başka bir grafiğin içine dahil etmektir. Bu, dahil edilen grafiğin ayrı bir modülde veya projede birlikte tanımlanmasını sağlayarak yeniden kullanılabilirliği en üst düzeye çıkarır.

Aşağıdaki snippet'te <include> aracını nasıl kullanabileceğiniz gösterilmektedir:

<!-- (root) nav_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/fragment">

    <strong><include app:graph="@navigation/included_graph" /></strong>

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.myapplication.BlankFragment"
        android:label="Fragment in Root Graph"
        tools:layout="@layout/fragment_blank">
        <strong><action
            android:id="@+id/action_fragment_to_second_graph"
            app:destination="@id/second_graph" /></strong>
    </fragment>

    ...
</navigation>

<!-- included_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    <strong>android:id="@+id/second_graph"</strong>
    app:startDestination="@id/includedStart">

    <fragment
        android:id="@+id/includedStart"
        android:name="com.example.myapplication.IncludedStart"
        android:label="fragment_included_start"
        tools:layout="@layout/fragment_included_start" />
</navigation>

Ek kaynaklar

Gezinme hakkında daha fazla bilgi edinmek için aşağıdaki ek kaynaklara bakın.