내일배움캠프 7기 Android TIL 55일차 (2023.10.04)

일일 회고

 

프로젝트도 마무리 단계에 들어갔다. 오류를 찾아 조금씩 고치고, 발표 준비를 하면 될 것 같다!

 

잘 마무리해 보자

---

오늘의 키워드

• BottomSheetBehavior

---

BottomSheetBehavior

안드로이드 뷰 중에 가끔 보면 위에서 올라와서 다른 화면을 보여주는 것을 볼 수 있다 (ex) 유튜브 댓글 창)

 

이러한 동작은 안드로이드의 BottomSheetBehavior를 통해 구현을 할 수 있다.

 

BottomSheetBehavior는CoordinatorLayout에서 자식 뷰에 대한 플러그인 중 하나이다.

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

BottomSheetDialog 나 BottomSheetDialogFragment 도 BottomSheetBehavior를 갖고 있어 다이얼로그, 프래그먼트로도 작성해 볼 수 있다.

 

위의 영상에서는 BottomSheet안에 다른 여러 가지 뷰를 바인딩하기 위해 BottomSheetDialogFramgent를 사용하였다.

 

 

사용법 (위 영상 예시)

CoordinatorLayout에서 자식 뷰에 대한 플러그인 중 하나라고 했으니, 사용하려면 상위 레이아웃을 CoordinatorLayout으로 변경해주어야 한다. 그리고 BottomSheet 형태로 노출할 레이아웃을 작성하고 선언해 준다.

BottomSheet형태에 레이아웃에는 app:layout_behavior를 반드시 지정해 줘야 BottomSheet 동작을 하게 된다.

peekHeight속성은 BottomSheet이 초기에 얼마만큼 올라와 있는 지를 정하는 것인데, 현재 예시에서는 초기에는 보여주지 않을 것이기 때문에 0dp로 지정했다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".shorts.ShortsPageFragment"
    tools:background="#d9d9d9">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/shorts_page_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <include
        android:id="@+id/comment_bottom_sheet"
        layout="@layout/shorts_comment" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tool="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bottom_sheet_round_background"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior"
    app:behavior_peekHeight="0dp"
    app:behavior_hideable="true">
	<!-- 컴포넌트 추가 -->
 </androidx.constraintlayout.widget.ConstraintLayout>

 

출력 방법으로는

val behavior = BottomSheetBehavior.from(binding.bottomSheetId)

BottomSheetBehavior의 from메서드에 BottomSheet 레이아웃을 붙여주면 된다.

 

또, 다양한 상태를 지정해 줄 수 있는데 다음과 같은 상태들이 있다.

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

behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED

 

behavior를 등록할 때, 상태를 같이 등록해 주어서 초기 상태를 지정할 수도 있다. 물론 특정한 동작에 따라 상태를 지정할 수도 있다.

 

이외에도 다양한 사용법이 있으니 찾아보면서 사용해 보면 좋을 것 같다.

 

BottomSheetBehavior  |  Android Developers

 

BottomSheetBehavior 파헤치기