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 dodawać do istniejącej aplikacji nowe komponenty Compose. Aby zacząć korzystać z Compose w aplikacji, przeczytaj artykuł Konfigurowanie Compose w istniejącej aplikacji.

Jetpack Compose został od początku zaprojektowany z uwzględnieniem interoperacyjności z View. 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.

Rysunek 1. Etapy migracji aplikacji opartej na widoku do 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

Korzystanie z Compose do tworzenia nowych funkcji, które obejmują cały ekran, to najlepszy sposób na zwiększenie liczby użytkowników tej usługi. Dzięki tej strategii możesz dodawać funkcje i korzystać z zalet usługi Compose, jednocześnie zaspokajając potrzeby biznesowe swojej firmy.

Rysunek 2. Nowy ekran napisany w Compose

Gdy używasz usługi Compose do tworzenia nowych ekranów w dotychczasowej aplikacji, nadal musisz brać pod uwagę ograniczenia związane z jej architekturą. Jeśli używasz fragmentów i komponentu nawigacji, musisz utworzyć nowy fragment i umieścić jego zawartość w edytorze.

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

Rysunek 3. Istniejący ekran z mieszanymi widokami i edytowaniem

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 rozwinięciu widoku możesz później odwoływać się do elementu ComposeView w hierarchii i wywoływać funkcję setContent().

Aby dowiedzieć się więcej o ComposeView, zapoznaj się z interfejsami API umożliwiającymi współdziałanie.

Tworzenie biblioteki typowych komponentów interfejsu

Podczas tworzenia funkcji za pomocą Compose szybko zauważysz, że tworzysz bibliotekę komponentów. Utworzenie biblioteki typowych komponentów interfejsu pozwala mieć w aplikacji jeden spójny zbiór tych komponentów i promować ich wielokrotne wykorzystanie. Funkcje, które tworzysz, mogą zależeć od tej biblioteki. Ta technika jest szczególnie przydatna, jeśli tworzysz niestandardowy system projektowania w Compose.

W zależności od rozmiaru aplikacji 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.

Uwaga: aby mieć pewność, że podczas migracji nie wprowadzasz regresji, polegaj na testach interfejsu. Aby dowiedzieć się więcej o testowaniu interfejsu użytkownika, zapoznaj się z artykułami Testowanie aplikacji na Androida i Testowanie układu Compose.

Proste ekrany

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

Weź pod uwagę 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 Compose w kilka linijek:

@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 ekran tworzenia

Ekran, który zawiera już trochę kodu Compose, jest kolejnym dobrym kandydatem 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 jego elementy. Jeśli ekran rozpoczął 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.

Rysunek 4. Migracja z mieszanego interfejsu Widoki i Kompozycja do Kompozycji (od dołu do góry)

Usuwanie fragmentów i komponentu nawigacji

Możesz przejść na komponenty 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 w bazie kodu mieszanego (kodu źródłowego View i Compose) nadal używaj komponentu nawigacji opartej na fragmencie. Więcej informacji znajdziesz w artykule Przenoszenie funkcji Nawigacja w Jetpacku do Nawigacji w Compose.

Uwaga: korzystanie z kompozycji nawigacji w aplikacji przeznaczonej tylko do tworzenia wiadomości nie jest warunkiem wstępnym. Możesz nadal używać komponentu Nawigacja na podstawie fragmentów, o ile zachowasz fragmenty na potrzeby hostowania treści kompozytowych.

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
  • Przenoszenie Sunflower do Jetpack Compose: dowiedz się, jak przenieść Sunflower do Compose, korzystając ze strategii opisanej na tej stronie.
  • Jetpack Compose Interop: Using Compose in a RecyclerView: Dowiedz się, jak efektywnie używać Compose 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.