Przenieś nawigację Jetpack do tworzenia wiadomości w Nawigacji

Interfejs Navigation Compose API umożliwia poruszanie się między komponentami w aplikacji Compose, przy jednoczesnym korzystaniu z komponentu, infrastruktury i funkcji Jetpack Navigation.

Na tej stronie opisano, jak przejść z fragmentów w Jetpack Navigation na nawigację w Jetpack Compose w ramach szerszej migracji interfejsu użytkownika opartego na widokach do Jetpack Compose.

Wymagania wstępne migracji

Możesz przejść na komponenty nawigacyjne, gdy zastąpisz wszystkie fragmenty odpowiednimi komponentami ekranu. Komponenty ekranu mogą zawierać mieszankę treści typu Kompozycja i Wyświetlanie, ale wszystkie miejsca docelowe nawigacji muszą być komponentami, aby umożliwić migrację kompozycji nawigacji. Do tego czasu w kodzie bazującym na interoperacyjności w komponentach View i Compose nadal używaj komponentu nawigacji opartej na fragmencie. Więcej informacji znajdziesz w dokumentacji dotyczącej interoperacyjności nawigacji.

Korzystanie z komponentu Nawigacja w komponencie w aplikacji nie jest warunkiem wstępnym. Możesz nadal używać komponentu nawigacji opartej na fragmentach, o ile zachowasz fragmenty, które przechowują treści do łączenia.

Etapy migracji

Niezależnie od tego, czy stosujesz naszą zalecaną strategię migracji, czy też stosujesz inne podejście, w końcu dojdziesz do punktu, w którym wszystkie miejsca docelowe nawigacji będą składać się z komponentów na ekranie, a fragmenty będą pełnić tylko funkcję komponentów składanych. Na tym etapie możesz przejść na edycję nawigacji.

Jeśli Twoja aplikacja jest już zgodna z wzorcem projektowania UDF i naszym przewodnikiem po architekturze, przejście na Jetpack Compose i Navigation Compose nie powinno wymagać gruntownej refaktoryzacji innych warstw aplikacji (poza warstwą UI).

Aby przejść na kartę Edytowanie trasy:

  1. Dodaj do aplikacji zależność Navigation Compose.

  2. Utwórz kompozyt App-level i dodaj go do Activity jako punkt wejścia do tworzenia, zastępując konfigurację układu widoku:

    class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
        setContent {
            SampleApp(/* ... */)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

  3. Utwórz typy dla każdego miejsca docelowego nawigacji. Użyj wartości data object w przypadku miejsc docelowych, które nie wymagają żadnych danych, oraz wartości data class lub class w przypadku miejsc docelowych, które wymagają danych.

    @Serializable data object First
@Serializable data class Second(val id: String)
@Serializable data object Third

    MigrationCommonScenariosSnippets.kt

  4. Skonfiguruj komponent NavController w miejscu, do którego mają dostęp wszystkie komponenty, które muszą się do niego odwoływać (zazwyczaj jest to komponent App). Takie podejście jest zgodne z zasadami podnoszenia stanu i pozwala używać elementu NavController jako źródła informacji o przemieszczaniu się między składanymi ekranami i zachowywaniu stosu wstecz:

    @Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}
    MigrationCommonScenariosSnippets.kt

  5. Utwórz NavHost aplikacji w komponencie App i przekaż: navController:

    @Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  6. Dodaj composable miejsca docelowe, aby utworzyć graf nawigacyjny. Jeśli wszystkie ekrany zostały już przeniesione do usługi Compose, ten krok będzie polegał tylko na wyodrębnieniu tych ekranów z komponentów docelowych w Fragments:composable

    class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                // FirstScreen(...) EXTRACT FROM HERE
            }
        }
    }
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(/* ... */) // EXTRACT TO HERE
        }
        composable<Second> {
            SecondScreen(/* ... */)
        }
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  7. Jeśli postępujesz zgodnie z instrukcjami dotyczącymi projektowania interfejsu użytkownika Compose, w szczególności dotyczącymi przekazywania zdarzeń ViewModel i nawigacji do komponentów, następnym krokiem jest zmiana sposobu udostępniania ViewModel do każdego komponentu ekranu. Często używasz wstrzyknięcia Hilta i punktu integracji z Compose i Nawigacją za pomocą hiltViewModel:

    @Composable
