BottomSheetBehavior 사용법 및 후기

회사 신규 서비스 프로젝트를 진행하면서 골머리를 앓게 만들었던 BottomSheetBehavior...

 

기본적으로 사용하는 이런 기능은 BottomSheetDialog와 BottomSheetBehavior가 있다.

 

회사 프로젝트는 바텀시트에서 지속적으로 스택이 쌓여야 하는 기획이므로 BottomSheetBehavior를 사용할수 밖에 없었다.

 

기본적으로 BottomSheetBehavior를 사용하는 방법이다.

 

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

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/llBottomLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:behavior_expandedOffset="100dp"
        app:behavior_fitToContents="false"
        app:behavior_halfExpandedRatio="0.45"
        app:behavior_peekHeight="100dp"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
    
    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragmentContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

behavior_expandedOffset  : 바텀시트를 끌어 올렸을때 Top영역부터의 마진값

behavior_fitToContents  :  바텀시트 half를 사용할 것인지 유무

behavior_halfExpandedRatio  :  바텀시트 half를 화면에서 몇퍼센트정도의 비율로 할것인지

behavior_peekHeight  :  바텀시트 collapsed 상태의 높이값

 

BottomSheetBehavior 상태 변환 및 스크롤이벤트는 아래의 코드처럼 콜백을 연결한다.

 

BottomSheetBehavior.from(llBottomLayout)?.apply {
    addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
        override fun onStateChanged(bottomSheet: View, newState: Int) {
            when (newState) {

                //하단
                BottomSheetBehavior.STATE_COLLAPSED -> {
                    Logger.e("newState : STATE_COLLAPSED")
                }

                //중간
                BottomSheetBehavior.STATE_HALF_EXPANDED -> {
                    Logger.e("newState : STATE_HALF_EXPANDED")
                }

                //다펼처짐
                BottomSheetBehavior.STATE_EXPANDED -> {
                    Logger.e("newState : STATE_EXPANDED")
                }
            }
        }

        override fun onSlide(bottomSheet: View, slideOffset: Float) {
            Logger.e("newState : onSlide  $slideOffset")
        }
    })
}

 

BottomSheetBehavior를 사용하면서 리사이클러뷰와 스크롤뷰를 사용할 경우 스크롤하는데 큰 문제에 직면하게 된다.

 

상태값이 STATE_HALF_EXPANDED 일 경우 스크롤을 내려도 끝까지 내려가지 않는 문제가 있다.

 

해당 문제는 상태가 STATE_EXPANDED 일 경우에는 스크롤이 정상적으로 끝까지 다 내려가면서 콘텐츠가 다 보이게 된다.

 

즉 반만 올라온 상태의 경우에는 BottomSheetBehavior의 나머지 높이만큼까지를 콘텐츠로 잡아주고 있지 못하기 때문이다.

 

그래서 글쓴이의 경우에는 리사이클러뷰나 스크롤뷰 최하단에 뷰를 만들고 해당뷰의 높이를

 

BottomSheetBehavior의 남은 컨텐츠 부분을 계산하여서 크기를 주는식으로 처리를 진행하였다.

 

bottom.expandedOffset + (bottomView?.height?:0) * bottom.halfExpandedRatio