CoordinatorLayout
to ViewGroup
, który umożliwia korzystanie ze złożonych, nakładających się
układy zagnieżdżone. Jest używany jako kontener do obsługi konkretnego stylu Material Design.
interakcji, np. rozwijanie/zwijanie paska narzędzi i arkuszy u dołu,
w nim zawarte.
W funkcji Compose najbliższy odpowiednik klasy CoordinatorLayout
to
Scaffold
Scaffold
udostępnia przedziały na treści do łączenia elementów Material
elementów składowych typowych wzorców ekranów i interakcji; Na tej stronie dowiesz się,
możesz przenieść swoją implementację CoordinatorLayout
, aby korzystała z Scaffold
Utwórz.
Etapy migracji
Aby przenieść usługę CoordinatorLayout
do Scaffold
, wykonaj te czynności:
We fragmencie kodu poniżej sekcja
CoordinatorLayout
zawiera elementAppBarLayout
w przypadku: zawierająceToolBar
,ViewPager
iFloatingActionButton
. Skomentuj usuń obiektCoordinatorLayout
i jego elementy podrzędne z hierarchii interfejsu użytkownika, a następnie dodaj elementComposeView
, aby ją 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ź odniesienie do
ComposeView
, dodano i wywołaj dla niego metodęsetContent
. W treści metody ustaw elementScaffold
jako jego treść:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
W treści urządzenia
Scaffold
dodaj główną zawartość ekranu w: . Ponieważ główną treścią w powyższym kodzie XML jestViewPager2
, użyjemy funkcjiViewPager2
HorizontalPager
, co jest jego odpowiednikiem w usłudze Compose. Lambda:content
instancjiScaffold
również otrzymuje instancjęPaddingValues
, która powinna zostać został zastosowany do katalogu głównego treści. Aby zastosować to samo, możesz użyć poleceniaModifier.padding
PaddingValues
do:HorizontalPager
.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 na ekranie i przenieść pozostałe widoki podrzędne. Możesz użyć przedziałutopBar
, aby dodaćTopAppBar
orazfloatingActionButton
na miejsceFloatingActionButton
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ą przycisków CoordinatorLayout
,
używasz tagu AppBarLayout
jako kontenera dla paska narzędzi. Możesz wtedy podać
Behavior
do layout_behavior
w formacie XML na powiązanym elemencie przewijanym
Wyświetl (np. RecyclerView
lub NestedScrollView
), aby zadeklarować, jak pasek narzędzi
zwija się podczas przewijania.
Podobny efekt możesz uzyskać w sekcji Compose
TopAppBarScrollBehavior
Aby na przykład zaimplementować funkcje zwijania/rozwijania
aby pasek narzędzi pojawiał się, gdy przewiniesz w górę, wykonaj te czynności:
- Zadzwoń pod numer
TopAppBarDefaults.enterAlwaysScrollBehavior()
, aby utworzyćTopAppBarScrollBehavior
- Przekaż utworzony element
TopAppBarScrollBehavior
elementowiTopAppBar
. Połącz urządzenie
NestedScrollConnection
przez:Modifier.nestedScroll
naScaffold
, dzięki czemu Scaffold może odbierać zagnieżdżone zdarzenia przewijania jako przewijana zawartość przewija się w górę i w dół. Dzięki temu pasek aplikacji może odpowiednio zwijać/rozwijać się 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 */ // ... }
Dostosuj efekt zwijania/rozwijania przewijania
Możesz podać kilka parametrów enterAlwaysScrollBehavior
, aby
dostosować efekt animacji zwijania/rozwijania. TopAppBarDefaults
również
udostępnia inne TopAppBarScrollBehavior
, takie jak
exitUntilCollapsedScrollBehavior
, która rozwija pasek aplikacji tylko wtedy,
zawartość zostanie przewinięta do końca.
Aby utworzyć całkowicie niestandardowy efekt (np. efekt paralaksy), możesz:
utwórz własny NestedScrollConnection
i przesuń pasek narzędzi ręcznie jako
treść przewija się. Zapoznaj się z przykładem przewijania zagnieżdżonego na stronie AOSP, aby dowiedzieć się
przykładowy kod.
Szuflady
Dzięki Widokiom implementujesz panel nawigacji, korzystając z
DrawerLayout
jako widok główny. Z kolei CoordinatorLayout
to
DrawerLayout
w widoku podrzędnym. DrawerLayout
zawiera też inny element podrzędny
np. NavigationView
, aby wyświetlić opcje nawigacji w
szuflady.
W funkcji tworzenia wiadomości możesz wdrożyć panel nawigacji za pomocą
ModalNavigationDrawer
kompozycyjne. ModalNavigationDrawer
oferuje
drawerContent
gniazdo na szufladę i content
na ekran
treści.
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ć SnackbarHost
w funkcji kompozycyjnej, aby wyświetlić 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 o migracji wiadomości CoordinatorLayout
do Compose znajdziesz w
następujące zasoby:
- Komponenty i układy Material Design: dokumentacja Material Design
komponenty obsługiwane przez funkcję tworzenia wiadomości, takie jak
Scaffold
. - Migracja Sunflower do Jetpack Compose: post na blogu, który zawiera
dokumentuje drogę migracji od widoku do tworzenia listy z przykładu Słonecznik
aplikacja, 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ń