[Android | Kotlin] Bottom Sheet Dialog 개발하기

안녕하세요, 하루플입니다😁

 

Bottom Sheet Dialog를 개발중인 앱에 적용해야해서 커스텀해서 예쁘게 적용을 완료했습니다!

이 Bottom Sheet 라이브러리를 알기전에는 git에서 다른 유저가 개발한 라이브러리를 가져와서 스크롤 되는 화면을 구현했었는데요, 성능적으로나 미관상으로도 좋지 않은 방법이었습니다.

 

Bottom Sheet Dialog를 사용하는 다른 앱을 찾아보았는데요, 제가 사용하던 '스픽' 이라는 영어 스피킹 앱에서 Bottom Sheet Dialog를 이용해 캘린더를 적용한 모습을 볼 수 있었습니다.

 

 

Bottom Sheet Dialog는 위 영상처럼 평소에는 숨겨져 있다가 나타나는 뷰입니다. 그리고 Dialog로 만들어져있기 때문에 Dialog 내부의 함수를 이용할 수 있습니다.

개발하면서 느낀 Dialog의 장점은 상단 작업표시줄까지 깔끔하게 alpha 처리 되어 완성도를 높일 수 있다는 점과, 커스텀해서 복잡한 뷰가 포함되어 있더라도 Dialog가 제거되면 뷰가 완전히 사라지면서 앱 성능을 좋게 유지할 수 있다는 점입니다.

---

 

Bottom Sheet Dialog 개발

먼저 Bottom Sheet Dialog 내부 레이아웃을 만듭니다.

layout_behavior에 BottomSheet로 사용할 레이아웃이라는 것을 명시해줍니다.

 

bottom_sheet_dialog.xml

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

</androidx.constraintlayout.widget.ConstraintLayout>

 

MainActivity.kt

val bottomSheetView = layoutInflater.inflate(R.layout.bottom_sheet_dialog, null)
val bottomSheetDialog = BottomSheetDialog(this)
bottomSheetDialog.setContentView(bottomSheetView)

사용할 화면에서 BottomSheetDialog를 띄워주면 끝입니다.

정말 기본적인 코드만 적어두었는데, 여러곳에서 사용하려면 BottomSheetDialog만의 클래스를 생성해 모듈화 작업을 거치는게 좋습니다.

 

---

BottomSheetDialog 속성

BottomSheetDialog는 behavior 라는 속성에 쉽게 커스텀 할 수 있도록 여러 옵션을 제공하고 있습니다.

bottomSheetDialog.behavior.isHideable = true

• peekHeight : bottomSheet를 완전히 접었을 때의 높이를 설정한다.
• isHideable : bottomSheet를 완전히 접었을 때 아예 숨길 수 있도록 할지 설정한다.
• skipCollapsed : bottomSheet를 숨길때 접히는 상태를 무시할지 여부를 결정.
• draggable : 뷰를 드래그해서 접을지 펼칠지 여부를 결정한다. BottomSheet 내부에 스크롤바가 있으면 해당 옵션을 동적으로 지정해 스크롤 동작을 원하는대로 수행할 수 있다.
• fitToContents : 펼쳐진 뷰의 높이가 content를 감쌀 것인지의 여부를 결정한다. false로 설정시 뷰가 펼쳐졌을 때 아래로 드래그할 경우 부모 컨테이너 높이의 절반으로 먼저 접히고 다시 드래그하면 완전히 접힌다.
• halfExpandedRatio : 절반만 펼쳐졌을 때 뷰의 높이를 결정한다. fitToContents가 false 일때만 동작한다.
• expandedOffset : 완전히 펼쳐진 상태일 때 뷰의 오프셋을 결정한다.

위 behavior 옵션들을 사용해 서비스 되고 있는 '스픽' 앱처럼 BottomSheetDialog 를 커스텀 할 수 있습니다.

 

---

BottomSheetDialog 상태

bottomSheetDialog.behavior.state = BottomSheetBehavior.STATE_EXPANDED

• STATE_EXPANDED : 완전히 펼쳐진 상태
• STATE_COLLAPSED : 접혀있는 상태
• STATE_HIDDEN : 아래로 숨겨진 상태
• STATE_HALF_EXPANDED : 절반으로 펼쳐진 상태
• STATE_DRAGGING : 드래그 되고 있는 상태
• STATE_SETTING : 드래그/스와이프 직후 고정된 상태

BottomSheetDialog 상태