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 iç içe yerleştirilmiş gezinme grafikleri olarak gösterilir. Bu şekilde kendi kendine yeten alt gezinme akışlarını iç içe yerleştirerek uygulamanızın kullanıcı arayüzünün ana akışını daha kolay anlayabilir ve yönetebilirsiniz.

Ayrıca iç içe yerleştirilmiş grafikler yeniden kullanılabilir. Ayrıca bir düzeyde kapsayıcıdırlar. İç içe yerleştirilmiş grafiğin dışındaki hedefler, iç içe yerleştirilmiş grafiğin içindeki hedeflerin hiçbirine doğrudan erişemez. Bunun yerine, iç mantığın grafiğin geri kalanını etkilemeden değişebileceği iç içe yerleştirilmiş grafiğe navigate() bağlanmalıdır.

Örnek

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

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

En iyi uygulama olarak, eşleşme 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 kullanıcıyı kayıt ekranına yönlendirin.

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

Oluştur

Oluşturma'yı 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() işlevini NavGraphBuilder.composable() ve NavGraphBuilder.dialog() işlevleri gibi kullanırsınız.

Başlıca fark, navigation'ün yeni bir hedef yerine iç içe yerleştirilmiş bir grafik oluşturmasıdır. Ardından, iç içe yerleştirilmiş grafiğe hedef eklemek için navigation()'nin lambda işlevinde composable() ve dialog() işlevlerini çağırırsınız.

Aşağıdaki snippet'in, Compose işlevini kullanarak 2. görseldeki grafiği 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 }
                   }
               }
           )
       }
   }
}

Doğrudan iç içe yerleştirilmiş bir hedefe gitmek için diğer hedeflerde kullandığınız bir rota türünü 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)

başlıklı makaleyi inceleyin.

XML

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

Gezinme Düzenleyici'de Üst Karakter tuşunu basılı tutarken 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 Gömülü Grafiğe Taşı > Yeni Grafik'i seçin. Hedefler iç içe yerleştirilmiş bir grafiğe yerleştirilir. Şekil 2'de, Gezinme Düzenleyici'deki iç içe yerleştirilmiş bir grafik gösterilmektedir:

Şekil 2. Gezinme Düzenleyici'deki iç içe yerleştirilmiş grafik
İç içe yerleştirilmiş grafiği tıklayın. Özellikler panelinde aşağıdaki özellikler görünür:
- "İç İçe Gömülü Grafik" içeren Tür
- İç içe yerleştirilmiş grafik için sistem tarafından atanan kimliği içeren ID. Bu kimlik, kodunuzdan iç içe yerleştirilmiş grafiğe referans vermek için kullanılır.
Hedeflerini göstermek için iç içe yerleştirilmiş grafiği çift tıklayın.

XML görünümüne geçmek için Metin sekmesini tıklayın. Grafike iç içe yerleştirilmiş bir gezinme grafiği eklendi. Bu gezinme grafiğinin kendi kimliği ve iç içe yerleştirilmiş grafikteki ilk hedefi gösteren bir startDestination özelliğinin yanı sıra kendi navigationöğeleri 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 yerleştirilmiş 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 geri dönüp Kök'ü tıklayarak kök grafiğe dönün.

include ile diğer gezinme grafiklerine referans verme

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 eklemedir. Bu, dahil edilen grafiğin ayrı bir modülde veya projede tanımlanmasına olanak tanır ve yeniden kullanılabilirliği en üst düzeye çıkarır.

Aşağıdaki snippet'te <include> değerini 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 göz atın.

Codelab uygulamaları

Jetpack Navigation hakkında bilgi edinin.

Videolar

Android Jetpack: Gezinme denetleyicisiyle kullanıcı arayüzü gezinmesini yönetme (Google I/O '18)