Android Jetpack Compose の BottomSheetScaffold で3つの展開状態をやりたい

こちらの記事は、LUUP のTVCM放映に合わせた一足早い「Luup Developers Advent Calendar 2024」の6日目の記事です。

こんにちは、Luup Androidチーム所属の土谷です。
みなさん、Android Google マップでやっているあのUI、標準APIでどうやってやるの？と思うこと多いですよね。
現在地アイコン、ボトムシートの展開状態、など。
今回はボトムシートの展開状態について焦点を当ててみようかなと思います。

Android Googleマップのボトムシートの高さが三段階になっているあれをやりたい！

普段、Android Googleマップのアプリを触っている人ならばよくみるやつです。
こんなやつ。

閉じた	部分的に展開	完全に展開

残念ながら、標準APIでは「非表示・ハーフ・フル」の状態しか表現できません。
https://developer.android.com/reference/kotlin/androidx/compose/material3/SheetState

ライブラリーを使って実現してみる

調べてみたところ、いい感じのライブラリーを見つけたので導入してみます。
https://github.com/Morfly/advanced-bottomsheet-compose

インストール

下記の依存を追加します。
※バージョンは執筆時点の最新です。

dependencies {
    implementation("io.morfly.compose:advanced-bottomsheet-material3:0.1.0")
}

ボトムシートの値（状態）を表すenumクラスを定義

enum class SheetValue {
    Collapsed, // 折り畳まれた状態
    PartiallyExpanded, // ハーフ
    Expanded, // フル
}

rememberBottomSheetState 関数を使って BottomSheetState のインスタンスを作成

import io.morfly.compose.bottomsheet.material3.rememberBottomSheetState

/..

val sheetState = rememberBottomSheetState(
    initialValue = SheetValue.PartiallyExpanded,
    defineValues = {
        // ボトムシートの高さは100dp
        SheetValue.Collapsed at height(100.dp)
        // ボトムシートのオフセットは画面の60%の位置（画面の40%を占める）
        SheetValue.PartiallyExpanded at offset(percent = 60)
        // ボトムシートの高さはコンテンツの高さと同じ
        SheetValue.Expanded at contentHeight
    }
)

rememberBottomSheetScaffoldState 関数を使って BottomSheetScaffold にセット

import io.morfly.compose.bottomsheet.material3.BottomSheetScaffold
import io.morfly.compose.bottomsheet.material3.rememberBottomSheetScaffoldState

/..

val scaffoldState = rememberBottomSheetScaffoldState(sheetState)

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = {
    	Box(modifier = Modifier.fillMaxSize())
    },
    sheetContainerColor = Color.White,
) { innerPadding ->
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(innerPadding),
        contentAlignment = Alignment.Center,
    ) {
    	// シートのコンテンツ
    }
}

実行結果

感想

今回は「実は標準APIで難しいあのUI」について解説しました。
世間ではJetpack Composeへ移行中のチームも多いと思います。
しかし、まだまだComposeでは実現するのが難しいことそれなりにありますよね（プロダクト要件的にも）。
今回紹介しきれなかったことも多いのでより詳しく知りたい方がいればGithubのREADMEを読んでください。
https://github.com/Morfly/advanced-bottomsheet-compose

今回導入してみた際に使ったリポジトリーも公開しています。
よかったらこちらも参考にしてみてください。
https://github.com/luup-tsuchiya/advanced-bottomsheet-compose-sample

最後に

Luup では、一緒に開発してくださるソフトウェアエンジニアを積極的に募集しています。
カジュアル面談も実施しておりますのでぜひお気軽にお声掛けください。
https://recruit.luup.sc/

参考リンク

• Material3 Bottom sheets
• Material3 BottomSheetScaffold