[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 : 드래그/스와이프 직후 고정된 상태