Strategia migracji

Jeśli masz już aplikację opartą na widokach, nie musisz od razu zmieniać całego interfejsu użytkownika. Na tej stronie możesz dodać do swojej dotychczasowej aplikacji nowe komponenty Compose. Aby zacząć korzystać z Compose w aplikacji, przeczytaj artykuł Konfigurowanie Compose w dotychczasowej aplikacji.

Jetpack Compose od samego początku projektowano z funkcją interoperacyjności w trybie wyświetlania. Dzięki tej funkcji możesz przenieść dotychczasową aplikację opartą na widoku do Compose, zachowując możliwość tworzenia nowych funkcji. Aby przejść na Compose, zalecamy stopniową migrację, w której Compose i Views współistnieją w Twoim repozytorium kodu, dopóki aplikacja nie będzie w pełni korzystać z Compose.

Aby przenieść aplikację do Compose:

1. tworzyć nowe ekrany za pomocą narzędzia Compose.
2. Podczas tworzenia funkcji znajdź elementy, które można ponownie wykorzystać, i zacznij tworzyć bibliotekę typowych komponentów interfejsu.
3. Zastąp istniejące funkcje, przechodząc od ekranu do ekranu.

Tworzenie nowych ekranów za pomocą Compose

Najlepszym sposobem, by wdrożyć tę funkcję, jest korzystanie z niej do tworzenia nowych funkcji, które zajmują cały ekran. Dzięki tej strategii możesz dodawać funkcje i korzystać z zalet usługi Compose, jednocześnie zaspokajając potrzeby biznesowe swojej firmy.

Gdy używasz Compose do tworzenia nowych ekranów w dotychczasowej aplikacji, nadal musisz brać pod uwagę ograniczenia jej architektury. Jeśli używasz fragmentów z komponentem Nawigacja, musisz utworzyć nowy fragment z jego zawartością w narzędziu Compose.

Aby użyć metody Compose w fragmentach, w metodzie cyklu życia onCreateView() fragmentu zwracaj wartość ComposeView. ComposeView ma metodę setContent(), w której możesz podać funkcję składającą się z innych funkcji.

class NewFeatureFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
            setContent {
                NewFeatureScreen()
            }
        }
    }
}
MigrationStrategySnippets.kt

Więcej informacji znajdziesz w artykule ComposeView w fragmentach.

Dodawanie nowych funkcji na dotychczasowych ekranach

Możesz też użyć funkcji tworzenia na ekranie opartym na widoku, jeśli nowa funkcja, którą dodajesz, jest częścią istniejącego ekranu. Aby to zrobić, dodaj element ComposeView do hierarchii widoku, tak jak każdy inny widok.

Załóżmy, że chcesz dodać widok podrzędny do LinearLayout. W XML możesz to zrobić w ten sposób:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" />

  <androidx.compose.ui.platform.ComposeView
      android:id="@+id/compose_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />
</LinearLayout>
migration_strategy_existing_screens.xml

Po zwiększeniu widoku możesz później odwołać się do elementu ComposeView w hierarchii i wywołać setContent().

Więcej informacji o ComposeView znajdziesz w dokumentacji interfejsów API dotyczących interoperacyjności.

Utwórz bibliotekę typowych komponentów UI

Podczas tworzenia funkcji za pomocą Compose szybko zauważysz, że tworzysz bibliotekę komponentów. Utworzenie biblioteki popularnych komponentów interfejsu pozwala korzystać z jednego źródła informacji o tych komponentach w aplikacji i zwiększać możliwość ich wielokrotnego użycia. Funkcje, które tworzysz, mogą zależeć od tej biblioteki. Ta metoda jest szczególnie przydatna, jeśli tworzysz niestandardowy system projektowania w Compose.

W zależności od rozmiaru aplikacji ta biblioteka może być osobnym pakietem, modułem lub modułem biblioteki. Więcej informacji o porządkowaniu modułów w aplikacji znajdziesz w przewodniku po modularyzacji aplikacji na Androida.

Zastępowanie dotychczasowych funkcji za pomocą Compose

Oprócz tworzenia nowych funkcji za pomocą Compose warto stopniowo przenosić istniejące funkcje w aplikacji, aby korzystać z Compose.

