【Kotlin/Android】BottomSheetBehaviorの使い方!下部から表示するモーダルビュー

この記事からわかること
- Android Studio/KotlinのBottomSheetBehaviorの使い方
- 下部から表示するモーダルビューを実装する方法
- 状態変化とスライド中の値の変化を観測するには?
index
[open]
\ アプリをリリースしました /
環境
- Android Studio:Flamingo
- Kotlin:1.8.20
Androidでモーダルビューを実装する方法
Androidで下部から迫り上がってくるようなモーダルビューを実装するにはBottomSheetBehavior
を使用します。BottomSheetBehavior
はマテリアルデザインとして用意されているビューです。
モーダルビューはスライドジェスチャーでコントロールすることが可能で、上にスライドすると全画面に、下にスライドすると非表示にすることができます。

実装手順
BottomSheetBehavior
を使用してモーダルビューを実装する手順をまとめていきます。
- CoordinatorLayoutで大枠を囲う
- LinearLayoutにBottomSheetBehaviorを設定する
「build.gradle(Module:App)」に以下がなければ追加しておく必要があります。
dependencies {
implementation 'com.google.android.material:material:1.5.0'
}
1.CoordinatorLayoutで大枠を囲う
BottomSheetBehavior
を使用するにはCoordinatorLayout
を使用する必要があります。CoordinatorLayout
は子ビュー間の動作を調整するためのUIコンテナです。
これが画面の大枠のUIレイアウトになります。
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
</androidx.coordinatorlayout.widget.CoordinatorLayout>
2.LinearLayoutにBottomSheetBehaviorを設定する
次にボトムシートのレイアウトを実装します。ボトムシートにするためにはapp:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
を指定します。
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/bottom_sheet_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
android:orientation="vertical"
app:behavior_peekHeight="300dp"
app:behavior_hideable="true"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.01" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@color/white"
android:text="ボトムシート。"/>
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" />
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
これだけでボトムシート(モーダルビュー)の実装が完了です。

ボトムシートの高さを指定する
ボトムシートの高さを指定するにはapp:behavior_peekHeight
属性を使用します。
app:behavior_peekHeight="300dp"
下スワイプで非表示になるようにする
ボトムシートを下スワイプで非表示になるようにするにはapp:behavior_hideable
属性を使用します。
app:behavior_hideable="true"
Kotlinから操作する
BottomSheetBehavior
をKotlinから操作するにはまずボトムシートのレイアウトを取得しBottomSheetBehavior.from
メソッドを使用して参照を取得できます。
val bottomSheetLayout: LinearLayout = findViewById(R.id.bottom_sheet_layout)
val behavior = BottomSheetBehavior.from(bottomSheetLayout)
behavior.peekHeight = 300
behavior.isHideable = true
ボタン押下で表示させる
ボタンを押下した際にボトムシートを表示させたい場合はstate
を変更します。
値 | 状態 |
---|---|
STATE_DRAGGING | 掴んで移動中 |
STATE_SETTLING | STATE_EXPANDED、STATE_COLLAPSEDへの遷移中 |
STATE_EXPANDED | 全画面表示 |
STATE_COLLAPSED | 縮小化(peekHeightの高さ)で表示 |
STATE_HIDDEN | 非表示 |
val bottomSheetLayout: LinearLayout = findViewById(R.id.bottom_sheet_layout)
val behavior = BottomSheetBehavior.from(bottomSheetLayout)
// 最初は非表示に設定する
behavior.state = BottomSheetBehavior.STATE_HIDDEN
openButton.setOnClickListener {
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
}
状態変化とスライド中の値の変化を観測する
状態変化とスライド中の値の変化を観測するにはaddBottomSheetCallback
を使用します。
behavior.addBottomSheetCallback(
object: BottomSheetBehavior.BottomSheetCallback() {
override fun onSlide(bottomSheet: View, slideOffset: Float) {
Log.d("BottomSheet", "スライド中")
}
override fun onStateChanged(bottomSheet: View, newState: Int) {
// 状態変化を通知
Log.d("BottomSheet", "状態変化:$newState")
}
}
)
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。