안드로이드 버텀시트 BottomSheets

Usage

bottom sheet는 주로 모바일에서 사용되는 보조 surface입니다.

다양한 사용 사례에 적합한 세 가지 유형이 있습니다.

 

standard bottom sheet

- 화면의 주요 콘텐츠를 보완하는 콘텐츠를 표시합니다.

- 사용자가 기본 콘텐츠와 상호 작용하는 동안 계속 표시됩니다.

- 사용자는 멀티태스킹에 유용한 standard bottom sheet 및 나머지 화면을 보고 상호 작용할 수 있습니다.

 

 standard bottom sheet 음악 플레이어를 사용하면 사용자가 앨범을 탐색하는 동안 음악을 제어할 수 있습니다.

 

modal standard bottom

 - 인라인 메뉴 또는 모바일의 간단한 대화에 대한 대안이며 추가 항목, 더 긴 설명 및 아이콘을 위한 공간을 제공합니다.

 - 기본 콘텐츠와 상호 작용하려면 sheet를 내려서 제거한 후 가능하다.

 - 사용자는 모달 하단 시트와 상호 작용하거나 닫아야 한다.

 - 차단 동작으로 인해 사용자가 사용 가능한 선택에 집중할 수 있도록 이 파일 앱과 같은 메뉴에 적합합니다.

Expanding bottom sheets  

- 사용자가 주요 기능이나 작업에 액세스하기 위해 확장할 수 있는 축소된 작은 표면을 제공합니다.

- 그들은 모달 시트의 공간과 초점으로 표준 시트에 대한 지속적인 액세스를 제공합니다.

- 사용자는 전체 콘텐츠에 액세스해야 할 때 확장 하단 시트를 탭할 수 있습니다.

- 접힌 상태는 선택한 항목의 수 또는 읽지 않은 메시지와 같은 기능의 현재 상태를 나타내는 표시기로 사용할 수 있습니다.

Using bottom sheets

standard bottom sheet

<androidx.coordinatorlayout.widget.CoordinatorLayout
  ...>

  <FrameLayout
    ...
    android:id="@+id/standard_bottom_sheet"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <!-- Bottom sheet contents. -->

  </FrameLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Modal bottom sheet basic usage

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"
    }
}

class MainActivity : AppCompatActivity() {
    ...
    val modalBottomSheet = ModalBottomSheet()
    modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)
    ...
}

Setting behavior

standard / modal 하단 시트의 동작을 조정하는 데 사용할 수 있는 몇 가지 속성이 있습니다.

 

standard 하단 시트

- app:layout_behavior의 속성을 가지고 있는 하위 뷰들에 설정한다. 

- 프로그래밍 방식으로 이를 설정하여 xml에 적용할 수 있습니다.

val standardBottomSheetBehavior = BottomSheetBehavior.from(standardBottomSheet)
// Use this to programmatically apply behavior attributes

Modal bottom sheet 

<style name="ModalBottomSheet" parent="Widget.MaterialComponents.BottomSheet.Modal">
  <!-- Apply attributes here -->
</style>

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

<style name="AppTheme" parent="Theme.MaterialComponents.*">
  <item name="bottomSheetDialogTheme">@style/ModalBottomSheetDialog</item>
</style>

또는 

val modalBottomSheetBehavior = (modalBottomSheet.dialog as BottomSheetDialog).behavior
// Use this to programmatically apply behavior attributes

Retaining behavior on configuration change

구성 변경 시 bottom Sheet의 특정 동작을 저장하고 복원하기 위해 다음 플래그를 설정할 수 있습니다(또는 비트 OR 연산과 결합).

 

