[Android] BottomSheet

 

android_botomsheet

 

개요

화면 하단에서 어느 정도 높이로 고정이 되어있지만
손 드래그에 따라 올라가기도, 내려가기도, 또 사라지기도 하는 뷰를 만들고 싶을 때 사용할 수 있는 안드로이드 컴포넌트이다.

종류

• 일반 (Persistent BottomSheet)

Dependency 추가

implementation 'com.google.android.material:material:1.0.0'

Persistent BottomSheet

특징

BottomSheet는

1) CoordinatorLayout의 자식으로 적용해야 한다.
2) 모든 레이아웃에 app:layout_behavior 정의로 간단하게 사용 가능하다.
* app:behavior_peekHeight: 기본 높이
* app:behavior_hideable: 레이아웃을 아래로 드래그하여 숨길 수 있게 할지 여부 (false: peekHeight 높이로 항상 보임)

코드작성

xml에 정의한 레이아웃을 BottomSheetBehavior에 연결

var bottomsheet = BottomSheetBehavior.from(constraint_bottom_sheet)
        bottomsheet.setBottomSheetCallback(object: BottomSheetBehavior.BottomSheetCallback(){
            override fun onStateChanged(bottomsheet: View, newState: Int) {
                // BottomSheetBehavior의 5가지 상태
                when(newState) {

                    // 사용자가 BottomSheet를 위나 아래로 드래그 중인 상태
                    BottomSheetBehavior.STATE_DRAGGING -> { }

                    // 드래그 동작 후 BottomSheet가 특정 높이로 고정될 때의 상태
                    // SETTLING 후 EXPANDED, SETTLING 후 COLLAPSED, SETTLING 후 HIDDEN
                    BottomSheetBehavior.STATE_SETTLING -> { }

                    // 최대 높이로 보이는 상태
                    BottomSheetBehavior.STATE_EXPANDED -> { }

                     // peek 높이 만큼 보이는 상태
                    BottomSheetBehavior.STATE_COLLAPSED -> { }

                    // 숨김 상태
                    BottomSheetBehavior.STATE_HIDDEN -> { }
                }
            }

            override fun onSlide(p0: View, slideOffset: Float) {
                // slideOffset 범위: -1.0 ~ 1.0 
                // -1.0 HIDDEN, 0.0 COLLAPSED, 1.0 EXPANDED
            }
        })

• onStateChanged 콜백에서 BottomSheet 상태에 따른 UI 등 변경 처리를,
• onSlide 콜백에서 배경 dim 처리, 아이콘 회전 처리등을 할 수 있다.

Modal BottomSheet

특징

Modal 형태의 BottomSheet는

1) BottomSheetDialogFragment 를 상속받아서 구현한다.

2) 사용자가 Modal 밖을 클릭하면, 닫히는 특징이 있다.

TYPE 1) Dialog로 열기

var bottomSheetLayout = layoutInflater.inflate(R.layout.bottom_sheet_dialog, null)
BottomSheetDialog(this).let {
  it.setContentView(bottomSheetLayout)
  it.show()
}

TYPE 2) Fragment로 열기

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

참고

https://material.io/develop/android/components/bottom-sheet-behavior/

• 주관적인 견해가 포함된 글입니다. 다양한 의견을 환영합니다 :)