안드로이드 모달(android modal)

Modal bottom sheet

모달 하단 시트는 화면의 나머지 부분과의 상호 작용을 차단하면서 일련의 선택 사항을 제공합니다.

모바일의 인라인 메뉴 및 간단한 Dialog의 대안으로 콘텐츠, 아이콘 및 작업을 위한 추가 공간을 제공합니다.

 

BottomSheetDialogFragment는 기본적으로 Dialog 역할을 하는 modal bottom sheet 로 fragment을 렌더링하는 일반 지원 라이브러리 Fragment 위에 있는 얇은 레이어입니다.

 

modal bottom sheet는 모달임을 나타내기 위해 그 아래 콘텐츠에 그림자를 렌더링합니다.

대화 상자 외부의 콘텐츠를 탭하면 하단 시트가 닫힙니다. 모달 하단 시트는 수직으로 드래그하고 완전히 아래로 밀어 해제할 수 있습니다.

 

Modal bottom sheet example

 축소 및 확장 상태의 모달 하단 시트를 보여줍니다.

먼저 BottomSheetDialogFragment의 하위 클래스를 만들고 , onCreateView를 덮어써 시트 내용에 대한 레이아웃을 제공합니다(이 예에서는 modal_bottom_sheet_content.xml임).

class ModalBottomSheet : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = inflater.inflate(R.layout.modal_bottom_sheet_content, container, false)

    companion object {
        const val TAG = "ModalBottomSheet"
    }
}

 AppCompatActivity 내부에서 하단 시트를 표시합니다.

val modalBottomSheet = ModalBottomSheet()
modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)

BottomSheetDialogFragment는 AppCompatFragment의 하위 클래스이므로 Activity.getSupportFragmentManager()를 사용해야 합니다.

 

참고: BottomSheetDialogFragment에서 setOnCancelListener 또는 setOnDismissListener를 호출하지 마십시오.

대신 필요한 경우 onCancel(DialogInterface) 또는 onDismiss(DialogInterface)를 재정의할 수 있습니다

Anatomy and key properties

1. Sheet
2. Content
3. Scrim (in modal bottom sheets)

Behavior attributes

Styles

기본 스타일 테마 속성:?attr/bottomSheetStyle

Theme overlays

기본 테마 오버레이 속성: ?attr/bottomSheetDialogTheme

Theming bottom sheets

하단 시트는 Material Theming을 지원하며 색상 및 모양 측면에서 사용자 정의할 수 있습니다.

하단 시트 테마 구현 테마 속성

bottomSheetDialogTheme를 사용자 정의 ThemeOverlay로 설정하면 모든 하단 시트에 영향을 미칩니다

 

 

res/values/themes.xml

<style name="Theme.App" parent="Theme.MaterialComponents.*">
  ...
  <item name="bottomSheetDialogTheme">@style/ThemeOverlay.App.BottomSheetDialog</item>
</style>

<style name="ThemeOverlay.App.BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
    <item name="bottomSheetStyle">@style/ModalBottomSheetDialog</item>
</style>

res/values/styles.xml

<style name="ModalBottomSheetDialog" parent="Widget.MaterialComponents.BottomSheet.Modal">
    <item name="backgroundTint">@color/shrine_pink_light</item>
    <item name="shapeAppearance">@style/ShapeAppearance.App.LargeComponent</item>
</style>

<style name="ShapeAppearance.App.LargeComponent" parent="ShapeAppearance.MaterialComponents.LargeComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">24dp</item>
</style>

참고: 사용자 지정 ThemeOverlay를 사용하면 업데이트된 색상과 같은 기본 테마의 변경 사항이 하단 시트에 반영된다는 이점이 있습니다(사용자 지정 테마 오버레이에서 재정의되지 않는 한). 

 

대신 사용자 정의 테마를 사용하는 경우(Theme.MaterialComponents.*.BottomSheetDialog 변형 중 하나에서 확장하여) 각각에 포함된 속성을 정확하게 제어할 수 있지만 변경 사항을 복제해야 함을 의미합니다. 당신의 메인 테마도 이것들로 만들었습니다.