iOS의 하프 모달을 Android에서도 구현해 보았다 (Kotlin + BottomSheetBehavior)

BottomSheetBehavior를 Kotlin으로 구현한 기사는 별로 없는 느낌이 들기 때문에 기사를 써 보았습니다.
첫 기사 때문에, 이르지 않는 점이 많이 있다고 생각합니다만, 누군가의 참고가 된다고 생각하고 있습니다.

대상 독자

업무로 Android에도 iOS의 하프 모달을 구현하게 된 분 (자신)

개발 환경

macOS Mojave 10.14.4

Android Studio 3.4.1

원래 BottomSheets는 어떤 녀석? 🤔

이미지는 Google Map이며 주변 명소로 쓰여진 곳이 BottomSheet입니다.


아래에서 당겨서 표시하는 사람입니다.

구현 방법

1. 다음 종속성을 app module gradle 파일에 추가

dependencies {
    // MaterialDesign
    implementation 'com.google.android.material:material:1.0.0'
}

2. 레이아웃 리소스 파일을 만듭니다.

<?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">

    <!--他のView--> 

    <!-- 下から引っ張り出すView (BottomSheet) -->
    <LinearLayout
        android:id="@+id/bottomSheetLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        android:orientation="vertical"
        app:behavior_hideable="false"
        app:behavior_peekHeight="56dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        <!-- BottomSheetに表示したいViewを設定する -->

    </LinearLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

포인트는 LinearLayout 로 설정하고 있는 app:layout_behavior 입니다.
app:layout_behavior 에 @string/bottom_sheet_behavior 를 설정하여 설정한 View 를 BottomSheet 로 할 수 있습니다.
주의점입니다만, BottomSheet 로 하고 싶은 View (이 예로 말하면, LinearLayout )는 CoordinatorLayout 의 바로 아래에 배치하지 않으면 에러가 되므로 주의해 주세요.
그 외에 설정하고 있는 app:behavior_xxx 의 설정입니다만,
이 기사 에 상세하게 쓰여져 있으므로, 참조해 주시면 좋겠습니다. 🙇‍♂️
일단, 이번 사용한 설정에 관해서 간단히 해설을 하면,
・BottomSheet의 표시 위치를 설정 (app:behavior_peekHeight="56dp")
・BottomSheet를 화면 밖으로 숨기지 않게 하는 설정 (app:behavior_hideable="false")
됩니다.

3.BottomSheet로 하는 View를 코드로 설정

class MainActivity : AppCompatActivity() {

    private lateinit var bottomSheetBehavior: BottomSheetBehavior<LinearLayout>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // CoordinatorLayout の 直下に配置している View を渡す
        bottomSheetBehavior = BottomSheetBehavior.from(bottomSheetLayout)
    }

여기까지 만들면 다음과 같이 할 수 있다고 생각합니다.

👏👏👏👏👏👏👏👏

마지막으로

타이틀에 Kotlin 이라고 넣어 두면서, 전혀 코드 쓰지 않네요. .
다음 번은 BottomSheet 를 끌어내거나 하는 조작에 의한 state 의 변화 이벤트를 취득해 가고 싶습니다.
이번에 작성한 코드는 여기에 있습니다.
위의 리포지토리를 업데이트하면서 기사도 업데이트합니다.
여기까지 봐 주셔서 감사합니다!