바텀시트 파헤치기

매일 수정하는 GNOSS LV5·2021년 9월 29일
1

AndroidStudio

목록 보기
15/83
post-custom-banner

안드로이드 작업을 하다 보면 바텀시트를 자주 사용하게 된다.

이번엔 그중 바텀시트가 상단부에 일부분이 미리 보여지고 클릭시 지정한 만큼 확장되는 경우가 있다.
이러한 부분을 컨트롤 하기 위해서 BottomSheetBehavior에 대해 알아보도록 하자.


BottomSheetBehavior

BottomSheetBehavior 는 CoordinatorLayout 에서 자식 뷰에 대한 플러그인 중 하나입니다.
즉 CoordinatorLayout으로 감싸진 형태여야 합니다.

<androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <include
                layout="@layout/bottomsheet_product" />

        </androidx.coordinatorlayout.widget.CoordinatorLayout>

이 경우에는 include로 포함하였으며 바텀시트가 들어있는 레이아웃이 들어있습니다.

이 옵션을 자식 뷰의 app:layout_behavior에서 설정해주면 하단에서 펼쳐지는 방식으로 자식 뷰가 동작하게 됩니다.

		//이 코드는 바텀시트를 그련놓은 xml의 최 상위 레이아웃입니다.

		//Behavior를 적용하려면 id를 적용해놓아야 합니다.
		android:id="@+id/bottomsheet"
		//미리보기를 사용하고 싶으면 넣는 코드입니다.
		//내렸을때 전부 사라짐 -> true 미리보기 -> false
		app:behavior_hideable="false"
		//false일 경우 몇dp 만큼 보여줄 것인지??
    app:behavior_peekHeight="40dp"
		//behavior를 적용시키는 코드입니다.
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

사용하려는 Activity에서 Behavior를 지정해줍니다.

private fun initBottomSheet() {
    val sheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottomsheet))
    
        sheetBehavior.isGestureInsetBottomIgnored = true
}

여기까지가 기본적인 세팅입니다.
이후에는 각각의 상태값에 따라서 변화를 주고 싶을때 사용합니다.


Behavior 속성

app : layout_behavior로 설정했다면 다음과 같은 속성이 가능합니다.

  • behavior_hideable : 아래로 드래그했을 때 뷰를 숨길지 여부를 결정합니다. 
    DialogBottomSheet의 경우의 기본값은 true이고 그 외의 경우 기본값은 false입니다
  • behavior_skipCollapsed: 뷰를 숨길 때 접히는 상태를 무시할 지 여부를 결정합니다.
    기본값은 false이며 behavior_hideable이 false라면 효과가 없습니다.
  • behavior_draggable : 드래그하여 뷰를 접을 지 펼칠 지 여부를 결정합니다.
    기본값은 true입니다.
  • behavior_fitToContents: 펼쳐진 뷰의 높이가 content를 감쌀 것인지의 여부를 결정합니다.
    false로 설정하게 되면 뷰가 펼쳐졌을 때 아래로 드래그할 경우 부모 컨테이너 높이의 절반으로 먼저 접히고 다시 드래그 하면 완전히 접혀집니다.
    기본값은 true입니다.
  • behavior_halfExpandedRatio : 절반만 펼쳐졌을 경우 뷰의 높이를 결정합니다.
    기본값은 0.5입니다. 
    behavior_fitToContents 가 true라면 효과가 없습니다.
  • behavior_expandedOffset : 완전히 펼쳐진 상태일 때 뷰의 오프셋을 결정합니다.
    마찬가지로 behavior_fitToContents 가 true라면 효과가 없으며 절반으로 접혔을 경우의 오프셋보다 커야합니다.
    기본값은 0dp입니다.
  • behavior_peekHeight : 뷰가 접힌 상태의 높이입니다.
    기본값은 auto입니다.

Behavior 상태

BottomSheetBehavior의 state는 다음과 같습니다.

  • STATE_EXPANDED : 완전히 펼쳐진 상태
  • STATE_COLLAPSED : 접혀있는 상태
  • STATE_HIDDEN : 아래로 숨겨진 상태 (보이지 않음)
  • STATE_HALF_EXPANDED : 절반으로 펼쳐진 상태
  • STATE_DRAGGING : 드래깅되고 있는 상태
  • STATE_SETTLING : 드래그/스와이프 직후 고정된 상태

sheetBehavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
    override fun onSlide(bottomSheet: View, slideOffset: Float) {
    }
    override fun onStateChanged(bottomSheet: View, newState: Int) {
	when(newState){
		STATE_EXPANDED-> {
			...
			}
			...
			}
    		}
	}
    }
profile
러닝커브를 따라서 등반중입니다.
post-custom-banner

0개의 댓글