Zwykle najlepiej sprawdzają się przepływy logowania, kreatory i inne elementy podrzędne w aplikacji w postaci zagnieżdżonych wykresów nawigacyjnych. Przez zagnieżdżenie samodzielnej w ten sposób, główny przebieg interfejsu użytkownika aplikacji jest łatwiejszy rozumieć i nim zarządzać.
Poza tym wykresów zagnieżdżonych można używać wielokrotnie. Zapewniają też poziom
hermetyzacja – miejsca docelowe poza zagnieżdżonym wykresem nie mają bezpośredniego dostępu
do dowolnego z miejsc docelowych w zagnieżdżonym wykresie. Zamiast tego
navigate()
do zagnieżdżonego wykresu, gdzie logika wewnętrzna
bez wpływu na pozostałą część wykresu.
Przykład
Wykres nawigacyjny najwyższego poziomu aplikacji powinien zaczynać się od początkowego miejsce docelowe, które widzi użytkownik przy uruchamianiu aplikacji, i powinno zawierać parametr miejsc docelowych, które widzą, poruszając się po Twojej aplikacji.
Na przykładzie wykresu nawigacji najwyższego poziomu z ilustracji 1 załóżmy, chciał, by użytkownik widział ekrany title_screen i register tylko przy pierwszym uruchomieniu aplikacji. Później dane użytkownika i podejmuje odpowiednie działania, do ekranu dopasowania.
Zalecamy ustawienie ekranu dopasowania jako miejsca docelowego na wykresie nawigacyjnym najwyższego poziomu, a następnie przenieś ekrany z tytułem i rejestru do zagnieżdżonego tak jak na ilustracji 1:
Gdy pojawi się ekran dopasowania, sprawdź, czy występuje na nim zarejestrowany użytkownik. Jeśli użytkownik nie jest zarejestrowany, przejdź do ekranu rejestracji.
Więcej informacji na temat scenariuszy warunkowej nawigacji znajdziesz w sekcji Informacje warunkowe nawigacji.
Compose
Aby utworzyć zagnieżdżony wykres nawigacyjny za pomocą funkcji Utwórz, użyj funkcji
NavGraphBuilder.navigation()
. Korzystasz z navigation()
tak samo jak
NavGraphBuilder.composable()
i NavGraphBuilder.dialog()
przy dodawaniu miejsc docelowych do wykresu.
Podstawowa różnica polega na tym, że funkcja navigation
tworzy wykres zagnieżdżony, a nie
nowe miejsce docelowe. Następnie dzwonisz pod numery composable()
i dialog()
w ciągu
Funkcja lambda funkcji navigation()
pozwala dodać miejsca docelowe do zagnieżdżonego wykresu.
Zastanów się, jak ten fragment kodu implementuje wykres z rysunku 2 za pomocą Utwórz:
// 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 }
}
}
)
}
}
}
Aby nawigować bezpośrednio do zagnieżdżonego miejsca docelowego, użyj typu trasy w taki sam sposób, jak do żadnego innego miejsca docelowego. Dzieje się tak, ponieważ trasy to koncepcja globalna używana do Określaj miejsca docelowe, do których mogą przejść każdy ekran:
navController.navigate(route = Match)
XML
Jeśli korzystasz z formatu XML, wykres zagnieżdżony możesz utworzyć w Edytorze nawigacji. W tym celu wykonaj następujące czynności:
- W edytorze nawigacji naciśnij i przytrzymaj klawisz Shift, a następnie kliknij miejsca docelowe, które chcesz uwzględnić na wykresie zagnieżdżonym.
Kliknij prawym przyciskiem myszy, aby otworzyć menu kontekstowe, i wybierz Przenieś do wykresu zagnieżdżonego > Nowy wykres. Miejsca docelowe są przedstawione w zagnieżdżonym wykresie. Rysunek 2 pokazuje zagnieżdżony wykres w Edytorze nawigacji:
Kliknij wykres zagnieżdżony. W sekcji Panel Atrybuty:
- Typ, który zawiera „Zagnieżdżony wykres”.
- Identyfikator: zawiera przypisany przez system identyfikator zagnieżdżonego wykresu. Ten Identyfikator służy do odwoływania się do zagnieżdżonego wykresu w kodzie.
Kliknij dwukrotnie wykres zagnieżdżony, aby wyświetlić jego miejsca docelowe.
Kliknij kartę Tekst, aby przełączyć się na widok XML. Zagnieżdżony wykres nawigacyjny dodano do wykresu. Ten wykres nawigacyjny ma własną wartość
navigation
z własnym identyfikatorem i atrybutemstartDestination
, który wskazuje pierwsze miejsce docelowe na zagnieżdżonym wykresie:<?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>
Przekaż w kodzie identyfikator zasobu działania, który łączy wykres główny na wykresie zagnieżdżonym:
Kotlin
view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)
Java
Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);
- Na karcie Projekt wróć do wykresu głównego, klikając Strona główna.
Zapoznaj się z innymi wykresami nawigacyjnymi z uwzględnieniem
Innym sposobem na modułowe stworzenie struktury grafu jest uwzględnienie jednego wykresu w
inne przy użyciu elementu <include>
na nadrzędnym wykresie nawigacyjnym. Ten
umożliwia zdefiniowanie uwzględnionego wykresu w osobnym module lub projekcie
co pozwala zmaksymalizować
ponowne wykorzystanie.
Ten fragment kodu ilustruje, jak można korzystać z elementu <include>
:
<!-- (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>
Dodatkowe materiały
Aby dowiedzieć się więcej o nawigacji, zapoznaj się z tymi dodatkowymi materiałami.
Próbki
Ćwiczenia z programowania
Filmy
- Android Jetpack: zarządzaj nawigacją w interfejsie za pomocą kontrolera nawigacji (Google I/O 2018).