CollapsingToolbarLayout 으로 구현한 닫혀지는 ActionBar

안드로이드 Material Design이 나오면서, 앱 디자인에 종종 등장하는 UI가 있는데요.

바로, CollapsingToolbarLayout입니다.

이 Layout은, 아래와 같이 닫혔다, 열렸다 하는 안드로이드의 ActionBar를 가르키는데요.

 

 

오늘은 이UI를 구현하는 것에 대해서, 정리해보겠습니다.

 

1. Design Library 준비

MaterialDesign의 대표적 레이아웃인 CollapsingToolbarLayout을 사용하기 위해서는,

Google이 제공하는 DesignLibrary가 필요합니다.

dependencies에 아래와 같이 추가하면 됩니다.

 

 

직접 build.gradle에 추가하고자 한다면, 

compile 'com.android.support:design:25.2.0' 를  추가해주시면 됩니다.

 

2. CollapsingToolbarLayout 와 AppBarLayout

먼저 CollapsingToolbarLayout에 대해서 볼텐데요.

아래 이미지에서 볼수 있듯이, 이것은 FrameLayout을 상속받았기 때문에, 

이 Layout에 포함된 element들은 FrameLayout의 속성을 가지고 배치할 수 있습니다.

또한, 기본적으로 ToolBar의 Wrapper 클래스이여서, Toolbar의 속성도 가지고 있습니다.

 

 

 

이 CollapsingToolbarLayout은 AppBarLayout안에 들어 가는데요.

AppBarLayout의 소스코드한번 보고 가겠습니다.

 

아래에 보이는 것처럼, LinearLayout을 상속받았으므로,

AppbarLayout에 놓는 요소들은 LinearyLayout의 속성을 가지고 배치하면 되구요.

재미있는 것은, 아래처럼, offset같이 변함는 것에 반응하는 Interface를 가지고 있다는 것입니다.

즉, 특정 offset을 넘어가면, 레이아웃을 변하게 하는 모체라는 것을 알 수 있네요.

 

 

 

3. NestedScrollView

CollapsingToolbarLayout은 AppBarLayout안에 배치시켜야 한다고 했는데요.

여기에 추가적으로 한가지가 더 필요합니다.

 

특정 값 이상으로, 스크롤이 되면 그 값을 받아와서,  AppBarLayout이

CollapsingToolbarLayout(헤더부분)을 Collapse하거나 아니면 다시, 펼치거나 하는데요.

이 스크롤값을 받아주는 것이, 바로 NestedScrollView입니다.

 

보시다시피, FrameLayout을 상속받고 있어서, FrameLayout의 속성으로 안에 요소들을 배치하면 되는데요.

당연하게도(?) OnScrollChangeListener인터페이스를 가지고 있습니다.

(그래야, 스크롤 값을 받아서, 전달하겠지요)

 

 

 

참고로, 리스트로 많이 쓰이는, RecyclerView에도 똑같은 역할을 부여해줄 수 있는데요.

아래와 같은 옵션을 주면, NestedScrollView와 같이, 스크롤 값을 넘겨줍니다.

>> app:layout_behavior="@string/appbar_scrolling_view_behavior" 

 

 

여기서는 Sample코드로 리스트뷰를 사용할 것이라서, NestedScrollView 대신,  RecyclerView를 이용하겠습니다.

 

4. XML

자, 그러면, 이제 실제로 XML에 배치를 해보겠습니다.

먼저, CoordinateLayout에 배치를 하구요.

 

그 안에, AppBarLayout을 배치한 다음, 

CollapsingToolbarLayout 을 AppBarLayout을 배치합니다.

 

AppBarLayout이 NestedScrollView혹은 RecyclerView에서 스크롤값을 받아서,

내부에 있는, CollapsingToolbarLayout을 Collapse하거나, 펼치는 구조인데요.

 

 

이제 필요한 것은 스크롤 값을 받을 NestedScrollView혹은 RecyclerView인데요.

저희는  RecyclerView를 사용하겠습니다.

 

 

이제 기본 뼈대는 완성이 되었구요.

아래에서 살을 붙여보도록 하겠습니다.

 

5. CollapsingToolbarLayout 의 XML

CollapsingToolbar에 들어가는 프로퍼티값중 중요한 것은 아래 값입니다.

 

 

 

scroll은 아래의 리사이클러뷰의 스크롤이 올라가면, 그값에 반응하여서, 올라가는데요.
exitUntilCollapsed가 되어있지 않으면, 완전히 사라질때까지 올라가버리므로,
scroll과 exitUntilCollapsed옵션을 같이 주는 것이 좋습니다.

 

그 다음으로 중요한 옵션을 설정해야 하는것은,

CollapsingToolbarLayout안에 들어가는 요소들에

layout_collapseMode라는 옵션을 주는 것인데요.

이미지뷰와 Toolbar를 넣고 적용을 하겠습니다.

 

layout_collapseMode 는 Parallax와 Pin 두가지 옵션값이 있는데요.

Parallax는 스크롤과 같이 따라서 올라가서 Collapse되구요

pin은 고정되는 값입니다.

 

배경이 되는 image는 스크롤과 함께 올라가서 사라지고,

Toolbar는 pin으로 주어서 고정시키겠습니다.

 

 

 

XML을 최종적으로 정리해보면 다음과 같습니다.

 

 

6. Java코드 구현

이제, Java코드 구현만 남았는데요.
아래와 같이 Toolbar를 액션바로 지정해주고, CollapsingToolbarLayout에 타이틀을 지정해주는 것으로 마무리를 하였습니다.

style.xml에서

커스텀한 툴바를 적용시키는 것에 대해서는 아래글을 참조해주세요)

>>> 안드로이드 Custom Toolbar 와 Theme 적용하기 <<<

 

 

이제  정상적으로 동작하는 것을 확인할 수 있습니다.