Strategia migracji

Jeśli masz już aplikację korzystającą z widoków danych, możesz nie chcieć przepisywać od razu całego jej interfejsu. Na tej stronie dowiesz się, jak dodawać nowe komponenty Utwórz do istniejącej aplikacji. Aby zacząć korzystać z tej funkcji w aplikacji, zapoznaj się z artykułem Konfigurowanie funkcji Utwórz w istniejącej aplikacji.

Jetpack Compose od samego początku zaprojektowano z myślą o współdziałaniu widoków danych. Ta funkcja oznacza, że możesz przenieść dotychczasową aplikację opartą na widokach do usługi Compose, zachowując jednocześnie możliwość tworzenia nowych funkcji. Jeśli chcesz przejść na tworzenie, zalecamy migrację przyrostową, w ramach której funkcje tworzenia i widoków będą występować w bazie kodu do czasu, gdy aplikacja będzie w pełni dostępna w Compose.

Rysunek 1. Etapy migracji aplikacji opartej na widokach do tworzenia wiadomości

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

1. Tworzenie nowych ekranów za pomocą funkcji Utwórz.
2. Tworząc funkcje, identyfikuj elementy wielokrotnego użytku i zacznij tworzyć bibliotekę typowych komponentów UI.
3. Zastępuj istniejące funkcje jednym ekranem po kolei.

Tworzenie nowych ekranów za pomocą funkcji Utwórz

Tworzenie nowych funkcji obejmujących cały ekran to najlepszy sposób na rozpoczęcie korzystania z tej funkcji. Dzięki tej strategii możesz dodawać funkcje i korzystać z zalet tworzenia wiadomości, jednocześnie odpowiadając na potrzeby biznesowe Twojej firmy.

Rysunek 2. Nowy ekran w sekcji Utwórz

Gdy używasz funkcji tworzenia do tworzenia nowych ekranów w istniejącej aplikacji, nadal podlegasz ograniczeniom jej architektury. Jeżeli korzystasz z fragmentów i nawigacji, musisz utworzyć nowy fragment, a jego zawartość umieścić w komponencie Utwórz.

Aby użyć funkcji Utwórz we fragmencie, zwróć ComposeView w metodzie cyklu życia onCreateView() fragmentu kodu. ComposeView zawiera metodę setContent(), w której możesz udostępnić funkcję kompozycyjną.

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 w obszarze Fragments.

Dodawanie nowych funkcji na dotychczasowych ekranach

Rysunek 3. Istniejący ekran z różnymi widokami i tworzeniem

Możesz też użyć opcji Utwórz na istniejącym ekranie z widokiem, jeśli nowa funkcja, którą dodajesz, jest częścią istniejącego ekranu. Aby to zrobić, dodaj obiekt ComposeView do hierarchii widoku danych (jak każdy inny widok).

Załóżmy na przykład, że chcesz dodać widok podrzędny do: LinearLayout. Możesz to zrobić za pomocą kodu XML w następujący 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 powiększeniu widoku możesz później odwołać się do elementu ComposeView w hierarchii i wywołać metodę setContent().

Aby dowiedzieć się więcej na temat ComposeView, zapoznaj się z informacjami o interfejsach API interoperacyjności.

Tworzenie biblioteki typowych komponentów UI

Podczas tworzenia funkcji za pomocą funkcji tworzenia wiadomości szybko się zorientujesz, że powstaje biblioteka komponentów. Utworzenie biblioteki typowych komponentów UI zapewnia jednolite źródło danych o tych komponentach w aplikacji i zwiększa możliwość wielokrotnego wykorzystania. Od tej biblioteki mogą zależeć utworzone funkcje. Ta technika jest szczególnie przydatna, gdy tworzysz własny system projektowania w interfejsie.

W zależności od rozmiaru aplikacji może to być osobny pakiet, moduł lub moduł 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

