CoordinatorLayout
は、複雑で重複した処理を可能にする ViewGroup
です。
使用できます。特定のマテリアル デザインを有効にするためのコンテナとして使用されます。
操作(ツールバーやボトムシートの展開/折りたたみなど)
含まれます。
Compose における CoordinatorLayout
に最も近いものは、
Scaffold
。Scaffold
は、マテリアルを組み合わせるためのコンテンツ スロットを提供します。
コンポーネントを共通の画面パターンと操作に変換する。このページでは、以下の方法について説明します。
Scaffold
を使用するように CoordinatorLayout
の実装を移行できます。
作成。
移行手順
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" />
Fragment または Activity で、
ComposeView
への参照を取得します。 そのsetContent
メソッドを呼び出します。メソッドの本体でScaffold
をコンテンツとして設定します。composeView.setContent { Scaffold(Modifier.fillMaxSize()) { contentPadding -> // Scaffold contents // ... } }
Scaffold
のコンテンツで、画面のメイン コンテンツを できます。上記の XML の主なコンテンツはViewPager2
であるため、HorizontalPager
: Compose でこれに相当します。content
ラムダScaffold
のメソッドは、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
をツールバーのコンテナとして使用します。次に、
関連するスクロール可能な要素に対する XML の Behavior
~layout_behavior
ビュー(RecyclerView
や NestedScrollView
など)を使用してツールバーの
スクロールすると折りたたみ/展開します。
Compose では、
TopAppBarScrollBehavior
。たとえば、折りたたみ/展開表示を実装するには、
上にスクロールしたときにツールバーが表示されるように設定するには、次の手順を行います。
TopAppBarDefaults.enterAlwaysScrollBehavior()
を呼び出してTopAppBarScrollBehavior
。- 作成した
TopAppBarScrollBehavior
をTopAppBar
に提供します。 次のデバイスで
Modifier.nestedScroll
を介してNestedScrollConnection
を接続します:Scaffold
を使用して、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
を作成し、次のようにツールバーを手動でオフセットします。
コンテンツをスクロールします。詳しくは、AOSP のネストされたスクロール サンプルをご覧ください。
見てみましょう。
ドロワー
ビューでは、ナビゲーション ドロワーを実装するには、
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 // ... } }
詳しくは、ドロワーをご覧ください。
スナックバー
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 // ... }
詳しくは、スナックバーをご覧ください。
詳細
CoordinatorLayout
を Compose に移行する方法については、以下をご覧ください。
次のリソースをご覧ください。
- マテリアル コンポーネントとレイアウト: マテリアル デザインに関するドキュメント
Compose でサポートされているコンポーネント(
Scaffold
など) - Sunflower から Jetpack Compose への移行:
Sunflower サンプルのビューから Compose への移行プロセスを文書化
CoordinatorLayout
を含むアプリ。
あなたへのおすすめ
- 注: JavaScript がオフになっている場合はリンクテキストが表示されます
- マテリアル コンポーネントとレイアウト
- Compose のウィンドウ インセット
- スクロール