SAVE_PEEK_HEIGHT: app:behavior_peekHeight가 유지됩니다.
SAVE_HIDEABLE: app:behavior_hideable이 유지됩니다.
SAVE_SKIP_COLLAPSED: app:behavior_skipCollapsed가 유지됩니다.
SAVE_FIT_TO_CONTENTS: app:behavior_fitToContents가 유지됩니다.
SAVE_ALL: 앞서 언급한 모든 속성이 유지됩니다.
SAVE_NONE: 속성이 보존되지 않습니다. (기본값)

 

app:behavior_saveFlags 속성을 통해 xml에서 설정하거나,

bottomSheetBehavior.saveFlags = BottomSheetBehavior.SAVE_ALL

Setting state

STATE_COLLAPSED: 하단 시트는 볼 수 있지만 엿보기 높이만 표시됩니다. 이 상태는 일반적으로 하단 시트의 '휴식 위치'이며 사용자가 상호 작용할 추가 콘텐츠가 있음을 나타내기에 충분한 높이를 가져야 합니다.

STATE_EXPANDED: 하단 시트는 최대 높이에서 볼 수 있으며 끌거나 가라앉지 않습니다(아래 참조).

STATE_HALF_EXPANDED: 하단 시트가 반쯤 펼쳐져 있으며(behavior_fitToContents가 false로 설정된 경우에만 적용 가능) 끌거나 고정되지 않습니다(아래 참조).

STATE_HIDDEN: 하단 시트는 더 이상 표시되지 않으며 프로그래밍 방식으로만 다시 표시할 수 있습니다.
STATE_DRAGGING: 사용자가 하단 시트를 위아래로 적극적으로 드래그하고 있습니다.
STATE_SETTLING: 드래그/스와이프 제스처 후 하단 시트가 특정 높이로 안정화됩니다. 이것은 사용자 작업으로 인해 하단 시트가 숨겨지는 경우 엿보기 높이, 확장 높이 또는 0이 됩니다.

bottomSheetBehavior.state = BottomSheetBehavior.STATE_COLLAPSED

참고: STATE_SETTLING 및 STATE_DRAGGING은 프로그래밍 방식으로 설정하면 안 됩니다.

Listening to state and slide changes

BottomSheetCallback은 다음과 같이 BottomSheetBehavior에 추가할 수 있습니다.

val bottomSheetCallback = object : BottomSheetBehavior.BottomSheetCallback() {

    override fun onStateChanged(bottomSheet: View, newState: Int) {
        // Do something for new state.
    }

    override fun onSlide(bottomSheet: View, slideOffset: Float) {
        // Do something for slide offset.
    }
}

// To add the callback:
bottomSheetBehavior.addBottomSheetCallback(bottomSheetCallback)

// To remove the callback:
bottomSheetBehavior.removeBottomSheetCallback(bottomSheetCallback)

Handling insets and fullscreen

 

BottomSheetBehavior는 다음 중 하나를 지정하여 삽입(예: 가장자리에서 가장자리로)을 자동으로 처리할 수 있습니다.

• app:paddingBottomSystemWindowInsets
• app:paddingLeftSystemWindowInsets
• app:paddingRightSystemWindowInsets
• app:paddingTopSystemWindowInsets

API 21 이상에서는 navigation bar가 투명하고 app:enableEdgeToEdge가 true인 경우 모달 하단 시트가 전체 화면(가장자리에서 가장자리로)으로 렌더링됩니다.

생성자에 전달된 스타일을 업데이트하거나 테마의 ?attr/bottomSheetDialogTheme 속성에 지정된 기본 스타일을 업데이트하여 위의 패딩 속성 중 하나라도 스타일에서 true로 설정되면 자동으로 삽입을 추가할 수 있습니다.

 the status bar 아래로 미끄러질 때 , BottomSheetDialog는 하단 시트가 상단에 패딩을 추가하여 컨텐츠가 그 status bar 아래에 그려지는 것을 방지합니다.

Making bottom sheets accessible

 BottomSheet의 콘텐츠는 콘텐츠 설명이 설정된 이미지와 같이 자체 접근성 지침을 따라야 합니다.