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.
Aby przenieść aplikację do tworzenia wiadomości, wykonaj te czynności:
- Tworzenie nowych ekranów za pomocą funkcji Utwórz.
- Tworząc funkcje, identyfikuj elementy wielokrotnego użytku i zacznij tworzyć bibliotekę typowych komponentów UI.
- 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.
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() } } } }
Więcej informacji znajdziesz w sekcji ComposeView w obszarze Fragments.
Dodawanie nowych funkcji na dotychczasowych ekranach
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>
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.
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>
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)) } } }
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.
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.
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.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Korzystanie z opcji Utwórz w widokach
- Przewijanie
- Przenieś grupę
RecyclerView
na listę leniwych