Aby korzystać z możliwości tworzenia wiadomości, musisz nie tylko tworzyć nowe funkcje, ale też stopniowo przenosić obecne funkcje aplikacji.

Ustawienie aplikacji w trybie „Tylko tworzenie wiadomości” może przyspieszyć tworzenie aplikacji, a także skrócić jej rozmiar, a także skrócić czas kompilacji. Więcej informacji znajdziesz w artykule Porównanie wydajności tworzenia i wyświetlania.

Uwaga: zdaj się na testy interfejsu, aby mieć pewność, że podczas migracji nie wprowadzasz regresji. Więcej informacji o testowaniu UI znajdziesz w sekcjach Testowanie aplikacji na Androidzie i Testowanie układu tworzenia wiadomości.

Proste ekrany

Podczas przenoszenia istniejących funkcji do tworzenia wiadomości pierwsze miejsca, na które warto zwrócić uwagę, to proste ekrany. Może to być ekran powitalny, ekran potwierdzenia lub ekran ustawień, na którym dane wyświetlane w interfejsie są stosunkowo statyczne.

Pobierz 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 oknie Compose, używając kilku wierszy:

@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

Różne ekrany widoku i tworzenia wiadomości

Ekran, który zawiera już fragment kodu Compose, to świetny sposób na całkowitą migrację do Compose. W zależności od stopnia złożoności ekranu możesz przenieść go całkowicie do trybu Utwórz lub robić to pojedynczo. Jeśli ekran zaczynał się od tworzenia w drzewie podrzędnym hierarchii interfejsu, będziesz kontynuować migrację elementów interfejsu, dopóki cały ekran nie znajdzie się w obszarze Tworzenie. Takie podejście jest nazywane też podejściem od dołu.

Rysunek 4. Podejście od dołu do przenoszenia mieszanych widoków i interfejsu tworzenia do tworzenia wiadomości

Usuwanie komponentu Fragmenty i Nawigacja

Możesz przejść do tworzenia nawigacji, gdy usuniesz wszystkie fragmenty i zastąpisz je odpowiednimi funkcjami kompozycyjnymi na poziomie ekranu. Elementy kompozycyjne na poziomie ekranu mogą zawierać kombinację tworzenia i wyświetlania treści, ale wszystkie miejsca docelowe nawigacji muszą być elementami kompozycyjnymi, aby można było je przenieść. Do tego czasu używaj komponentu Nawigacja opartego na fragmencie w bazie kodu mieszanego widoku i tworzenia. Więcej informacji znajdziesz w artykule Migracja z nawigacji Jetpack do funkcji Navigation Compose.

Uwaga: korzystanie z funkcji tworzenia wiadomości z nawigacji w aplikacji przeznaczonej tylko do tworzenia wiadomości nie jest wymagane. Możesz nadal używać komponentu Nawigacja opartego na fragmentach, o ile zachowasz fragmenty do hostowania treści kompozycyjnych.

Dodatkowe materiały

Zapoznaj się z tymi dodatkowymi zasobami, aby dowiedzieć się więcej o przenoszeniu istniejącej aplikacji opartej na widokach do usługi Compose:

• Ćwiczenia z programowania
  • Migracja do Jetpack Compose: z tego ćwiczenia w Codelabs dowiesz się, jak przenieść bity przykładowej aplikacji Sunflower do usługi Compose.
• Przykład
  • Słonecznik: zagłęb się w kod przykładowej aplikacji Sunflower, która zawiera zarówno kod wyświetlania, jak i tworzenia wiadomości.
• Posty na blogu
  • Migracja Sunflower do Jetpack Compose: dowiedz się, jak przenieśliśmy Sunflower do Compose przy użyciu strategii opisanej na tej stronie.
  • Jetpack Compose Interop: korzystanie z funkcji Compose w widoku RecyclerView: dowiedz się, jak sprawnie korzystać z funkcji tworzenia w widoku RecyclerView.

Dalsze kroki

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