CoordinatorLayout を Compose に移行する

CoordinatorLayout は、複雑で重複した処理を可能にする ViewGroup です。 使用できます。特定のマテリアル デザインを有効にするためのコンテナとして使用されます。 操作(ツールバーやボトムシートの展開/折りたたみなど) 含まれます。

Compose における CoordinatorLayout に最も近いものは、 ScaffoldScaffold は、マテリアルを組み合わせるためのコンテンツ スロットを提供します。 コンポーネントを共通の画面パターンと操作に変換する。このページでは、以下の方法について説明します。 Scaffold を使用するように CoordinatorLayout の実装を移行できます。 作成。

移行手順

CoordinatorLayoutScaffold に移行する手順は次のとおりです。

  1. 以下のスニペットでは、CoordinatorLayoutAppBarLayout が含まれています。 (ToolBarViewPagerFloatingActionButton を含む)。コメント 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" />
    
  2. Fragment または Activity で、ComposeView への参照を取得します。 その setContent メソッドを呼び出します。メソッドの本体で Scaffold をコンテンツとして設定します。

    composeView.setContent {
        Scaffold(Modifier.fillMaxSize()) { contentPadding ->
            // Scaffold contents
            // ...
        }
    }

  3. Scaffold のコンテンツで、画面のメイン コンテンツを できます。上記の XML の主なコンテンツは ViewPager2 であるため、 HorizontalPager: Compose でこれに相当します。content ラムダ Scaffold のメソッドは、PaddingValues のインスタンスも受け取ります。 適用されます。Modifier.padding を使用すると、同じものを適用できます。 PaddingValuesHorizontalPager にマッピング。

    composeView.setContent {
        Scaffold(Modifier.fillMaxSize()) { contentPadding ->
            val pagerState = rememberPagerState {
                10
            }
            HorizontalPager(
                state = pagerState,
                modifier = Modifier.padding(contentPadding)
            ) { /* Page contents */ }
        }
    }

  4. Scaffold が提供する他のコンテンツ スロットを使用して、画面要素を追加する 残りの子ビューを移行しますtopBar スロットを使用すると、 TopAppBarfloatingActionButton スロットを使用して、 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 の Behaviorlayout_behavior ビュー(RecyclerViewNestedScrollView など)を使用してツールバーの スクロールすると折りたたみ/展開します。

Compose では、 TopAppBarScrollBehavior。たとえば、折りたたみ/展開表示を実装するには、 上にスクロールしたときにツールバーが表示されるように設定するには、次の手順を行います。

  1. TopAppBarDefaults.enterAlwaysScrollBehavior() を呼び出して TopAppBarScrollBehavior
  2. 作成した TopAppBarScrollBehaviorTopAppBar に提供します。
  3. 次のデバイスで 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 をルートビューとして指定します。また、お客様のCoordinatorLayoutDrawerLayout の子ビュー。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 に移行する方法については、以下をご覧ください。 次のリソースをご覧ください。