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

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

この記事からわかること

  • Android Studio/KotlinBottomSheetBehavior使い方
  • 下部から表示するモーダルビュー実装する方法
  • 状態変化スライド中変化観測するには?

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Androidでモーダルビューを実装する方法

Androidで下部から迫り上がってくるようなモーダルビューを実装するにはBottomSheetBehaviorを使用します。BottomSheetBehaviorマテリアルデザインとして用意されているビューです。

モーダルビューはスライドジェスチャーでコントロールすることが可能で、上にスライドすると全画面に、下にスライドすると非表示にすることができます。

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

公式リファレンス:Sheets: bottom

実装手順

BottomSheetBehaviorを使用してモーダルビューを実装する手順をまとめていきます。

  1. CoordinatorLayoutで大枠を囲う
  2. 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>

これだけでボトムシート(モーダルビュー)の実装が完了です。

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

ボトムシートの高さを指定する

ボトムシートの高さを指定するには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")
        }
    }
)

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index