[Android] CoordinatorLayout 활용

내용 업데이트: 20.09.15

CoordinatorLayout 을 활용한 스크롤 이벤트 구현하기

실행환경 : Android Studio 3.2

API : API 24 Nougat 

test device : Galaxy Note 9 (API 28 Oreo)

출처 : material.google.com

스크롤 이벤트에 따라 부드러운 애니메이션과 함께 툴바가 사라지고 보여진다.

이를 구현할 수 있는 기본 레이아웃은 바로 CoordinatorLayout 이다.

아래와 같이 app.gradle 에 디펜던시를 추가해주어야한다.

원래는 support 라이브러리에 따로 존재했지만, androidx 로 업데이트 된 이후로 함께 포함되어있다. 두번째 줄에 있는 머티리얼 디펜던시를 추가해주지않으면, 코디네이터 레이아웃에서 세팅할 수 있는 behavior 가 없으니 잊지말고 꼭 넣어주어야한다.

dependencies {
  implementation 'androidx.appcompat:appcompat:1.2.0'
  implementation 'com.google.android.material:material:1.2.1'
}

코디네이터의 동작 원리를 먼저 알고 넘어가면 좋겠지만, 내용이 많을 수 있기때문에 나중에 따로 포스팅을 할 계획이다.

CoordinatorLayout is a super-powered FrameLayout.

CoordinatorLayout is intended for two primary use cases:

1. As a top-level application decor or chrome layout
2. As a container for a specific interaction with one or more child views

By specifying Behaviors for child views of a CoordinatorLayout you can provide many different interactions within a single parent and those views can also interact with one another. View classes can specify a default behavior when used as a child of a CoordinatorLayout using the CoordinatorLayout.DefaultBehavior annotation.

Behaviors may be used to implement a variety of interactions and additional layout modifications ranging from sliding drawers and panels to swipe-dismissable elements and buttons that stick to other elements as they move and animate.

Children of a CoordinatorLayout may have an anchor. This view id must correspond to an arbitrary descendant of the CoordinatorLayout, but it may not be the anchored child itself or a descendant of the anchored child. This can be used to place floating views relative to other arbitrary content panes.

Children can specify CoordinatorLayout.LayoutParams.insetEdge to describe how the view insets the CoordinatorLayout. Any child views which are set to dodge the same inset edges by CoordinatorLayout.LayoutParams.dodgeInsetEdges will be moved appropriately so that the views do not overlap.

먼저 Navigation Drawer Activity 로 생성하면 여러개의 xml 레이아웃이 만들어지는데, 아래 4개파일만 살펴보면 된다.

- activity_main.xml

- app_bar_main.xml

- content_main.xml

- nav_header_main.xml

이 중에서 app_bar_main.xml 의 구조를 살펴보면 다음과 같다.

<CoordinatorLayout>

- - <AppBarLayout>

- - - - <Toolbar />

- - <Contents Include />

- - <FloatingActionButton />

최상위 레이아웃은 CoordinatorLayout 이고, 그 안에 AppBarLayout, include 구문, 그리고 FloatingButton이 있다.

이 구조를 아래와 같이 변경해야한다.

최상위 레이아웃 CoordinatorLayout 은 변함 없고

AppBarLayout 안의 CollasingToolbarLayout은 ImageView와 Toolbar를 갖고 있다.

(스크린샷에서는 Collapsing 레이아웃이 닫혀있어서 보이지 않는다. 그리고 RecyclerView가 있지만 실제로는 필요없어서 뺐다)

CollapsingToolbarLayout

CollapsingToolbarLayout 은 FrameLayout을 상속받았고, Toolbar 를 애니메이션을 통해 확장해주는 용도로 사용된다.

우선 기본적인 본문이 들어갈 content_main.xml(위에서 include 된 레이아웃 파일)에 있는 nav_host_fragment 에 그려지게 되는 3개의 프래그먼트(home, gallery, slideshow) 중 home_fragment.xml 로 들어가서 아래와같이 구조를 변경한다.

이 상태로는 본문의 내용이 너무 짧아 스크롤이 발생하지 않기때문에, 아래와같이 뷰의 높이를 강제로 높였다.

