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.
![](https://developer.android.google.cn/static/images/topic/libraries/architecture/navigation-design-graph-top-level.png?authuser=9&hl=tr)
Ş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:
![](https://developer.android.google.cn/static/images/topic/libraries/architecture/navigation-design-graph-nested.png?authuser=9&hl=tr)
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 vestartDestination
ö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.