Morghen Lethe

プログラミングの備忘録、趣味の事とか書いていきます。

【Android】BottomSheetBehaviorの実装方法メモ

記事見てみると、サポートライブラリが旧情報しか無かったので困惑した為、メモを残そうと思う。
AndroidXで実装する!

こんな感じで実装出来た!

f:id:hiropon_drg:20200319085708j:plain
ButtonSheetBehavior

ボタンを押したら、BottomSheetBehaviorの機能を使って、リストを下から表示させるというもの。

注意点として、レイアウトは「coordinatorlayout」を使わないと実装出来なかった事かな。
使わないでも実装出来るのかは謎い。詳しい人教えて欲しいっす。

レイアウトが他にもいくつかあって、いまいち使い分け方が理解出来ていないので、自分の中での課題ですね。

開発環境

Android Studio = 3.5.3
compileSdkVersion = 29
targetSdkVersion = 29
minSdkVersion = 21
サポート ライブラリ = Androidx
Lang = Java

ソース

package com.hiropon.test;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;

import com.google.android.material.bottomsheet.BottomSheetBehavior;


public class MainActivity extends AppCompatActivity {

    private BottomSheetBehavior behavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // BottomSheetの処理
        View bottomSheet = findViewById(R.id.bottom_sheet);
        behavior = BottomSheetBehavior.from(bottomSheet);
        behavior.setState(BottomSheetBehavior.STATE_HIDDEN);

        ArrayAdapter<String> menu_adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1);
        menu_adapter.add("test1");
        menu_adapter.add("test2");
        menu_adapter.add("test3");
        menu_adapter.add("test4");
        menu_adapter.add("test5");

        ListView menuList = findViewById(R.id.list_menu);
        menuList.setAdapter(menu_adapter);

        Button btnPlayer1 = findViewById(R.id.Button1);
        btnPlayer1.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                if (behavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
                    behavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                } else {
                    behavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                }
            }
        });

    }
}
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:translationZ="2dp"
        tools:layout_editor_absoluteX="-179dp"
        tools:layout_editor_absoluteY="-16dp">

        <LinearLayout
            android:id="@+id/bottom_sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:orientation="vertical"
            app:behavior_hideable="true"
            app:behavior_peekHeight="200dp"
            app:layout_behavior="@string/bottom_sheet_behavior">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginTop="15dp"
                android:text="Menu"
                android:textSize="18sp" />

            <ListView
                android:id="@+id/list_menu"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:divider="@color/colorWhite" />

        </LinearLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

参考リンク

Bottom Sheets の実装方法 - ユーザーインターフェイス - Android 開発入門

[Android] ListView + Bottom Sheet でマテリアルな一覧画面を作ってみた - Qiita

BottomSheetBehaviorを使う - Qiita

縦または横一列に要素を並べるリニアレイアウト (LinearLayout) - ユーザーインターフェイス - Android 開発入門

[Android]CoordinatorLayout利用してみた。 - Qiita