Użycie wyłącznie Compose może przyspieszyć proces tworzenia aplikacji, a także zmniejszyć rozmiar pliku APK i czas kompilacji. Więcej informacji znajdziesz w artykule Porównanie wydajności Compose i View.

Proste ekrany

Podczas przenoszenia dotychczasowych funkcji do Compose warto zacząć od prostych ekranów. Proste ekrany to np. ekran powitalny, ekran potwierdzenia czy ekran ustawień, na którym dane wyświetlane w interfejsie są stosunkowo statyczne.

Skopiuj ten plik XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <TextView
      android:id="@+id/title_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/title"
      android:textAppearance="?attr/textAppearanceHeadline2" />

  <TextView
      android:id="@+id/subtitle_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/subtitle"
      android:textAppearance="?attr/textAppearanceHeadline6" />

  <TextView
      android:id="@+id/body_text"
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:text="@string/body"
      android:textAppearance="?attr/textAppearanceBody1" />

  <Button
      android:id="@+id/confirm_button"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="@string/confirm"/>
</LinearLayout>
migration_strategy_xml_example.xml

Plik XML można przepisać w sekcji Komponowanie w kilka linii:

@Composable
fun SimpleScreen() {
    Column(Modifier.fillMaxSize()) {
        Text(
            text = stringResource(R.string.title),
            style = MaterialTheme.typography.headlineMedium
        )
        Text(
            text = stringResource(R.string.subtitle),
            style = MaterialTheme.typography.headlineSmall
        )
        Text(
            text = stringResource(R.string.body),
            style = MaterialTheme.typography.bodyMedium
        )
        Spacer(modifier = Modifier.weight(1f))
        Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) {
            Text(text = stringResource(R.string.confirm))
        }
    }
}
MigrationStrategySnippets.kt

Widok mieszany i ekrany tworzenia

Ekran, który zawiera już trochę kodu Compose, to kolejny dobry kandydat do całkowitego przejścia na Compose. W zależności od złożoności ekranu możesz przenieść go w całości do usługi Compose lub poszczególne elementy. Jeśli ekran zaczyna się od Compose w poddrzewiu hierarchii interfejsu, należy kontynuować przenoszenie elementów interfejsu, aż cały ekran będzie w Compose. Takie podejście nazywa się też podejściem od dołu.

Usuwanie fragmentów i komponentu nawigacji

Możesz przejść na komponent nawigacji, gdy usuniesz wszystkie fragmenty i zastąpisz je odpowiednimi komponentami na poziomie ekranu. Składniki na poziomie ekranu mogą zawierać mieszankę treści z edytora i widoku, ale aby umożliwić migrację edytora nawigacji, wszystkie miejsca docelowe nawigacji muszą być komponentami. Do tego czasu nadal używaj komponentu nawigacji opartej na fragmencie w kodzie źródłowym z mieszanymi widokami i Compose. Więcej informacji znajdziesz w artykule Przenoszenie funkcji Nawigacja w Jetpacku do Nawigacji w Compose.

Dodatkowe materiały

Aby dowiedzieć się więcej o przenoszeniu dotychczasowej aplikacji opartej na widoku do Compose, zapoznaj się z tymi dodatkowymi materiałami:

• Ćwiczenie w Codelabs
  • Przechodzenie na Jetpack Compose: w tym ćwiczeniu dowiesz się, jak przenieść fragmenty aplikacji Sunflower do Compose.
• Posty na blogu
  • Migracja Sunflower do Jetpack Compose: dowiedz się, jak aplikacja Sunflower została przeniesiona do Compose przy użyciu strategii opisanej na tej stronie.
  • Jetpack Compose Interop: korzystanie z funkcji tworzenia wiadomości w widoku RecyclerView: dowiedz się, jak wydajnie korzystać z funkcji tworzenia wiadomości w RecyclerView.

Dalsze kroki

Teraz, gdy znasz strategię, której możesz użyć do przeniesienia dotychczasowej aplikacji opartej na widokach, zapoznaj się z interfejsami API umożliwiającymi interoperacyjność, aby dowiedzieć się więcej.