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

Interfejs Navigation Compose API umożliwia przechodzenie między elementami kompozycyjnymi w Compose, korzystając z komponentu Jetpack Navigation, infrastruktury i funkcji.

Na tej stronie dowiesz się, jak przejść z Nawigacji Jetpack opartej na fragmentach na Navigation Compose w ramach większej migracji interfejsu opartej na widoku do Jetpack Utwórz.

Wymagania wstępne migracji

Po zastąpieniu wszystkich elementów Fragmenty z odpowiednimi elementami kompozycyjnymi ekranu. Elementy kompozycyjne ekranu mogą zawierać połączenie tworzenia i wyświetlania treści, ale wszystkie miejsca docelowe nawigacji muszą być composables, aby włączyć migrację usługi Navigation Compose. Do tego czasu nadal używaj komponentu nawigacji opartej na fragmentach w widoku interoperacyjności i Tworzenie bazy kodu. Więcej informacji znajdziesz w dokumentacji interoperacyjności nawigacji i informacjami o nich.

Korzystanie z funkcji tworzenia nawigacji w aplikacji tylko do tworzenia wiadomości nie jest wymagane. Dostępne opcje nadal używaj komponentu nawigacji opartego na fragmentach, jeśli będziesz Fragmenty do hostowania treści kompozycyjnych.

Etapy migracji

Niezależnie od tego, czy stosujesz naszą zalecaną strategię migracji, czy podejmujesz lub inną trasę, dotrzesz do punktu, w którym wszystkie miejsca docelowe nawigacji z elementami kompozycyjnymi ekranu, gdzie fragmenty działają tylko jako kontenery kompozycyjne. W tym miejscu możesz przejść na funkcję Navigation Compose.

Jeśli Twoja aplikacja jest już zgodna ze wzorcem projektu UDF i naszym przewodnikiem , migracja do Jetpack Compose i Navigation Compose nie powinna wymagają dużych refaktoryzacji innych warstw aplikacji oprócz warstwy interfejsu.

Aby przenieść dane do Navigation Compose, wykonaj te czynności:

  1. Dodaj do swojej aplikacji zależność nawigacji.

  2. Utwórz kompozycję App-level i dodaj ją do elementu Activity jako Utwórz punkt wejścia, 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. Skonfiguruj NavController w miejscu, w którym wszystkie elementy kompozycyjne, które wymagają aby się do niego odwołać i mieć do niego dostęp (zazwyczaj znajduje się on w sekcji App lub kompozycyjne). Takie podejście jest zgodne z zasadami przenoszenia państwa pozwala używać NavController jako źródła informacji do nawigacji między ekranami kompozycyjnymi a utrzymaniem tylnego stosu:

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

  4. Utwórz komponent NavHost swojej aplikacji w funkcji kompozycyjnej aplikacji i przekaż navController:

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

    SampleNavHost(navController = navController)
}

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

  5. Dodaj miejsca docelowe (composable), aby utworzyć wykres nawigacji. Jeśli każdy ekran został wcześniej przeniesiony do Utwórz, ten krok składa się tylko wyodrębniam te elementy kompozycyjne ekranu z fragmentów kodu do composable miejsca docelowe:

    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

  6. Jeśli wykonasz instrukcje tworzenia architektury interfejsu Compose, konkretnie jak powinny być przekazywane elementy ViewModel i zdarzenia nawigacji do composable, kolejny krok to zmiana sposobu rozpowszechniania ViewModel dla każdego ekranu. Często można korzystać z wstrzykiwania Hilt i jego integracji za pomocą funkcji Utwórz i Nawigacji na hiltViewModel:

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

  7. Zamień wszystkie findNavController() połączenia nawigacyjne na navController i przekazują je jako zdarzenia nawigacji do każdego ekranu kompozycyjnego, niż cała wartość navController. Ta metoda jest zgodna z najlepszymi metod ujawniania zdarzeń z funkcji kompozycyjnych wywołującym pozwala zachować navController jako jedyne źródło prawdy.

    1. Jeśli wcześniej wtyczka Safe Args była używana do generowania wskazówek dojazdu i działań, zastąp ją trasą – Ścieżka ciągu do funkcji kompozycyjnej, która jest niepowtarzalna dla każdego miejsca docelowego.
    2. Informacje o zastępowaniu bezpiecznych argumentów podczas przekazywania danych znajdziesz w sekcji Nawigacja przy użyciu .

    3. Aby dowiedzieć się, jak zapewnić bezpieczeństwo typów w nawigacji, zapoznaj się z sekcją Bezpieczne argumenty. poniżej.

      @Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = "first") {
        composable("first") {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate("second_screen_route")
                }
            )
        }
        composable("second") {
            SecondScreen(
                onIconClick = {
                    // findNavController().navigate(secondScreenToThirdScreenAction)
                    navController.navigate("third_screen_route")
                }
            )
        }
        // ...
    }
}
      MigrationCommonScenariosSnippets.kt

  8. Usuń wszystkie fragmenty, odpowiednie układy XML, niepotrzebne elementy nawigacyjne itp. zasobów i nieaktualnych zależności fragmentów kodu i Jetpack Navigation.

