Strategia migracji

Jeśli masz już aplikację opartą na widokach, możesz nie chcieć od razu przepisywać całego interfejsu. Na tej stronie dowiesz się, jak dodać nowe komponenty Compose do istniejącej aplikacji. Aby zacząć korzystać z Compose w aplikacji, zapoznaj się z artykułem Konfigurowanie Compose w istniejącej aplikacji.

Jetpack Compose od samego początku został zaprojektowany z myślą o interoperacyjności z widokami. Dzięki tej funkcji możesz przenieść istniejącą aplikację opartą na widokach do Compose, zachowując możliwość tworzenia nowych funkcji. Aby przejść na Compose, zalecamy migrację przyrostową, podczas której Compose i widoki współistnieją w bazie kodu, dopóki aplikacja nie będzie w pełni oparta na Compose.

Rysunek 1. Etapy migracji aplikacji opartej na widokach do Compose

Aby przenieść aplikację do Compose, wykonaj te czynności:

1. Tworzenie nowych ekranów za pomocą Compose.
2. Podczas tworzenia funkcji identyfikuj elementy wielokrotnego użytku i zacznij tworzyć bibliotekę typowych komponentów interfejsu.
3. Zastępuj istniejące funkcje po jednym ekranie.

Tworzenie nowych ekranów za pomocą Compose

Używanie Compose do tworzenia nowych funkcji, które obejmują cały ekran, to najlepszy sposób na rozpoczęcie korzystania z Compose. Dzięki tej strategii możesz dodawać funkcje i korzystać z zalet Compose, jednocześnie spełniając potrzeby biznesowe firmy.

Rysunek 2. Nowy ekran napisany w Compose

Gdy używasz Compose do tworzenia nowych ekranów w istniejącej aplikacji, nadal pracujesz w ramach ograniczeń architektury aplikacji. Jeśli używasz fragmentów i komponentu Navigation, musisz utworzyć nowy fragment i umieścić jego zawartość w Compose.

Aby używać Compose we fragmencie, zwróć ComposeView w metodzie cyklu życia onCreateView() fragmentu. ComposeView ma metodę setContent(), w której możesz podać funkcję typu „composable”.

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 sekcji ComposeView we fragmentach.

Dodawanie nowych funkcji na istniejących ekranach

Rysunek 3. Istniejący ekran z połączeniem widoków i Compose

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

Załóżmy na przykład, że chcesz dodać widok dziecka do elementu LinearLayout. Możesz to zrobić w pliku XML 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 utworzeniu widoku możesz później odwołać się do ComposeView w hierarchii i wywołać setContent().

Więcej informacji o ComposeView znajdziesz w artykule Interfejsy API interoperacyjności.

Tworzenie biblioteki typowych komponentów interfejsu

Podczas tworzenia funkcji za pomocą Compose szybko zdasz sobie sprawę, że tworzysz bibliotekę komponentów. Utworzenie biblioteki typowych komponentów interfejsu pozwala mieć jedno źródło wiarygodnych danych dla tych komponentów w aplikacji i promować możliwość ponownego wykorzystania. Funkcje, które tworzysz, mogą być zależne od tej biblioteki. Ta technika 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 organizowaniu modułów w aplikacji znajdziesz w przewodniku po modularyzacji aplikacji na Androida.

Zastępowanie istniejących funkcji za pomocą Compose

Oprócz używania Compose do tworzenia nowych funkcji warto stopniowo przenosić istniejące funkcje w aplikacji, aby korzystać z zalet Compose.

Jeśli aplikacja będzie korzystać tylko z Compose, możesz przyspieszyć jej tworzenie, a także zmniejszyć rozmiar pliku APK i skrócić czas kompilacji. Więcej informacji znajdziesz w artykule Porównanie wydajności Compose i View.

Uwaga: korzystaj z testów interfejsu, aby mieć pewność, że podczas migracji nie wprowadzisz regresji. Więcej informacji o testowaniu interfejsu znajdziesz w artykułach Testowanie aplikacji na Androida i Testowanie układu Compose.

Proste ekrany

Najlepszym miejscem na rozpoczęcie migracji istniejących funkcji do Compose są proste ekrany. Proste ekrany mogą być ekranami powitalnymi, ekranami potwierdzenia lub ekranami ustawień, na których dane wyświetlane w interfejsie są względnie statyczne.

Weźmy 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 kilku wierszach:

@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

Ekrany z widokiem mieszanym i Compose

Ekran, który zawiera już trochę kodu Compose, to kolejny dobry kandydat do całkowitej migracji do Compose. W zależności od złożoności ekranu możesz przenieść go w całości do Compose lub robić to stopniowo. Jeśli ekran zaczynał się od Compose w poddrzewie hierarchii interfejsu, kontynuuj migrację elementów interfejsu, aż cały ekran będzie w Compose. To podejście jest też nazywane podejściem oddolnym.

Rysunek 4. Podejście oddolne do migracji mieszanego interfejsu użytkownika z widokami i Compose do Compose

Usuwanie komponentów Fragmenty i Nawigacja

Możesz przejść na Navigation Compose, gdy usuniesz wszystkie fragmenty i zastąpisz je odpowiednimi komponentami na poziomie ekranu. Funkcje kompozycyjne na poziomie ekranu mogą zawierać połączenie treści Compose i View, ale wszystkie miejsca docelowe nawigacji muszą być funkcjami kompozycyjnymi, aby umożliwić migrację do Navigation Compose. Do tego czasu w bazie kodu zawierającej zarówno widoki, jak i elementy Compose, należy nadal używać komponentu nawigacji opartego na fragmentach. Więcej informacji znajdziesz w artykule Migracja z Jetpack Navigation do Navigation Compose.

Uwaga: możesz nadal używać fragmentów do hostowania treści funkcji kompozycyjnych za pomocą komponentu nawigacji opartego na fragmentach, ale zalecanym celem końcowym architektury Compose-first jest całkowite zastąpienie fragmentów funkcjami kompozycyjnymi na poziomie ekranu zarządzanymi przez Navigation Compose.

Dodatkowe materiały

Aby dowiedzieć się więcej o migracji istniejącej aplikacji opartej na widokach do Compose, zapoznaj się z tymi materiałami:

• Ćwiczenie w Codelabs
  • Migracja do Jetpack Compose: z tego ćwiczenia dowiesz się, jak przenieść fragmenty aplikacji Sunflower do Compose.
• Posty na blogu
  • Migracja Sunflower do Jetpack Compose: dowiedz się, jak Sunflower został przeniesiony do Compose przy użyciu strategii opisanej na tej stronie.
  • Interoperacyjność Jetpack Compose: używanie Compose w RecyclerView: dowiedz się, jak wydajnie używać Compose w RecyclerView.

Dalsze kroki

Teraz, gdy znasz już strategię migracji istniejącej aplikacji opartej na widokach, zapoznaj się z interfejsami API interoperacyjności, aby dowiedzieć się więcej.