CollapsingToolbarLayout

CollapsingToolbarLayout 을 사용하여 AppBarLayout 과 함께 툴바의 Collapsing , contentScrim, parallax 등의 기능을 구현 할 수 있다.

 

<출처 : material.google.com>

1. AppBarLayout와의 의존성

• CollapsingToolbarLayout은 AppBarLayout의  child로 사용 해야 한다.
  • CollapsingToolbarLayout 은 AppBarLayout 의 offsetChangeListener 기반으로 동작 하기 때문이다.

 

2. Toolbar와의 관계

• CollapsingToolbar 는 Toolbar 의 wrapper 형태로 구현 되어 있으며 child 로 toolbar 를 추가 할 시 해당 toolbar id 를 입력 하는 속성이 있습니다.
• 그러나 child 에 toolbar 를 추가 하여 사용 할 때 이 속성을 굳이 추가 해주지 않아도 CollapsingToolbarLayout 내부적으로 child view 들 중에 toolbar 가 있는지 찾도록 구현 되어 있습니다.
• 예를들어 CollapsingToolbarLayout 에 있는 속성 중 app:title 가 별도로 지정 되어있지 않으면 Toolbar 에 설정 된 TitleText 를 가져오도록 구현 되어 있습니다. 
• 주의 해야 할 점은, Developer 사이트에서는 CollapsingToolbarLayout 을 사용 할 경우 Toolbar 안에 child view 를 넣지 말도록 경고 하고 있습니다.

 

3.  Collapsing Title

• app:titleEnabled
• app:title
• CollapsintToolbarLayout 에는 내부적으로 CollapsingTextHelper 라는 title text 를 collapse / expand 상태에 따라 계속해서 draw 하는 Helper 클래스가 있습니다.
• 위  2개의 속성은  이 Helper 클래스와 관련 지어 생각하면 편한데,
  app:title 은 CollapsingTextHelper 에서 draw 하게 될 title text 를 지정 하는 것이고
  app:titleEnabled 는 CollapsingTextHelper 에서 draw 할 것 인지 여부를 지정 하는 것으로 생각 해 볼 수 있습니다.

 

collapsing toolbar layout 구조

https://m.blog.naver.com/PostView.nhn?blogId=pistolcaffe&logNo=221017061017&proxyReferer=https:%2F%2Fwww.google.com%2F

CollapsingToolbarLayout 분석

CollapsingToolbarLayout

CollapsingToolbarLayout는 FrameLayout을 상속받은 Layout으로  Toolbar를 애니메이션을 통해 확장해 주는 역할을 한다.

---

app:layout_scrollFlags 속성 

scroll	스크롤 이벤트에 반응할 모든 view에 반드시 이 플래그를 설정해야 합니다. 그렇지 않으면 화면상단에 고정되어 있게 됩니다. 위로 스크롤 될 때 반응 하며, Toolbar 의 height 까지 줄어듭니다.
enterAlways	아래쪽 방향으로 스크롤 할때마다 이 보기가 표시됩니다. ('quitk return') 위로 스크롤 시 툴바가 모두 사라지고 아래로 스크롤 하는 순간 툴바가 나타납니다.
exitUntilCollapsed	해당뷰에 minHeight를 정의하고 있으면, Toolbar가 해당 크기 까지만 축소가 됩니다. (가장 많이 사용됩니다.)
enterAlwaysCollapsed	해당뷰에 minHeight속성의 크기로 시작해 맨위로 스크롤이 될때만 전체 높이로 확장하게 됩니다. 위로 스크롤 시 툴바가 모두 사라지고 아래고 스크롤이 다 될 때 툴바가 나타납니다.

 

layout_collapseMode 속성

이 속성은 Toolbar 안에 설정하며, 스크롤이 발생 시 Toolbar의 최종 형태가 어떤 형태인지를 결정해 줍니다.

이미지를 사용했다면 ImageView에도 속성을 넣어 줘야 합니다.

pin	CollapsingToolbarLayout이 완전히 축소되면 툴바는 화면위에 고정됩니다.
parallax	툴바가 축소되는 동안Parallax모드로 동작하도록 합니다. 옵션으로 layout_collapseParallaxMultipler 속성을 사용하면 transition의 translation Multiplier를 설정할 수 있습니다.  (예 : app:layout_collapseParallaxMultiplier="0.7") 그리고 CollapsingToolbarLayout에 app:contentScrim 속성을 사용하여 최소화 되었을때 툴바의 색상을 변경 할 수 있습니다.

 

layout_behavior 속성

속성이 지정되어 있지 않다면 아무리 스크롤링을 해도 이벤트가 발생하지 않습니다. 이 속성은 RecyclerView가 CoordinatorLayout 과 함께 동작하기 위해서 반드시 필요 합니다. 즉 레이아웃이 RecyclerView의 스크롤 이벤트에 반응할 수 있게 해줍니다.

 

contentScrim 을 통해 툴바의 배경색을 설정할 수 있습니다.

 

 

CoordinatorLayout - AppBarLayout - CollapsingToolbarLayout  - ImageView 이 3개의 뷰에 아래 항목을 추가한다.

(Toolbar 에는 추가하지 않는다.)

 

android:fitsSystemWindows="true"

 

위 옵션은 추가하지 않으면 status bar 가 투명이여도 View 가 채워지지 않는다.

 

 

 

 

코드가 궁금하신 분은 아래 블로그로,,
출처: 

https://freehoon.tistory.com/38 [훈잇 블로그]

[안드로이드] CoordinatorLayout 활용 (Scrolling Techniques)

 

https://black-jin0427.tistory.com/16

[Android, Collapsing Tool bar] Collapsing Tool bar 에서의 status bar