CoordinatorLayout
是一個 ViewGroup
,可啟用複雜、重疊的巢狀版面配置。做為容器,可為其中的檢視畫面啟用特定的 Material Design 互動,例如可展開/收合工具列和底部功能表。
在 Compose 中,最接近 CoordinatorLayout
的項目為 Scaffold
。Scaffold
提供內容版位,可將 Material 元件結合成常見的螢幕模式和互動。本頁面說明如何遷移 CoordinatorLayout
實作,以在 Compose 中使用 Scaffold
。
遷移步驟
如要將 CoordinatorLayout
遷移至 Scaffold
,請按照下列步驟操作:
在下方的程式碼片段中,
CoordinatorLayout
包含AppBarLayout
,其中包含ToolBar
、ViewPager
和FloatingActionButton
。從 UI 階層對CoordinatorLayout
及其子項加上註解,並新增ComposeView
以取代該階層。<!-- <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" />
在片段或活動中,取得剛新增的
ComposeView
參照,並對其呼叫setContent
方法。在方法的主體中,將Scaffold
設為內容:composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
在
Scaffold
的內容中,新增畫面的主要內容。由於上述 XML 中的主要內容是ViewPager2
,因此我們會使用HorizontalPager
,其相當於 Compose。Scaffold
的content
lambda 也會收到應套用至內容根目錄的PaddingValues
例項。您可以使用Modifier.padding
將相同的PaddingValues
套用至HorizontalPager
。composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> val pagerState = rememberPagerState { 10 } HorizontalPager( state = pagerState, modifier = Modifier.padding(contentPadding) ) { /* Page contents */ } } }
使用
Scaffold
提供的其他內容版位來新增更多畫面元素,並遷移剩餘的子項檢視畫面。您可以使用topBar
位置來新增TopAppBar
,並使用floatingActionButton
版位來提供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 */ } } }
常見用途
收合及展開工具列
在 View 系統中,如要使用 CoordinatorLayout
收合及展開工具列,請使用 AppBarLayout
做為工具列的容器。然後,您可以在相關聯的可捲動檢視畫面 (例如 RecyclerView
或 NestedScrollView
) 上,透過 XML 指定 Behavior
至 layout_behavior
,以宣告工具列在捲動時如何收合/展開。
在 Compose 中,您也可以透過 TopAppBarScrollBehavior
達到類似的效果。舉例來說,如要實作收合/展開工具列,以便在您向上捲動時顯示工具列,請按照下列步驟操作:
- 呼叫
TopAppBarDefaults.enterAlwaysScrollBehavior()
以建立TopAppBarScrollBehavior
。 - 將已建立的
TopAppBarScrollBehavior
提供給TopAppBar
。 透過
Scaffold
上的Modifier.nestedScroll
連結NestedScrollConnection
,讓 Scaffold 可在可捲動內容上下捲動時接收巢狀捲動事件。這樣一來,在內容捲動時,包含的應用程式列就能適當收合/展開。// 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 */ // ... }
自訂收合/展開捲動效果
您可以為 enterAlwaysScrollBehavior
提供多個參數,以自訂收合/展開動畫效果。TopAppBarDefaults
也提供其他 TopAppBarScrollBehavior
,例如 exitUntilCollapsedScrollBehavior
,只有在內容捲動到最下方時,才會展開應用程式列。
如要建立完全自訂的效果 (例如視差效果),您也可以自行建立 NestedScrollConnection
,並在內容捲動時手動調整工具列。如需程式碼範例,請參閱 Android 開放原始碼計畫中的「巢狀捲動範例」。
導覽匣
透過 View,您可以使用 DrawerLayout
做為根檢視畫面,以實作導覽匣。因此,CoordinatorLayout
是 DrawerLayout
的子檢視畫面。DrawerLayout
也包含另一個子檢視畫面 (例如 NavigationView
),以便在導覽匣中顯示導覽選項。
在 Compose 中,您可以使用 ModalNavigationDrawer
可組合項來實作導覽匣。ModalNavigationDrawer
為導覽匣提供 drawerContent
版位,以及螢幕內容適用的 content
版位。
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 // ... } }
詳情請參閱「導覽匣」。
Snackbar
Scaffold
提供 snackbarHost
位置,可接受 SnackbarHost
可組合項以顯示 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 // ... }
詳情請參閱 Snackbar。
瞭解詳情
如要進一步瞭解如何將 CoordinatorLayout
遷移至 Compose,請參閱下列資源:
- Material Design 元件和版面配置:Compose 支援的 Material Design 元件說明文件 (例如
Scaffold
)。 - 將 Sunflower 遷移至 Jetpack Compose:記錄從 Sunflower 範例應用程式的 View 遷移至 Compose 的歷程,此網誌文章包含
CoordinatorLayout
。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- Material Design 元件和版面配置
- Compose 中的視窗插邊
- 捲動