Android | CoordinatorLayout로 특정 View Collapse

읽기 전

• 불필요한 코드나 잘못 작성된 내용에 대한 지적은 언제나 환영합니다.
• 개인적으로 사용해보면서 배운 점을 정리한 글입니다.

사이드 프로젝트에서 커뮤니티 기능을 구현하자는 의견이 나왔다. 커뮤니티 기능은 사실 제대로 구현하려면 거의 준 프로젝트 급이라 따로 페이지를 만들어서 구현하는게 낫겠다는 판단이 섰다. 시연용 앱만 제작하라고 주문받았지만 원래 관심이 있었던 분야라 기능적 구현 완성을 목표로 정리를 시작하려 한다.

이번 포스팅은 CoordinatoLayout으로 특정 View를 스크롤 이벤트 발생 시 Collapse 시키는 내용입니다. 대부분의 포스팅에서는 CoordinatorLayout과 CollapsingToolbarLayout을 함께 사용해서 Toolbar를 expand하고 collapse하는 내용이 주를 이루고 있어 저처럼 Toolbar는 고정시키고 특정 View를 Toolbar 밑으로 숨기고 싶은 분들이 보면 되겠습니다.

이전 포스팅 - Android | RecyclerView Custom Dialog 띄우기와 이어집니다.

동작 설명

포스팅 화면에서 작성 화면 스크롤을 올리거나 내리면 툴바 하단의 토픽, 제목 작성이 포함된 View를 숨기거나 표시한다.

UI 배치하기

앞서 Android | Toolbar Custom하기에서 다뤘듯이 Custom Toolbar를 생성하고 그 밑에 적당히 숨기고 싶은 View를 넣은 뒤 마지막에 RecyclerView를 넣어 스크롤되게끔 만든다. 코드 없이 UI Component만 적절히 넣어도 내부 코드로 잘 작동한다.

layout_posting.xml

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbarPosting"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:navigationIcon="@drawable/abc_vector_test">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/postingToolBarTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="글쓰기"
                    android:textColor="#FFFFFF"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
            </androidx.constraintlayout.widget.ConstraintLayout>
        </LinearLayout>
    </androidx.appcompat.widget.Toolbar>

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/postingTitleLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:layout_scrollFlags="scroll|enterAlways">

                <LinearLayout
                    android:id="@+id/linearLayoutTopicPosting"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:focusable="true"
                    android:orientation="horizontal"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toStartOf="@id/posting_title_vg_30"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <TextView
                        android:id="@+id/textViewPostingTopic"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ellipsize="end"
                        android:gravity="center"
                        android:maxLines="1"
                        android:paddingLeft="8dp"
                        android:paddingTop="8dp"
                        android:paddingBottom="8dp"
                        android:text="카테고리 없음"
                        android:textColor="#CCCCCC" />

                    <ImageView
                        android:id="@+id/imageView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center|right"
                        android:layout_weight="1"
                        android:src="@drawable/down_arrow" />
                </LinearLayout>

                <androidx.constraintlayout.widget.Guideline
                    android:id="@+id/posting_title_vg_30"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical"
                    app:layout_constraintGuide_percent="0.3" />

                <EditText
                    android:id="@+id/editTextPostingPostTitle"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    android:background="#00FFFFFF"
                    android:ems="10"
                    android:hint="@string/post_title_hint"
                    android:inputType="textPersonName"
                    android:paddingLeft="8dp"
                    android:textAlignment="viewStart"
                    android:textColor="@color/black"
                    android:textSize="16sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/posting_title_vg_30"
                    app:layout_constraintTop_toTopOf="parent" />
            </androidx.constraintlayout.widget.ConstraintLayout>
        </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerViewContentPosting"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
        </androidx.recyclerview.widget.RecyclerView>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>

CoordinatorLayout 사용법

CoordinatorLayout을 사용하기 위해선 AppBarLayout과 숨기고 싶은 Layout, 덮고 싶은 scrollable한 Layout 3개가 필요하다. 앞서 작성했던 UI 배치를 도식화 하면 다음과 같다.

CoordinatorLayout 상단에 Toolbar를 선언해서 CoordinatorLayout에서 숨기고 싶은 Layout이 Toolbar 밑으로 들어가게 했다. 그리고 숨기게 하는 동작인 scroll event를 담당할 scrollable view인 RecyclerView를 아래에 넣어주었다.

동작 결과