Strategia migracji

Jeśli masz już aplikację opartą na widokach, nie musisz od razu zmieniać całego interfejsu użytkownika. Na tej stronie dowiesz się, jak dodać nowe komponenty Compose do istniejącej aplikacji. Aby zacząć korzystać z tej funkcji w aplikacji, przeczytaj artykuł Konfigurowanie funkcji tworzenia wiadomości w istniejącej aplikacji.

Jetpack Compose został od początku zaprojektowany z uwzględnieniem interoperacyjności z View. Oznacza to, że możesz przenieść istniejącą aplikację opartą na widokach do Compose, zachowując jednocześnie 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ępuj istniejące funkcje jeden ekran po drugim.

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 tworzysz nowe ekrany w swojej istniejącej aplikacji za pomocą funkcji Utwórz, nadal podlegasz ograniczeniom architektury aplikacji. Jeśli używasz fragmentów i komponentu nawigacji, musisz utworzyć nowy fragment i umieścić jego zawartość w edytorze.

Aby użyć funkcji Compose we fragmencie, zwróć ComposeView w metodzie cyklu życia onCreateView() Twojego fragmentu. 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

Funkcji Utwórz również możesz użyć na istniejącym ekranie w widoku 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 na przykład, że chcesz dodać widok dziecka do elementu 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.

Tworzenie biblioteki typowych komponentów UI

Tworząc funkcje w Compose, szybko zorientujesz się, że w końcu powstaje biblioteka 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 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 istniejących funkcji funkcją Utwórz

Oprócz tworzenia nowych funkcji za pomocą tej usługi warto też stopniowo przenosić dotychczasowe funkcje aplikacji, aby móc z nich korzystać.

Skonfigurowanie aplikacji tylko w trybie tworzenia wiadomości może przyspieszyć programowanie, a także skrócić czas tworzenia pliku APK i skrócić czas tworzenia aplikacji. Więcej informacji znajdziesz w artykule Porównanie wydajności tworzenia i wyświetlania.

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 na przykład ekran powitalny, ekran potwierdzenia lub ekran ustawień, w 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 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, na którym jest już fragment kodu Compose, można przenieść w całości do Compose. W zależności od tego, jak złożony jest ekran, możesz albo w całości przenieść go do narzędzia Compose, albo wykonać tę czynność pojedynczo. 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. To podejście nazywane jest też metodą 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

Gdy usuniesz wszystkie fragmenty kodu i zastąpisz je odpowiednimi elementami kompozycyjnymi na poziomie ekranu, możesz przejść na pisanie nawigacyjne. 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 Migracja Jetpack Navigation do Navigation Compose.

Uwaga: korzystanie z funkcji Tworzenie nawigacji w aplikacji tylko do tworzenia wiadomości nie jest wymagane. Możesz nadal korzystać z komponentu nawigacji opartego na fragmentach, dopóki zachowasz fragmenty do hostowania treści kompozycyjnych.

Dodatkowe materiały

Aby dowiedzieć się więcej o migracji istniejącej aplikacji opartej na widoku do Compose, zapoznaj się z tymi dodatkowymi zasobami:

• Ć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

Znasz już strategię migracji istniejącej aplikacji działającej w widoku, więc zapoznaj się z interfejsami API interoperacyjności, by dowiedzieć się więcej.