[Android/Kotlin] 안드로이드 BottomSheetDialogFragment 구현하기

새로 들어가는 프로젝트에서 처음으로 BottomSheetDialogFragment를 구현 할 일이 생겼다.

BottomSheetDialog는 앱의 하단에서 올라오는 팝업창을 구현할 때 사용한다.

---

라이브러리 의존성 추가

implementation 'com.google.android.material:material:1.4.0-alpha01'

xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_view"
    app:behavior_hideable="false"
    app:behavior_peekHeight="0dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:animateLayoutChanges="false"
    android:background="@color/white"
    android:orientation="vertical">
    
    ...
    
    
    </LinearLayout>

BottomSheetDialog를 구현하기 위해서 최상단 LinearLayout에 

app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" 를 추가해야 한다.

이렇게 설정하면 하단에 펼쳐지는 방식으로 자식뷰가 동작하게 된다.

 

 

코드

class BottomCalendar() : BottomSheetDialogFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.bottom_dialog, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
		
        // 팝업 생성 시 전체화면으로 띄우기
        val bottomSheet = dialog?.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)
        val behavior = BottomSheetBehavior.from<View>(bottomSheet!!)
        behavior.state = BottomSheetBehavior.STATE_EXPANDED

		// 드래그해도 팝업이 종료되지 않도록
        behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
            override fun onStateChanged(bottomSheet: View, newState: Int) {
                if (newState == BottomSheetBehavior.STATE_DRAGGING) {
                    behavior.state = BottomSheetBehavior.STATE_EXPANDED
                }
            }

            override fun onSlide(bottomSheet: View, slideOffset: Float) {}
        })
        
    }
}

팝업이 떠오를 때 LinearLayout의 전체 높이가 떠오르는게 아니라 일부만 떠오르고 위로 드래그 할 경우 전체 화면이 뜨게 된다.

나의 경우 팝업을 생성했을 때 바로 전체 화면으로 뜨길 원해서 behavior.state를 STATE_EXPANDED로 주었다.

 

Bottom Sheet Dialog의 특징 중 하나로 아래로 드래그를 할 경우 팝업이 내려가게 된다.

나는 드래그 되지 않고, 팝업에 있는 close 버튼이나 확인 버튼을 통해 팝업이 종료되도록 하기 위해서 addBottomSheetCallback을 추가하여 State가 EXPANDED 하도록 설정했다.

 

 

참고 Behavior 상태

• STATE_EXPANDED : 완전히 펼쳐진 상태

• STATE_COLLAPSED : 접혀있는 상태

• STATE_HIDDEN : 아래로 숨겨진 상태

• STATE_HALF_EXPANDED : 절반으로 펼쳐진 상태

• STATE_DRAGGING : 드래깅 되고 있는 상태

• STATE_SETTING : 드래그/스와이프 직후 고정된 상태