Strategia migracji

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

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 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.

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.

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

Możesz też użyć funkcji tworzenia na już istniejącym 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 pojedyncze źródło 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 tylko 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 migracji dotychczasowych funkcji do Compose najpierw sprawdź proste ekrany. Proste ekrany to np. ekran powitalny, ekran potwierdzenia czy 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, to kolejny dobry kandydat do całkowitego przejścia na Compose. W zależności od złożoności ekranu możesz go przenieść do usługi Compose w całości lub po kawałku. Jeśli ekran zaczyna się od Compose w poddrzewie hierarchii interfejsu, należy kontynuować przenoszenie elementów interfejsu, aż cały ekran będzie w Compose. Takie podejście nazywa się też od dołu do góry.

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 typu Compose i View, ale aby umożliwić migrację Compose nawigacji, wszystkie miejsca docelowe nawigacji muszą być komponentami. Do tego czasu w bazie kodu mieszanego (z użyciem widoku i komponentu Compose) należy nadal używać komponentu nawigacji opartej na fragmencie. 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
  • 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 wydajnie korzystać z 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 interoperacyjności, aby dowiedzieć się więcej.