fun FirstScreen(
    // viewModel: FirstViewModel = viewModel(),
    viewModel: FirstViewModel = hiltViewModel(),
    onButtonClick: () -> Unit = {},
) {
    // ...
}
    MigrationCommonScenariosSnippets.kt

  8. Zastąp wszystkie wywołania nawigacji findNavController() wywołaniami navController i przekazuj je jako zdarzenia nawigacji do każdego ekranu kompozytowego zamiast przekazywać cały obiekt navController. To podejście jest zgodne ze sprawdzonymi metodami ujawniania zdarzeń z funkcji składanych wywołującym i utrzymuje navController jako jedyne źródło danych.

    Dane można przekazać do miejsca docelowego, tworząc instancję klasy trasy zdefiniowanej dla tego miejsca docelowego. Można go uzyskać bezpośrednio z poziomu wpisu w grupie elementów na docelowym poziomie lub za pomocą funkcji ViewModel (SavedStateHandle.toRoute()).

    @Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        composable<First> {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate(Second(id = "ABC"))
                }
            )
        }
        composable<Second> { backStackEntry ->
            val secondRoute = backStackEntry.toRoute<Second>()
            SecondScreen(
                id = secondRoute.id,
                onIconClick = {
                    // findNavController().navigate(secondScreenToThirdScreenAction)
                    navController.navigate(Third)
                }
            )
        }
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  9. Usuń wszystkie fragmenty, odpowiednie układy XML, niepotrzebne elementy nawigacji i inne zasoby oraz nieaktualne zależności od fragmentów i nawigacji Jetpacka.

Te same czynności wraz ze szczegółowymi informacjami o komponencie Navigation Compose znajdziesz w dokumentacji konfiguracji.

Typowe zastosowania

Niezależnie od tego, którego komponentu Nawigacji używasz, obowiązują te same zasady nawigacji.

Typowe zastosowania migracji to:

Więcej informacji o tych zastosowaniach znajdziesz w artykule Przeglądanie za pomocą okna tworzenia.

Pobieranie złożonych danych podczas nawigacji

Stanowczo zalecamy, aby podczas nawigacji nie przekazywać złożonych obiektów danych. Zamiast tego podczas wykonywania działań nawigacyjnych podawaj jako argumenty minimalne wymagane informacje, takie jak unikalny identyfikator lub inna forma identyfikatora. Złożone obiekty należy przechowywać jako dane w jednym źródle informacji, np. w warstwie danych. Więcej informacji znajdziesz w artykule Pobieranie złożonych danych podczas nawigacji.

Jeśli fragmenty przekazują jako argumenty obiekty złożone, rozważ najpierw przekształcenie kodu w sposób umożliwiający przechowywanie i pobieranie tych obiektów z warstwy danych. Przykłady znajdziesz w repozytorium Now in Android.

Ograniczenia

Ta sekcja opisuje obecne ograniczenia dotyczące tworzenia trasy w Nawigacji.

Przyrostowa migracja do Compose w Nawigacji

Obecnie nie można używać funkcji Navigation Compose, jeśli w kodzie nadal używasz fragmentów jako miejsc docelowych. Aby zacząć korzystać z kompozycji nawigacji, wszystkie miejsca docelowe muszą być kompozycjami. Możesz śledzić to żądanie funkcji w panelu Problem Tracker.

Animacje przejścia

Począwszy od wersji Navigation 2.7.0-alpha01 obsługa ustawiania niestandardowych przejść, która wcześniej była dostępna w AnimatedNavHost, jest teraz obsługiwana bezpośrednio w NavHost. Aby dowiedzieć się więcej, przeczytaj informacje o wersji.

Więcej informacji

Więcej informacji o przechodzeniu na narzędzie do tworzenia mapy znajdziesz w tych materiałach:

  • Ćwiczenie praktyczne z komponentem Nawigacja: poznaj podstawy tego komponentu w ramach ćwiczenia praktycznego.
  • W repozytorium Androida: w pełni funkcjonalna aplikacja na Androida, która została w pełni opracowana w Kotlinie i Jetpack Compose zgodnie ze sprawdzonymi metodami projektowania i tworzenia aplikacji na Androida. Zawiera ona też Navigation Compose.
  • Migracja aplikacji Sunflower do Jetpack Compose: wpis na blogu opisujący proces migracji przykładowej aplikacji Sunflower z Views do Compose, który obejmuje też migrację do Nawigacji Compose.
  • Jetnews na każdym ekranie: post na blogu opisujący refaktoryzację i migrację przykładowej aplikacji Jetnews w celu obsługi wszystkich ekranów za pomocą Jetpack Compose i Navigation Compose.