Jeśli masz już aplikację opartą na widokach, nie musisz od razu zmieniać całego interfejsu użytkownika. Na tej stronie możesz dodawać do istniejącej aplikacji nowe komponenty Compose. Aby zacząć korzystać z Compose w aplikacji, przeczytaj artykuł Konfigurowanie Compose w istniejącej aplikacji.
Jetpack Compose został od początku zaprojektowany z uwzględnieniem interoperacyjności z View. Dzięki tej funkcji możesz przenieść dotychczasową aplikację opartą na widoku do Compose, zachowując 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.
Aby przenieść aplikację do Compose:
- tworzyć nowe ekrany za pomocą narzędzia Compose.
- Podczas tworzenia funkcji znajdź elementy, które można ponownie wykorzystać, i zacznij tworzyć bibliotekę typowych komponentów interfejsu.
- Zastąp istniejące funkcje, przechodząc od ekranu do ekranu.
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.
Gdy używasz usługi Compose do tworzenia nowych ekranów w dotychczasowej aplikacji, nadal musisz brać pod uwagę ograniczenia związane z jej architekturą. Jeśli używasz fragmentów i komponentu nawigacji, musisz utworzyć nowy fragment i umieścić jego zawartość w edytorze.
Aby użyć metody Compose w fragmentach, w metodzie cyklu życia onCreateView() fragmentu zwracaj wartość ComposeView. 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()
}
}
}
}
Więcej informacji znajdziesz w artykule ComposeView w fragmentach.
Dodawanie nowych funkcji na dotychczasowych ekranach
Możesz też użyć funkcji tworzenia na ekranie opartym na 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, że chcesz dodać widok podrzędny do 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>
Po rozwinięciu widoku możesz później odwoływać się do elementu ComposeView w hierarchii i wywoływać funkcję setContent().
Aby dowiedzieć się więcej o ComposeView, zapoznaj się z interfejsami API umożliwiającymi współdziałanie.
Tworzenie biblioteki typowych komponentów interfejsu
Podczas tworzenia funkcji za pomocą Compose szybko zauważysz, że tworzysz bibliotekę komponentów. Utworzenie biblioteki typowych komponentów interfejsu pozwala mieć w aplikacji jeden spójny zbiór 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 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 dotychczasowych funkcji za pomocą Compose
Oprócz tworzenia nowych funkcji za pomocą Compose warto stopniowo przenosić istniejące funkcje w aplikacji, aby korzystać z Compose.
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
Podczas przenoszenia dotychczasowych funkcji do Compose warto zacząć od prostych ekranów. Proste ekrany to np. ekran powitalny, ekran potwierdzenia lub ekran ustawień, na 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>
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))
}
}
}
Widok mieszany i ekran tworzenia
Ekran, który zawiera już trochę kodu Compose, jest kolejnym dobrym kandydatem do całkowitego przejścia na Compose. W zależności od złożoności ekranu możesz przenieść go w całości do usługi Compose lub poszczególne jego elementy. Jeśli ekran rozpoczął 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ż podejściem od dołu.
Usuwanie fragmentów i komponentu nawigacji
Możesz przejść na komponenty nawigacji, gdy usuniesz wszystkie fragmenty i zastąpisz je odpowiednimi komponentami na poziomie ekranu. 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 w bazie kodu mieszanego (kodu źródłowego View i Compose) nadal używaj komponentu nawigacji opartej na fragmencie. Więcej informacji znajdziesz w artykule Przenoszenie funkcji Nawigacja w Jetpacku do Nawigacji w Compose.
Dodatkowe materiały
Aby dowiedzieć się więcej o przenoszeniu dotychczasowej aplikacji opartej na widoku do Compose, zapoznaj się z tymi dodatkowymi materiałami:
- Ćwiczenie w Codelabs
- Przechodzenie na Jetpack Compose: w tym ćwiczeniu dowiesz się, jak przenieść fragmenty aplikacji Sunflower do Compose.
- Posty na blogu
- Przenoszenie Sunflower do Jetpack Compose: dowiedz się, jak przenieść Sunflower do Compose, korzystając ze strategii opisanej na tej stronie.
- Jetpack Compose Interop: Using Compose in a RecyclerView:
Dowiedz się, jak efektywnie używać Compose w
RecyclerView.
Dalsze kroki
Teraz, gdy znasz strategię, której możesz użyć do przeniesienia dotychczasowej aplikacji opartej na widokach, zapoznaj się z interfejsami API umożliwiającymi interoperacyjność, aby dowiedzieć się więcej.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy obsługa JavaScript jest wyłączona
- Korzystanie z okna tworzenia w widoku
- Przewijanie
- Migracja
RecyclerViewna listę Lazy