그리고 스크롤이 발생하기 위해서는 최상위 레이아웃을 NestedScrollView 로 바꿔야한다. 기본 ScrollView 로는 스크롤링 이벤트를 처리할 수 없기 때문에 NestedScrollView 를 사용했다. 그러면 다음과 같이 구조가 변경된다.

그리고 중요한점은, constraintLayout에 있는 app:layout_behavior="@string/appbar_scrolling_view_behavior" 을 최상위의 NestedScrollView 에 옮겨주어야한다. (그래야 app_bar_main.xml 에서 content_main.xml 이 겹쳐보이지 않는다.)

일단 스크롤은 발생하지만, 원하는 기능은 동작하지 않는다.

이를 위한 다음 작업을 해보자.

우선 다시 app_bar_main.xml 로 돌아와서 CollapsingToolbarLayout 에 layout_scrollFlags 속성을 사용하여 스크롤시 헤더에 대한 적절한 flag를 설정하자.

속성은 다음과 같다.

scroll	스크롤 이벤트에 반응할 모든 view에 반드시 이 플래그를 설정해야한다. 그렇지 않으면 화면 상단에 고정된다.
enterAlways	아래쪽 방향으로 스크롤 할 때마다 이 보기가 표시된다. ('quick return')
exitUntilCollapsed	해당 뷰에 minHeight를 정의하고 있으면, Toolbar가 해당 크기까지만 축소된다. (가장 많이 사욤됨)
enterAlwaysCollased	해당 뷰에 minHeight 속성의 크기로 시작해 맨 위로 스크롤이 될때만 전체 높이로 확장하게 된다.

<스킨에 적용된 개행이 넓어서 너무 이상하게 나온다;; 스킨을 변경하도록 하자>

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="100dp"
    app:contentScrim="@android:color/transparent"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

그리고 CollapsingToolbarLayout에 app:contentScrim 속성을 사용하여 최소화 되었을때 툴바의 색상을 변경 할 수 있다.

그 다음으로 살펴봐야하는 속성은 app:layout_collapseMode 속성이다.

이 속성은 Toolbar 안에 설정하며, 스크롤이 발생했을 때 Toolbar의 최종 형태를 결정하는 역할을 한다.

이미지를 사용했을 경우, ImageView에도 속성을 넣어주어야 한다.

pin	CollapsingToolbarLayout이 완전히 축소되면 툴바는 화면위에 고정된다.
parallax	툴바가 축소되는 동안 Parallax모드로 동작하도록 한다. 옵션으로 layout_collapseParallaxMultipler 속성을 사용하면 transition의 translation Multiplier를 설정할 수 있다. (예 : app:layout_collapseParallaxMultiplier="0.7")

<ImageView
    android:id="@+id/ivToolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:scaleType="centerCrop"
    android:src="@drawable/test"
    app:layout_collapseMode="parallax"/>

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_collapseMode="pin"
    app:popupTheme="@style/AppTheme.PopupOverlay" />

이렇게 하면 스크롤이 발생하며 본문의 내용을 위로 올렸을 때 툴바가 작아지면서 상단에 고정된다.

CollapsingToolbarLayout에서 app:contentScrim="@android:color/transparent" 로 지정하였으므로, 툴바가 닫혔을 때 투명색으로 변해 이미지뷰가 툴바에 보이게 된다. (이렇게하지 않으면 기본 툴바 색으로 나온다.)

아래 스샷의 왼쪽은 스크롤 안한상태, 오른쪽은 모두 한 상태이다.

요약

1. 앱바레이아웃에 collapsingToolbarLayout 추가하고, 스크롤 이벤트 발생 시 어떤 동작을 할지 플래그 설정하기

2. 툴바가 닫혔을 때 어떤 행동을 할지(최종 형태는 어떨지) layout_collapseMode 속성 설정하기

3. include 되는 content_main.xml 를 coordinatorLayout 에서 어떻게 보여줄지 content_main.xml 최상위에서 app:layout_behavior="@string/appbar_scrolling_view_behavior" 설정하기

참고

http://freehoon.tistory.com/m/38