- [Android] BottomSheetDialog2023년 12월 30일 18시 52분 15초에 업로드 된 글입니다.작성자: 핀수728x90반응형
WW 앱의 업데이트 상태를 알리기 위한 방법으로 바텀 시트 다이얼로그를 선택했다.
이전에는 기본 다이얼로그를 커스텀해 사용하는 방식을 많이 선택했는데
요즘 앱들을 살펴보면 바텀 시트 다이얼로그로 상호작용을 많이 하는 것 같아 한번 구현해보기로 했다.
예시 : 무신사 앱 바텀 시트 다이얼로그에도 종류가 있는데,
자세한 것은 아래의 링크에 잘 설명이 되어 있으니 참고하면 좋다.
오늘 구현해 볼 것은 Modal bottom sheet이다.
Bottom Sheet Dialog 예제 : Modal, Persistent, 모서리 둥글게 등
1. Bottom Sheet Dialog 1-1. 개념 1-2. 종류와 차이 2. Modal Bottom Sheet 2-1. 기본 예제 2-2. 모서리가 둥근 예제 2-3. 버튼이 있는 예제 2-4. Modal 위에 텍스트 2-5. RadioButton 사용 예제 3. Persistent Bottom Sheet 3-1. 기본
todaycode.tistory.com
1. 디자인 만들기
xml로 다이얼로그 레이아웃을 구성해준다.
그런데 위의 예시도 그렇듯, 대부분의 바텀 시트 다이얼로그는 모서리가 둥글다.
그것도 같이 구현해보자.
1) 모서리가 둥근 drawable 만들기
bg_dialog.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="@color/white"/> <corners android:topRightRadius="20dp" android:topLeftRadius="20dp"/> </shape>
2) style 선언하기
<style name="DialogTheme" parent="Theme.Design.Light.BottomSheetDialog"> <item name="bottomSheetStyle">@style/DialogStyle</item> </style> <style name="DialogStyle" parent="Widget.Design.BottomSheet.Modal"> <item name="android:background">@drawable/bg_dialog</item> </style>
3) style 지정하기
setStyle(DialogFragment.STYLE_NORMAL, R.style.DialogTheme)
2. 화면에 띄우기
BottomSheetDialogFragment 클래스를 상속한 클래스를 만든다.
class BottomConfirmDialog : BottomSheetDialogFragment() { ... override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { return inflater.inflate(R.layout.layout_bottom_sheet_dialog, container, false) } ... }
다이얼로그를 띄울 곳에서 show 함수를 호출하면 된다.
BottomConfirmDialog().show(supportFragmentManager, TAG)
이렇게하면 다이얼로그는 화면에 잘 뜬다.
그런데 이런 다이얼로그는 특정 화면, 특정 상황에서만 쓰이는 것이 아니라
재사용 가능하도록 만들고 싶었다.
전체적인 틀은 위처럼 구성하고,
내용과 버튼을 클릭했을 때의 행위를 동적으로 결정할 수 있도록 구현했다.
fun showDialog( context: Context, content: String, supportFragmentManager: FragmentManager, dialogAction: DialogAction ) { val inflater = LayoutInflater.from(context) binding = LayoutBottomSheetDialogBinding.inflate(inflater) binding.content.text = content binding.buttonYes.setOnClickListener { dialogAction.setPositiveAction() dismissDialog() } binding.buttonNo.setOnClickListener { dialogAction.setNegativeAction() dismissDialog() } isCancelable = false setStyle(DialogFragment.STYLE_NORMAL, R.style.DialogTheme) show(supportFragmentManager, TAG) }
다이얼로그를 화면에 띄우려면 아래와 같이 함수를 호출하면 된다.
BottomConfirmDialog.instance.showDialog( context = this@MainActivity, supportFragmentManager = supportFragmentManager, content = "앱의 원활한 사용을 위해 업데이트를 권장합니다.\n업데이트 하시겠습니까?", dialogAction = object : BottomConfirmDialog.DialogAction{ override fun setPositiveAction() { appUpdateViewModel.moveToPlayStore(this@MainActivity) } override fun setNegativeAction() { Unit } } )
다른 곳에서도 동일한 다이얼로그를 띄운다.
private val shareBtnClickListener = View.OnClickListener { BottomConfirmDialog.instance.showDialog( context = mContext, supportFragmentManager = requireActivity().supportFragmentManager, content = "오늘 입으면 좋을 옷을 공유해보세요!", dialogAction = object : BottomConfirmDialog.DialogAction { override fun setPositiveAction() { createDynamicLink() } override fun setNegativeAction() { Unit } } ) }
결과
공부하며 작성된 글이라 잘못된 정보가 있을 수 있습니다.
말씀해주시면 수정하겠습니다. 감사합니다.
References
아래 글을 참고하여 작성 되었습니다.
Bottom Sheet Dialog 예제 : Modal, Persistent, 모서리 둥글게 등
1. Bottom Sheet Dialog 1-1. 개념 1-2. 종류와 차이 2. Modal Bottom Sheet 2-1. 기본 예제 2-2. 모서리가 둥근 예제 2-3. 버튼이 있는 예제 2-4. Modal 위에 텍스트 2-5. RadioButton 사용 예제 3. Persistent Bottom Sheet 3-1. 기본
todaycode.tistory.com
728x90반응형'Android > Android' 카테고리의 다른 글
[Android] 플레이스토어 없이 앱 업데이트하기 (0) 2024.04.03 [Android] SharedPreferences를 대체할 DataStore에 대해 알아보자 (0) 2024.01.19 [Android] AppUpdateManager 앱 업데이트 확인하기 (0) 2023.12.29 [Android] 권한 요청 워크 플로우 (0) 2023.12.28 [Android] 외부저장소에 파일 저장하기 (0) 2023.11.13 다음글이 없습니다.이전글이 없습니다.댓글