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

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

Na tej stronie opisano, jak przejść z fragmentu w Jetpack Compose do nawigacji w Jetpack Compose, co jest częścią większej migracji interfejsu użytkownika opartego na widoku do Jetpack Compose.

Wymagania wstępne migracji

Możesz przejść na funkcję Navigation Compose, gdy będziesz w stanie zastąpić wszystkie fragmenty kodu odpowiednimi elementami kompozycyjnymi ekranu. Komponenty ekranu mogą zawierać mieszankę treści typu Compose i View, ale wszystkie miejsca docelowe nawigacji muszą być komponentami, aby umożliwić migrację komponentu Compose. Do tego czasu używaj komponentu nawigacji opartej na fragmentach w widoku interoperacyjności i bazie kodu tworzenia wiadomości. Więcej informacji znajdziesz w dokumentacji dotyczącej interoperacyjności nawigacji.

Korzystanie z komponentu Nawigacja w aplikacji, która zawiera tylko komponent Nawigacja, nie jest warunkiem wstępnym. Możesz nadal używać komponentu Nawigacja na podstawie fragmentów, o ile zachowasz fragmenty, które przechowują Twoje treści kompozytowe.

Etapy migracji

Niezależnie od tego, czy będziesz przestrzegać naszej zalecanej strategii migracji, czy wybrać inne podejście, dotrzesz do punktu, w którym wszystkie miejsca docelowe nawigacji będą elementami kompozycyjnymi ekranu, a fragmenty kodu będą działać tylko jako kontenery kompozycyjne. Na tym etapie możesz przejść do Navigation Compose.

Jeśli Twoja aplikacja jest już zgodna ze wzorcem projektu UDF i naszym przewodnikiem po architekturze, migracja do Jetpack Compose i Navigation Compose nie powinna wymagać dużych refaktoryzacji innych warstw aplikacji poza warstwą interfejsu.

Aby przejść na kartę Edytowanie w układance, wykonaj te czynności:

  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 data object w przypadku miejsc docelowych, które nie wymagają danych, oraz data class lub class w przypadku miejsc, które wymagają danych.

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

    MigrationCommonScenariosSnippets.kt

  4. Skonfiguruj NavController w miejscu, w którym wszystkie komponenty, które muszą się do niego odwoływać, mają do niego dostęp (zwykle 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 przechodzeniu między składanymi ekranami i zarządzaniu stosem 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 miejsca docelowe (composable), aby utworzyć wykres nawigacji. 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 do 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 poszczególnym komponentom 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. Takie podejście jest zgodne ze sprawdzonymi metodami udostępniania wywołującym zdarzeń z funkcji składanych 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. 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 kroki znajdziesz w dokumentacji dotyczącej konfiguracji zawierającej więcej informacji związanych z tworzeniem nawigacji.

Typowe zastosowania

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

Typowe przypadki użycia podczas migracji:

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 należy przekazywać 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 sekcji Pobieranie złożonych danych podczas nawigacji.

Jeśli fragmenty przekazują złożone obiekty jako argumenty, 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 w Androidzie.

Ograniczenia

W tej sekcji opisaliśmy obecne ograniczenia funkcji tworzenia nawigacji.

Migracja przyrostowa do Navigation Compose

Obecnie nie możesz korzystać z funkcji Navigation Compose, jeśli nadal używasz fragmentów kodu jako miejsc docelowych w kodzie. Aby zacząć korzystać z kompozycji nawigacji, wszystkie miejsca docelowe muszą być kompozycjami. Możesz śledzić tę prośbę o dodanie funkcji w narzędziu Issue 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 z programowania w narzędziu Navigation Compose – opanuj podstawy korzystania z funkcji Navigation Compose w ramach ćwiczeń z programowania.
  • W repozytorium Androida: w pełni funkcjonalna aplikacja na Androida, która została w pełni napisana 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, który opisuje proces migracji przykładowej aplikacji Sunflower z Views do Compose, w tym 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.