CoordinatorLayout
to element typu ViewGroup
, który umożliwia obsługę złożonych, nakładających się i zagnieżdżonych układów. Służy jako kontener do obsługi określonych interakcji Material Design, np. rozwijania i zwijania pasków narzędzi oraz arkuszy u dołu, w widokach, które się w nim znajdują.
W funkcji Compose najbliższy odpowiednik klasy CoordinatorLayout
to Scaffold
. Scaffold
udostępnia przedziały na treści, które pozwalają łączyć komponenty Material Design w typowe wzorce ekranu i interakcje. Na tej stronie opisujemy, jak przeprowadzić migrację implementacji CoordinatorLayout
, aby umożliwić korzystanie z Scaffold
w tworzeniu wiadomości.
Etapy migracji
Aby przenieść usługę CoordinatorLayout
do Scaffold
, wykonaj te czynności:
We fragmencie kodu poniżej fragment
CoordinatorLayout
zawiera elementAppBarLayout
obejmującyToolBar
,ViewPager
iFloatingActionButton
. Skomentuj obiektCoordinatorLayout
i jego elementy podrzędne z hierarchii interfejsu użytkownika, a następnie dodaj elementComposeView
, aby go zastąpić.<!-- <androidx.coordinatorlayout.widget.CoordinatorLayout--> <!-- android:id="@+id/coordinator_layout"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="match_parent"--> <!-- android:fitsSystemWindows="true">--> <!-- <androidx.compose.ui.platform.ComposeView--> <!-- android:id="@+id/compose_view"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="match_parent"--> <!-- app:layout_behavior="@string/appbar_scrolling_view_behavior" />--> <!-- <com.google.android.material.appbar.AppBarLayout--> <!-- android:id="@+id/app_bar_layout"--> <!-- android:layout_width="match_parent"--> <!-- android:layout_height="wrap_content"--> <!-- android:fitsSystemWindows="true"--> <!-- android:theme="@style/Theme.Sunflower.AppBarOverlay">--> <!-- AppBarLayout contents here --> <!-- </com.google.android.material.appbar.AppBarLayout>--> <!-- </androidx.coordinatorlayout.widget.CoordinatorLayout>--> <androidx.compose.ui.platform.ComposeView android:id="@+id/compose_view" android:layout_width="match_parent" android:layout_height="match_parent" />
W swoim fragmencie lub aktywności znajdź odwołanie do dodanego przed chwilą
ComposeView
i wywołaj przy nim metodęsetContent
. W treści metody ustawScaffold
jako jej zawartość:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
W treści urządzenia
Scaffold
dodaj główne treści z ekranu. Ponieważ główna treść w powyższym kodzie XML toViewPager2
, użyjemy zmiennejHorizontalPager
, która jest jego odpowiednikiem w usłudze Compose. Funkcja lambdacontent
funkcjiScaffold
otrzymuje też instancjęPaddingValues
, którą należy zastosować do katalogu głównego treści. Aby zastosowaćPaddingValues
doHorizontalPager
, możesz użyć poleceniaModifier.padding
.composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
Użyj innych boksów na treści dostępnych w usłudze
Scaffold
, aby dodać więcej elementów ekranu i przenieść pozostałe widoki podrzędne. Możesz użyć przedziałutopBar
, by dodaćTopAppBar
, afloatingActionButton
, by udostępnićFloatingActionButton
.composeView.setContent { Scaffold( Modifier.fillMaxSize(), topBar = { TopAppBar( title = { Text("My App") } ) }, floatingActionButton = { FloatingActionButton( onClick = { /* Handle click */ } ) { Icon( Icons.Filled.Add, contentDescription = "Add Button" ) } } ) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
Częste zastosowania
Zwijanie i rozwijanie pasków narzędzi
Aby w systemie widoku zwinąć i rozwinąć pasek narzędzi za pomocą elementu CoordinatorLayout
, jako kontenera paska narzędzi musisz użyć elementu AppBarLayout
. Następnie możesz określić w formacie XML od Behavior
do layout_behavior
w powiązanym widoku przewijanym (takim jak RecyclerView
lub NestedScrollView
), aby zadeklarować, jak pasek narzędzi ma się zwijać/rozwijać podczas przewijania.
Podobny efekt możesz uzyskać w sekcji Utwórz za pomocą polecenia TopAppBarScrollBehavior
. Aby np. zaimplementować pasek narzędzi zwijania/rozwijania, tak aby był on wyświetlany przy przewijaniu w górę, wykonaj te czynności:
- Wywołaj
TopAppBarDefaults.enterAlwaysScrollBehavior()
, aby utworzyćTopAppBarScrollBehavior
. - Przekaż utworzony element
TopAppBarScrollBehavior
elementowiTopAppBar
. Połącz
NestedScrollConnection
za pomocąModifier.nestedScroll
wScaffold
, aby scaffold mógł odbierać zagnieżdżone zdarzenia przewijania podczas przewijania zawartości, którą można przewijać w górę i w dół. Dzięki temu pasek aplikacji podczas przewijania może się zwijać/rozwijać.// 1. Create the TopAppBarScrollBehavior val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior() Scaffold( topBar = { TopAppBar( title = { Text("My App") }, // 2. Provide scrollBehavior to TopAppBar scrollBehavior = scrollBehavior ) }, // 3. Connect the scrollBehavior.nestedScrollConnection to the Scaffold modifier = Modifier .fillMaxSize() .nestedScroll(scrollBehavior.nestedScrollConnection) ) { contentPadding -> /* Contents */ // ... }
Dostosuj efekt zwijania/rozwijania przewijania
Aby dostosować efekt animacji zwijania/rozwijania, możesz podać kilka parametrów enterAlwaysScrollBehavior
. TopAppBarDefaults
udostępnia też inne TopAppBarScrollBehavior
, np. exitUntilCollapsedScrollBehavior
, które rozwija pasek aplikacji tylko po przewinięciu treści do końca.
Aby utworzyć całkowicie niestandardowy efekt (np. efekt paralaksy), możesz też utworzyć własny element NestedScrollConnection
i ręcznie odsunąć pasek narzędzi podczas przewijania treści. Przykładowy kod znajdziesz w artykule o zagnieżdżonym przewijaniu w AOSP.
Szuflady
Dzięki widokom możesz wdrożyć panel nawigacji, używając DrawerLayout
jako widoku głównego. CoordinatorLayout
to z kolei widok podrzędny elementu DrawerLayout
. Element DrawerLayout
zawiera też inny widok podrzędny, np. NavigationView
, w którym wyświetlane są opcje nawigacji w szufladzie.
W funkcji tworzenia wiadomości możesz wdrożyć panel nawigacji za pomocą funkcji kompozycyjnej ModalNavigationDrawer
. Moduł ModalNavigationDrawer
ma przedział drawerContent
na panel i content
na zawartość ekranu.
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Text("Drawer title", modifier = Modifier.padding(16.dp)) Divider() NavigationDrawerItem( label = { Text(text = "Drawer Item") }, selected = false, onClick = { /*TODO*/ } ) // ...other drawer items } } ) { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold content // ... } }
Więcej informacji znajdziesz w sekcji Suflady.
Paski powiadomień
Scaffold
udostępnia przedział snackbarHost
, który może zaakceptować funkcję SnackbarHost
kompozycyjną do wyświetlenia Snackbar
.
val scope = rememberCoroutineScope() val snackbarHostState = remember { SnackbarHostState() } Scaffold( snackbarHost = { SnackbarHost(hostState = snackbarHostState) }, floatingActionButton = { ExtendedFloatingActionButton( text = { Text("Show snackbar") }, icon = { Icon(Icons.Filled.Image, contentDescription = "") }, onClick = { scope.launch { snackbarHostState.showSnackbar("Snackbar") } } ) } ) { contentPadding -> // Screen content // ... }
Więcej informacji znajdziesz w sekcji Paski powiadomień.
Więcej informacji
Więcej informacji na temat migracji elementu CoordinatorLayout
do Compose znajdziesz w tych materiałach:
- Komponenty i układy Material Design: dokumentacja komponentów Material Design obsługiwanych w Compose, takich jak
Scaffold
. - Migracja Sunflower do Jetpack Compose: post na blogu dokumentujący migrację z widoku do tworzenia wiadomości w przykładowej aplikacji Sunflower, która zawiera
CoordinatorLayout
.
Polecane dla Ciebie
- Uwaga: tekst linku wyświetla się, gdy JavaScript jest wyłączony
- Komponenty i układy Material Design
- Wstawki w oknach w funkcji tworzenia wiadomości
- Przewiń