Informacje o tych samych krokach i więcej informacji związanych z tworzeniem nawigacji znajdziesz w Dokumentacja konfiguracji

Częste zastosowania

Niezależnie od używanego komponentu Nawigacja obowiązują te same zasady obowiązująca nawigacja.

Oto typowe przypadki użycia:

Szczegółowe informacje o tych przypadkach użycia znajdziesz w artykule Nawigacja przy użyciu Utwórz.

Safe Args

W przeciwieństwie do Jetpack Navigation Compose Compose nie obsługuje funkcji Safe Wtyczka Args do generowania kodu. Zamiast tego można zapewnić bezpieczeństwo podczas pisania w narzędziu Navigation Compose tak, aby utworzyć taką strukturę kodu w taki sposób, aby łatwo było pisać. w środowisku wykonawczym.

Pobieranie złożonych danych podczas nawigacji

Navigation Compose opiera się na trasach ciągów znaków i w przeciwieństwie do Jetpack Navigation może nie obsługuje przekazywania niestandardowych elementów Parcelables i Serializable jako argumentów.

Zdecydowanie odradzamy pomijanie złożonych obiektów danych podczas nawigacji. Zamiast tego należy przekazać minimalną wymaganą ilość informacji, takich jak unikalny identyfikator lub innej formy identyfikatora, jako argumentów przy wykonywaniu czynności nawigacyjnych. Zalecenia przechowywać złożone obiekty jako dane w jednym źródle wiarygodnych danych, takich jak dane warstwy danych. Więcej informacji znajdziesz w sekcji Pobieranie złożonych danych podczas nawigacji.

Jeśli fragmenty kodu przekazują złożone obiekty jako argumenty, rozważ refaktoryzację. z kodem – w sposób umożliwiający przechowywanie i pobieranie tych obiektów do warstwy danych. Zobacz repozytorium Now w Androidzie dla przykłady.

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 funkcji tworzenia nawigacji, wszystkie miejsca docelowe muszą być elementami kompozycyjnymi. Możesz śledzić tę prośbę o dodanie funkcji w Issue Tracker.

Animacje przejścia

Obsługa wprowadzania ustawień niestandardowych od Nawigacja 2.7.0-alfa01 przejścia, wcześniej z AnimatedNavHost, są teraz obsługiwane bezpośrednio w NavHost. Przeczytaj informacje o wersji. .

Więcej informacji

Więcej informacji na temat migracji do Navigation Compose znajdziesz w tych artykułach zasoby:

  • Ćwiczenie z programowania w nawigacji (Nawigacja Compose): opanuj podstawy działania funkcji Navigation Compose w ćwiczenia z programowania.
  • Teraz w repozytorium Androida: w pełni funkcjonalna aplikacja na Androida. w całości za pomocą aplikacji Kotlin i Jetpack Compose, które są zgodne z interfejsem Androida i sprawdzonych metod programistycznych, a także obejmuje funkcję Navigation Compose.
  • Migracja Sunflower do Jetpack Compose: post na blogu, który zawiera dokumentuje przebieg migracji przykładowej aplikacji Sunflower – od wyświetleń do Tworzenie wiadomości, które obejmuje też migrację do funkcji Navigation Compose.
  • Jetnews na każdym ekranie: post na blogu z dokumentami refaktoryzacji i migracji próbki Jetnews, aby zapewnić obsługę wszystkich ekranów Jetpack Compose i Navigation Compose.
. .