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

İç içe yerleştirilmiş grafikler

Uygulamanızın içindeki giriş akışları, sihirbazlar veya diğer alt akışlar genellikle en iyisidir iç içe yerleştirilmiş gezinme grafikleri olarak gösterilir. Bağımsız sistemleri iç içe yerleştirerek alt gezinme akışı bu şekilde aktığında, uygulamanızın kullanıcı arayüzünün ana akışından kavramaya yardımcı olur.

Ayrıca, iç içe yerleştirilmiş grafikler yeniden kullanılabilir. Ayrıca belirli bir düzeyde kapsülleme: İç içe yerleştirilmiş grafiğin dışındaki hedefler doğrudan erişime sahip değildir iç içe yerleştirilmiş grafikteki hedeflerden herhangi birine bağlanabilir. Bunun yerine navigate(): İç içe yerleştirilmiş grafiğin kendisine ve grafiğin geri kalanını etkilemeden değiştirebilirsiniz.

Örnek

Uygulamanızın üst düzey gezinme grafiği kullanıcının uygulamayı başlatırken gördüğü hedef ve uygulamanızda gezinirken gördükleri hedefler.

Şekil 1'deki üst düzey gezinme grafiğini örnek olarak kullanarak, kullanıcının title_screen ve register ekranlarını görmesini zorunlu tutmak istedim. yalnızca uygulama ilk kez başlatıldığında. Daha sonra, kullanıcı bilgileri ve uygulamanın sonraki lansmanlarında bunları doğrudan eşleşme ekranına geçer.

En iyi uygulama olarak eşleşme ekranını öğenin başlangıç hedefi olarak üst düzey gezinme grafiğine eklemek ve başlık ile kayıt ekranlarını iç içe geçmiş grafik üzerinde çalışır:

**Ş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. Eğer Kullanıcı kayıtlı değilse kullanıcıyı kayıt ekranına gidin.

Koşullu gezinme senaryoları hakkında daha fazla bilgi edinmek için Koşullu gezinme başlıklı makaleyi inceleyin.

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. navigation() uygulamasını olduğu gibi kullanıyorsunuz NavGraphBuilder.composable() ve NavGraphBuilder.dialog() işlevleri için kullanılır.

Temel fark, navigation öğesinin oluşturmanız gerekir. Ardından, şu süre içinde composable() ve dialog() numaralı telefonu ararsınız: İç içe yerleştirilmiş grafiğe hedefleri eklemek için navigation() lambda'sı.

Aşağıdaki snippet'in Şekil 2'deki grafiği nasıl uyguladığına bakın: Oluştur:

// 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 gidmek için istediğiniz rota türünü kullanın götürebilir. Çünkü rotaların bir proje yöneticisi olarak herhangi bir ekranın gidebileceği hedefleri tanımlar:

navController.navigate(route = Match)

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ı tutun ve iç içe yerleştirilmiş grafiğe dahil etmek istediğiniz hedefleri seçebilirsiniz.
İçerik menüsünü açmak için sağ tıklayın ve İç İçe Yerleştirilmiş Grafiğe Taşı > Yeni Grafik. Hedefler iç içe yerleştirilmiş bir grafikle çevrilidir. 2. Şekil Gezinme Düzenleyici'de iç içe yerleştirilmiş bir grafik gösterilir:

Ş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 paneli:
- "İç içe yerleştirilmiş grafik" değerini içeren Tür
- ID, iç içe yerleştirilmiş grafik için sistem tarafından atanmış bir kimlik içerir. Bu Kimlik, kodunuzdan iç içe yerleştirilmiş grafiğe referans vermek için kullanılır.
Hedeflerini görmek 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. İç içe yerleştirilmiş gezinme grafiği grafiğe eklendi. Bu gezinme grafiğinin kendi navigation öğesi var öğeleri, kendi kimliği ve startDestination özelliğiyle birlikte iç içe yerleştirilmiş grafikteki ilk hedefe işaret eder:

<?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 bağlayan işlemin kaynak kimliğini iletin şöyle yapabilirsiniz:

Kotlin

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

Java

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

Tasarım sekmesinde, şunu tıklayarak kök grafiğe dönün: Kök.

Aşağıdakilerle diğer gezinme grafiklerine başvurun:

Grafik yapınızı modüler hale getirmenin başka bir yolu da, yapıya tek bir grafik eklemek başka bir, üst gezinme grafiğinde bir <include> öğesi kullanarak. Bu eklenen grafiğin ayrı bir modül veya projede tanımlanmasını sağlar Bu da yeniden kullanılabilirliği en üst düzeye çıkarıyor.

Aşağıdaki snippet, <include> aracını nasıl kullanabileceğinizi gösterir:

<!-- (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 başvurun.