CoordinatorLayout
to ViewGroup
, który umożliwia tworzenie złożonych, nakładających się i zagnieżdżonych układów. Służy jako kontener, który umożliwia określone interakcje Material Design, takie jak rozwijanie i zwijanie pasków narzędzi oraz arkuszy dolnych, w przypadku widoków zawartych w tym kontenerze.
W Compose najbliższym odpowiednikiem CoordinatorLayout
jest Scaffold
. Scaffold
zapewnia miejsca na treści, w których można łączyć komponenty Material w typowych wzorcach ekranów i interakcjach. Na tej stronie dowiesz się, jak przenieść implementację CoordinatorLayout
, aby używać Scaffold
w Compose.
Etapy migracji
Aby przenieść CoordinatorLayout
do Scaffold
, wykonaj te czynności:
W poniższym fragmencie kodu element
CoordinatorLayout
zawiera elementAppBarLayout
, który zawiera elementyToolBar
,ViewPager
iFloatingActionButton
. UsuńCoordinatorLayout
i jego elementy podrzędne z hierarchii interfejsu i 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 fragmencie lub aktywności uzyskaj odwołanie do elementu
ComposeView
, który właśnie został dodany, i wywołaj na nim metodęsetContent
. W treści metody ustawScaffold
jako jej zawartość:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
W treści
Scaffold
dodaj główną zawartość ekranu. Główna treść w powyższym kodzie XML toViewPager2
, więc użyjemy elementuHorizontalPager
, który jest jego odpowiednikiem w Compose.content
lambdaScaffold
otrzymuje też instancjęPaddingValues
, która powinna zostać zastosowana do głównego elementu treści. Możesz użyćModifier.padding
, aby zastosować ten samPaddingValues
doHorizontalPager
.composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
Użyj innych miejsc na treści, które udostępnia
Scaffold
, aby dodać więcej elementów ekranu i przenieść pozostałe widoki podrzędne. W slocietopBar
możesz dodaćTopAppBar
, a w slociefloatingActionButton
–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 przypadki użycia
Zwijanie i rozwijanie pasków narzędzi
W systemie View, aby zwinąć i rozwinąć pasek narzędzi za pomocą CoordinatorLayout
, używasz elementu AppBarLayout
jako kontenera paska narzędzi. Następnie możesz określić wartości od Behavior
do layout_behavior
w XML w powiązanym widoku z możliwością przewijania (np. RecyclerView
lub NestedScrollView
), aby zadeklarować, jak pasek narzędzi ma się zwijać lub rozwijać podczas przewijania.
W Compose możesz uzyskać podobny efekt za pomocą TopAppBarScrollBehavior
. Aby na przykład wdrożyć zwijany/rozwijany pasek narzędzi, który będzie się pojawiać podczas przewijania w górę, wykonaj te czynności:
- Wywołaj funkcję
TopAppBarDefaults.enterAlwaysScrollBehavior()
, aby utworzyćTopAppBarScrollBehavior
. - Przekaż utworzony
TopAppBarScrollBehavior
doTopAppBar
. Połącz
NestedScrollConnection
za pomocąModifier.nestedScroll
naScaffold
, aby element Scaffold mógł odbierać zagnieżdżone zdarzenia przewijania, gdy zawartość z możliwością przewijania jest przewijana w górę lub w dół. Dzięki temu pasek aplikacji może się odpowiednio zwijać i rozwijać podczas przewijania treści.// 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 */ // ... }
Dostosowywanie efektu zwijania/rozwijania podczas przewijania
Możesz podać kilka parametrów dla enterAlwaysScrollBehavior
, aby dostosować efekt animacji zwijania/rozwijania. TopAppBarDefaults
udostępnia też inne TopAppBarScrollBehavior
, takie jak exitUntilCollapsedScrollBehavior
, który rozwija pasek aplikacji tylko wtedy, gdy zawartość jest przewinięta do samego dołu.
Aby utworzyć całkowicie niestandardowy efekt (np. efekt paralaksy), możesz też utworzyć własny NestedScrollConnection
i ręcznie przesunąć pasek narzędzi podczas przewijania treści. Przykładowy kod znajdziesz w przykładzie zagnieżdżonego przewijania w AOSP.
Szuflady
W przypadku widoków menu nawigacyjne implementujesz za pomocą elementu DrawerLayout
jako widoku głównego. Z kolei CoordinatorLayout
jest widokiem podrzędnym elementu DrawerLayout
. DrawerLayout
zawiera też inny widok podrzędny, np. NavigationView
, który wyświetla opcje nawigacji w panelu.
W Compose możesz wdrożyć panel nawigacyjny za pomocą funkcji kompozycyjnej
ModalNavigationDrawer
. ModalNavigationDrawer
ma drawerContent
miejsce na szufladę i content
miejsce na zawartość ekranu.
ModalNavigationDrawer( drawerContent = { ModalDrawerSheet { Text("Drawer title", modifier = Modifier.padding(16.dp)) HorizontalDivider() 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 Szuflady.
Paski powiadomień
Scaffold
udostępnia snackbarHost
, które może akceptować SnackbarHost
kompozycję do wyświetlania 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 z informacjami.
Więcej informacji
Więcej informacji o migracji CoordinatorLayout
do Compose znajdziesz w tych materiałach:
- Komponenty i układy Material: dokumentacja komponentów Material Design obsługiwanych w Compose, np.
Scaffold
. - Migracja aplikacji Sunflower do Jetpack Compose: post na blogu, w którym opisujemy proces migracji z widoków do Compose w przykładowej aplikacji Sunflower, która zawiera
CoordinatorLayout
.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony.
- Komponenty i układy Material
- Wstawki okien w Compose
- Przewijanie