🚀

JetpackCompose CoordinatorLayoutを実装してみる

2022/12/13に公開

Android

Jetpack Compose

coordinatorlayout

tech

環境

composeVersion = 1.3.0

composeでCoordinatorLayoutみたいなものを作る時の問題

実直に作ろうとするとxmlで作るよりもややこしくなる
pagerと組み合わせることがほぼできない

この2点が大きく両方を実現することがほぼできないです。

pagerを諦めるのであれば基本的に

こちらを使うと簡単に実装できる印象ではあります。

ではどう作るかという話になりますが

結論composeに固執するのは諦めてxmlで作ろうという話になります

サンプルコード

xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <!-- スクロール時に画面外に消える要素を描画する領域 -->
        <androidx.compose.ui.platform.ComposeView
            android:id="@+id/header_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />

        <!-- スクロールしても画面内に残る領域 -->
        <androidx.compose.ui.platform.ComposeView
            android:id="@+id/toolbar_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.appbar.AppBarLayout>

    <!-- 画面全体に配置するスクロール可能なコンテンツを描画する領域 -->
    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/main_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

compose


@Composable
fun CoordinatorLayout(
    invisibleHeader: @Composable () -> Unit,
    toolbar: @Composable () -> Unit,
    mainContent: @Composable () -> Unit
) {
    AndroidView(
        factory = { context ->
            View.inflate(context, R.layout.coordinator_layout, null)
        },
        update = { layout ->
            with(layout.findViewById<ComposeView>(R.id.header_content)) {
                setContent(invisibleHeader)
            }
            with(layout.findViewById<ComposeView>(R.id.toolbar_content)) {
                setContent(toolbar)
            }
            with(layout.findViewById<ComposeView>(R.id.main_content)) {
                setContent(mainContent)
            }
        }
    )
}

解説

解説も何もxmlで作ってそれをcomposeと併用するという話で

ほぼこちらの引用になります。

一つ注意なのは元記事のものはfactory内に記述されてしまっているので

情報の更新が起きた際に画面の更新が起きません

なのでupdateの返り値にfactoryで作ったlayoutが返ってくるので

そちらを使って作成しようということになります。

将来的にfullComposeで簡単に書ける方法が実装されると嬉しいのですが

当分は無理そうなので無理な時はcomposeに固執せず

xmlと併用する方向で考えていくといいかもしれないですね。

JetpackCompose CoordinatorLayoutを実装してみる

環境

composeでCoordinatorLayoutみたいなものを作る時の問題

サンプルコード

解説

参考記事

Discussion