Jetpack Compose obsługuje współdziałanie z widokami – możesz używać Compose w widokach i widoków w Compose. Umożliwia to wdrożenie biblioteki Compose w istniejących aplikacjach opartych na widokach bez konieczności natychmiastowego przenoszenia wszystkich widoków.
Etapy migracji
- Utwórz plan: opracuj szczegółowy plan migracji. Zalecamy utworzenie listy zadań migracji z określonymi priorytetami.
- Określ kandydatów do migracji w formacie XML : zacznij od najmniejszych komponentów, które są węzłami liści w hierarchii, i rozszerzaj plan migracji od dołu do góry, aby obejmował coraz wyższe komponenty w hierarchii. Dobrymi kandydatami do migracji początkowej są małe, bezstanowe usługi z mniejszą liczbą zależności.
- Analiza hierarchii: po zidentyfikowaniu widoku XML do migracji przeanalizuj strukturę układu XML i implementację.
- Uchwyć stan początkowy: przeprowadź test zrzutu ekranu, aby uchwycić stan początkowy wybranego widoku XML.
- Wymaganie wstępne: skonfiguruj zależności Compose Sprawdź, czy projekt ma skonfigurowane zależności Compose i kompilator. Jeśli nie, postępuj zgodnie z instrukcjami w artykule Konfigurowanie zależności Compose i kompilatora.
- Wymaganie wstępne: skonfiguruj motywy Compose Sprawdź, czy projekt ma już skonfigurowane motywy Compose. Jeśli nie, postępuj zgodnie z instrukcjami w sekcji Komponowanie motywów. Zachowaj oryginalny motyw XML, dopóki aplikacja nie będzie w pełni zgodna z Compose. Więcej informacji o wzorcach migracji motywu XML do Compose znajdziesz w artykule Migracja motywu XML do Compose.
- Przenieś widok XML do Compose: rozpocznij konwersję kodu XML na Compose, zastosuj odpowiednie motywy i dodaj podglądy Compose dla przeniesionych komponentów. Więcej informacji o typowych scenariuszach migracji znajdziesz w dodatkowych materiałach. Na przykład w przypadku migracji do interfejsów Lazy API w Compose wykonaj czynności opisane w artykule Migracja RecyclerView do Compose.
- Zastąp użycia: zastąp poprzednie użycia widoku XML, aby używać nowego komponentu Compose. Aby dodać funkcję tworzenia w widokach, wykonaj czynności opisane w sekcji Tworzenie w widokach. Aby dodać widoki w Compose, wykonaj czynności opisane w artykule Widoki w Compose.
- Sprawdź migrację: upewnij się, że stan początkowy zarejestrowany w teście zrzutu ekranu jest taki sam jak podgląd przeniesionego komponentu kompozycyjnego. Jeśli się nie zgadzają, zmodyfikuj nowy interfejs użytkownika i ulepsz go, aby był zgodny ze stanem początkowym. Utwórz nowe testy interfejsu Compose dla nowego komponentu.
- Usuwanie kodu XML: gdy nowo przeniesiony komponent będzie pasować do początkowego interfejsu XML, usuń przestarzały kod widoku XML i jego testy.
Typowe scenariusze migracji
Sprawdź, czy w funkcjach kompozycyjnych używane są rozszerzenia dp i sp (16.dp, 20.sp).
Jeśli w widoku XML występuje element tools:text, użyj go w osobnym komponencie @Preview.
Konwersja atrybutu na modyfikator
Większość atrybutów XML staje się częścią modifier lub parametrami funkcji kompozycyjnej.
| Atrybut XML | Utwórz odpowiednik |
|---|---|
android:layout_width="match_parent" |
Modifier.fillMaxWidth() |
android:layout_height="match_parent" |
Modifier.fillMaxHeight() |
android:layout_width="wrap_content" |
(Domyślne zachowanie, zwykle nie jest potrzebny modyfikator) |
android:padding="Xdp" |
Modifier.padding(X.dp) |
android:layout_margin="Xdp" |
Modifier.padding(X.dp) (Dopełnienie zewnętrzne) |
android:gravity="center" |
contentAlignment = Alignment.Center (pole) lub horizontalAlignment / verticalArrangement (kolumna/wiersz) |
android:background="@color/white" |
Modifier.background(colorResource(R.color.white)) |
android:visibility="gone" |
Zawijanie w blok if (visible) { ... } |
Migracja stylów (styles.xml)
Style XML często łączą wiele atrybutów, aby utworzyć styl. W Compose odbywa się to przez utworzenie wariantu funkcji kompozycyjnej o określonym stylu.
Podaj oddzielne funkcje @Composable nazwane zgodnie ze stylem i komponentem bazowym, aby wskazać różnicę w stylizacji i przypadkach użycia tych komponentów.
- Wzorzec: jeśli element XML używa stylu niestandardowego (np.
style="@style/MyPrimaryButton"), nie próbuj odtwarzać stylu w tekście. Zamiast tego zaproponuj utworzenie konkretnego komponentu. - Przykład:
- XML:
<Button style="@style/MyPrimaryButton" ... /> - Utwórz:
MyPrimaryButton(onClick = { ... })
- XML:
- Typowe grupy atrybutów: jeśli styl ustawia typowe modyfikatory (np. dopełnienie + wysokość), wyodrębnij je do czytelnej właściwości rozszerzenia lub wspólnej zmiennej modyfikatora.