Strategia migracji

Jeśli masz już aplikację opartą na widoku, możesz nie chcieć przepisywać jej całej Cały interfejs jednocześnie. Ta strona pomoże Ci dodać nowe komponenty tworzenia wiadomości do istniejącej aplikacji. Aby zacząć korzystać z funkcji tworzenia wiadomości w aplikacji, zobacz Konfigurowanie funkcji tworzenia wiadomości dla istniejącej aplikacji.

Jetpack Compose od samego początku projektowano z funkcją interoperacyjności w trybie wyświetlania. Dzięki tej funkcji możesz przenieść dotychczasową aplikację opartą na widoku do Compose, zachowując możliwość tworzenia nowych funkcji. Aby przejść do funkcji Compose, zalecamy stopniową migrację, w której funkcje tworzenia i wyświetlania bazy kodu aż do momentu, gdy aplikacja będzie w pełni dostępna w narzędziu Compose.

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

1. tworzyć nowe ekrany za pomocą narzędzia Compose.
2. Podczas tworzenia funkcji zidentyfikuj elementy wielokrotnego użytku i zacznij je tworzyć biblioteki typowych komponentów interfejsu użytkownika.
3. Zastępuj istniejące funkcje jeden ekran po drugim.

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

Korzystanie z Utwórz, by tworzyć nowe funkcje zajmujące cały ekran, aby zachęcić użytkowników do wdrożenia usługi Compose. Dzięki tej strategii możesz dodawać nowe funkcje i korzystaj z zalet funkcji tworzenia wiadomości, jednocześnie dbając o na potrzeby firmy.

Gdy używasz funkcji Utwórz do tworzenia nowych ekranów w swojej istniejącej aplikacji, działać zgodnie z ograniczeniami architektury aplikacji. Jeśli używasz Fragmenty i komponent Nawigacja, musisz utworzyć nowy fragment i zawartość w narzędziu Compose.

Aby użyć funkcji Utwórz we fragmencie, zwróć ComposeView w parametrze onCreateView() metoda cyklu życia Twojego fragmentu. ComposeView ma Metoda setContent(), w której można podać 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 artykule ComposeView w fragmentach.

Dodawanie nowych funkcji na dotychczasowych ekranach

Możesz też użyć funkcji tworzenia na istniejącym ekranie opartym na widoku, jeśli nowa funkcja, którą dodajesz, jest częścią istniejącego ekranu. Aby to zrobić, dodaj ComposeView do Pozwala wyświetlać hierarchię tak samo 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 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 zwiększeniu widoku możesz później odwołać się do ComposeView w i wywołać setContent().

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

Utwórz bibliotekę typowych komponentów UI

Tworząc funkcje w Compose, szybko zdasz sobie sprawę, że tworząc bibliotekę komponentów. Tworzenie biblioteki typowych komponentów UI zapewnia jedno źródło wiarygodnych danych dla komponentów aplikacji ułatwiają ponowne wykorzystanie. Tworzone funkcje mogą wtedy zależeć od tej biblioteki. Ten jest szczególnie przydatna, jeśli tworzysz system projektowania niestandardowego Utwórz.

W zależności od rozmiaru aplikacji biblioteka ta może być osobnym pakietem, modułem, lub moduł biblioteczny. Więcej informacji o porządkowaniu modułów w aplikacji znajdziesz w znajdziesz w przewodniku po modularyzacji aplikacji na Androida.

Zastępowanie istniejących funkcji funkcją Utwórz

Możesz nie tylko tworzyć nowe funkcje w funkcji Utwórz, ale też stopniowo przenieść istniejące funkcje aplikacji, aby móc korzystać z funkcji tworzenia wiadomości.

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.

Proste ekrany

Pierwsze kroki podczas migracji istniejących funkcji do Compose są proste ekrany. Może to być ekran powitalny, na ekranie ustawień, na którym dane wyświetlane w interfejsie są względnie 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ż fragment kodu tworzenia wiadomości, za pełną migrację do Compose. W zależności od złożoności ekranu możesz przenieść go w całości do usługi Compose lub zrobić to etapami. 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. Takie podejście nazywa się też od dołu do góry.

Usuwanie fragmentów i komponentu Nawigacja

Gdy usuniesz wszystkie elementy mapy, możesz przejść do Narzędzia nawigacji i zastąp je odpowiednimi elementami kompozycyjnymi na poziomie ekranu. Składniki na poziomie ekranu mogą zawierać mieszankę treści typu Compose i View, ale aby umożliwić migrację funkcji Compose, wszystkie miejsca docelowe nawigacji muszą być komponentami. Do tego czasu nadal używaj Komponent nawigacji oparty na fragmentach w kombinacji widoku i tworzenia bazy kodu. Przeczytaj artykuł Migracja Jetpack Navigation do Navigation Compose, aby uzyskać instrukcje. znajdziesz więcej informacji.

Dodatkowe materiały

Zapoznaj się z dodatkowymi materiałami, by dowiedzieć się więcej o migracji istniejąca aplikacja Widokowa do tworzenia wiadomości:

• Ćwiczenia z programowania
  • Przechodzenie na Jetpack Compose: w tym ćwiczeniu dowiesz się, jak przenieść fragmenty aplikacji Sunflower do Compose.
• Posty na blogu
  • Migracja Sunflower do Jetpack Compose: więcej informacji Aplikacja Sunflower została przeniesiona do funkcji Compose przy użyciu strategii opisanej na tej stronie.
  • Jetpack Compose Interop: Using Compose in a RecyclerView: dowiedz się, jak efektywnie używać Compose w RecyclerView.

Dalsze kroki

Znasz już strategię migracji istniejących kampanii opartych na wyświetleniach aplikacji, zapoznaj się z informacjami na temat interfejsów API współdziałania, aby dowiedzieć się więcej.