RecyclerView 목록 스크롤에 CoordinatorLayout 적용하기

 

Handling Scrolls with CoordinatorLayout 글을 보고 적용했습니다.

https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout

 

CoordinatorLayout 이란?

CoorinatorLayout 은 구글의 Material Design scrolling effect 를 다루는 능력을 향상시켜준다.

커스텀 애니메이션 코드를 작성하지 않고도 많은 방법을 제공한다. 

 

- Snakbar 가 생길 때 Floating Action Button 이 올라갔다 내려갔다 하게 만들 수 있다. 

- 메인 컨텐츠를 위해 Toobar 나 header space 를 확장하거나 축소할 수도 있다.

- 확장 혹은 축소시키고 뷰의 비율도 조절할 수 있다.

 

프로젝트 화면 

아래 리사이클러뷰에서 스크롤하면 "페스타고" 로고와 Chip Group 이 올라갔다 내려갔다 하는 요구사항을 만족해야한다.

아래 바텀 네비게이션도 CoodinatorLayout 을 적용했지만 이 내용은 언급하지 않겠다.

 

 

ScrollFlags

구현하기 전에 어떤 scrollFlag 를 사용해야할지 알고 넘어가는게 좋다.

 

- scroll : scroll effect 를 사용하려면 꼭 포함해야한다. 

 

- enterAlways : 스크롤을 올리면(scrolling up) 보이기 시작한다. 리스트의 아래쪽 아이템일 때도 toolbar 를 expose 하고 싶다면 사용하면 된다.

 

- enterAlwaysCollapsed: enterAlways 와 비슷하지만 스크롤을 내려도 확장된다.enterAlways 가 선언되면 minHeight 를 지정할 수 있는데 이걸 사용하면 이 길이가 되었을 때  view 가 보이게 만드는 효과도 만들 수 있다.

 

- exitUntilCollapsed : scroll flag 가 set 되어 있으면 스크롤 다운이 된다. 즉, 밑쪽 아이템에서 스크롤울 위로 올려도 보이지 않는다.

이때도 minHeight 를 지정하면 toolBar 를 축소만 시키고 계속 남아있게 만들 수 있다.

 

- snap: Toolbar 가 중간에 멈추지 않도록 한다. 50% 이상 남아있으면 강제로 다시 확장되고, 50%이하로 줄어들면 강제로 축소된다.

 

이 중에서 scroll 은 꼭 포함되어야 하는 것을 명심하자!

 

 

적용

 

CoorinatorLayout, AppbarLayout, CollapsingToobarLayout, Toolbar 를 사용해 화면을 구현했다.

 

먼저 ToolbarLayout 에 ImageView 와 ChipGroup 을 넣었다.

원래 ConstraintLayout 으로 묶어줬으나 Constraint 가 필요하지 않아서 성능을 위해 LinearLayout 으로 변경했다.

 

layout_scrollFlags 를 scroll, enterAlways 로 설정해주었다.

 

// Toobar
<androidx.appcompat.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|nap|enterAlways"
    ... >
    
    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imgLogo"
            ... />

        <com.google.android.material.chip.ChipGroup
            android:id="@+id/cgFilterOption"
            ...>

            <!-- Chips -->
            
        </com.google.android.material.chip.ChipGroup>
    </androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.Toolbar>

 

다음으로 CollapsingToolbarLayout 으로 감싸거나 감싸지 않을 수 있는데

 

CollapsingToolbarLayout 은 더 확장된 애니메이션을 제공하는데 Toolbar 가 Collapsing 되었을 때 다른 뷰를 보여주고 싶다면 사용할 수 있다.

특히 collapse_mode 를 parallx 로 지정하면 Toolbar 가 접히면서 ImageView 로 변하는 효과를 줄 수 있다.

 

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <ImageView
    	app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
    	app:layout_collapseMode="parallax">
    <Toolbar
    	app:layout_scrollFlags="scroll|enterAlways">
    
</com.google.android.material.appbar.CollapsingToolbarLayout>

 

Toolbar -> ImageView 로 변환이 되는 것이다.

 

그러나 변환은 필요가 없어서 Toolbar 만 사용해주었다.

 

그 다음에 Toolbar 를 AppBarLayout 안에 넣어준다.

 

 <com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
    <!-- Toolbar -->
    
</com.google.android.material.appbar.AppBarLayout>

 

 

여기까지 하면 AppBar 는 완료된다.

 

그러나!

 

우리는 축제 목록을 스크롤 할 때 AppBar 가 사라져야하므로 리사이클러뷰 스크롤에 연결지어야한다.

 

따라서 Behavior 를 지정해줬다.

 

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/rvFestivalList"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    ... />

 

이제 정상적으로 작동하는지 확인하자.

 

scroll, snap, enterAlways 를 사용했더니 원하는대로 동작한다!