[Android] BottomSheetDialog 사용하기

2022. 11. 21. 17:31·Android/UI
반응형

BottomSheetDialog는 하단에서 나타나는 Dialog로 xml을 통해 자신이 사용하고자 하는 데로 커스텀할 수 있다.

 

기본적으로 Dialog를 띄우려는 곳에 BottomSheetDialog의 객체를 만들어서 종속된 메서드들을 사용하면 되지만,

여러 화면에서 공용으로 사용하고 싶다면 BottomSheetDialog를 Builder 패턴의 클래스로 만들어 사용하는게 좋다고 생각한다.

 

예제로 버튼을 누르면 BottomSheetDialog를 띄우고 '취소' 버튼을 누르면 Dialog를 내리고, '확인' 버튼을 누르면 Toast를 띄우려고 한다.


Builder 패턴을 사용한 Dialog 클래스 만들기

class CustomBottomSheetDialog(context: Context) : BottomSheetDialog(context) {

    interface BtnClickListener {
        fun onBtnClick()
    }

    private var mBinding = DialogBottomSheetBinding.inflate(layoutInflater)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        requestWindowFeature(Window.FEATURE_NO_TITLE)
        setContentView(mBinding.root)

        val behavior = BottomSheetBehavior.from(mBinding.root.parent as View)
        behavior.isHideable = false
    }

    class Builder(context: Context) {
        private val mDialog = CustomBottomSheetDialog(context)

        fun setTitle(text: String): Builder {
            mDialog.mBinding.tvTitle.text = text
            return this
        }

        fun setContent(text: String): Builder {
            mDialog.mBinding.tvContent.text = text
            return this
        }

        fun setCancelBtn(): Builder {
            mDialog.mBinding.btnCancel.setOnClickListener {
                mDialog.dismiss()
            }
            return this
        }

        fun setCheckBtn(rightBtnClickListener: BtnClickListener? = null): Builder {
            mDialog.mBinding.btnCheck.setOnClickListener {
                rightBtnClickListener?.onBtnClick()
            }
            return this
        }

        fun show(): CustomBottomSheetDialog {
            mDialog.show()
            return mDialog
        }
    }
}

 Builder 클래스에서 show() 이외에는 Builder 객체 자신이 리턴되도록 하고, Dialog를 보여줘야 하는 show()에서는 Dialog 객체를 리턴하도록 한다.

 

클릭 이벤트는 커스텀 리스너를 구현하여 처리했다. setCheckBtn에서 이벤트를 받아 Activity나 Fragment에서 override해서 사용할 수 있다.

 

Dialog가 노출되었을 때 드래그를 하면 Dialog가 닫히게 된다.

이 동작을 막으려면 BottomSheetBehavior를 사용해야 한다. BottomSheetBehavior의 ishideable은 아래로 드래그했을 때 View를 숨길지에 대한 여부를 결정한다.

ishideable의 값을 false로 하여 드래그를 막았다.


Activity에서의 사용

mBinding.btnOpen.setOnClickListener {
    CustomBottomSheetDialog.Builder(this)
        .setTitle("다이얼로그")
        .setContent("다이얼로그 생성")
        .setCheckBtn(object: CustomBottomSheetDialog.BtnClickListener{
            override fun onBtnClick() {
                Toast.makeText(this@MainActivity, "완료", Toast.LENGTH_LONG).show()
            }
        })
        .setCancelBtn()
        .show()
}

전체 코드

반응형

'Android > UI' 카테고리의 다른 글

[Android] TextWatcher로 텍스트 변경될 때마다 이벤트 처리하기  (0) 2022.11.23
[Android] Expandable RecyclerView 구현하기  (0) 2022.11.22
[Android] ViewPager2로 TabLayout 구성하기  (0) 2022.11.21
[Android] Fragment 하나로 TabLayout 구성하기  (0) 2022.11.20
[Android] RecyclerView Drag and Drop 구현하기  (0) 2022.11.18
'Android/UI' 카테고리의 다른 글
  • [Android] TextWatcher로 텍스트 변경될 때마다 이벤트 처리하기
  • [Android] Expandable RecyclerView 구현하기
  • [Android] ViewPager2로 TabLayout 구성하기
  • [Android] Fragment 하나로 TabLayout 구성하기
O_Gyong
O_Gyong
안드로이드 기술 정리
  • O_Gyong
    O_Gyong's TECH
    O_Gyong
    • 분류 전체보기 (81)
      • Android (58)
        • ADB (4)
        • Architecture (1)
        • Data (5)
        • Firebase (2)
        • Network & Connecting (4)
        • Security & Privacy (3)
        • UI (24)
        • 기타 (3)
        • 이슈 처리 (14)
      • Android Studio (5)
      • Git (3)
      • 작업 일지 (13)
  • 최근 글

  • 인기 글

  • 태그

    Bluetooth
    recyclerview
    Android Studio
    flow
    CalendarView
    TabLayout
    Pagination
    paging
    kizitonwose
    webview
    firebase
    Navigation
    Kotlin
    Andoird
    해상도
    compose
    MQTT
    Room
    ADB
    BLE
    CameraX
    Android
    hilt
    Paging3
    SharedPreferences
    issue
    in-app update
    GIT
    loading
    github
  • 링크

    • GitHub
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • hELLO· Designed By정상우.v4.10.4
O_Gyong
[Android] BottomSheetDialog 사용하기
상단으로

티스토리툴바