[Android] Google IO 2014의 SessionDetailFragment를 통해 배운 것들.

Google IO 2014 앱의 소스를 보며 공부를 하던 중, SessionDetailFragment에 알아두면 도움이 되는 UI 정보들이 많이 있어서 공유해보고자 한다.

SessionDetailFragment는 아래와 같이 구성된 화면이다.

Material design in the 2014 Google I/O app | Android Developers Blog

화면의 상단에 이미지가 있고, 그 밑에 Title 그리고 하단에 Description을 표시하는 구성이다. 구성은 간단한데 애니메이션을 보면 간단하지만은 않다.

Material design in the 2014 Google I/O app | Android Developers Blog

애니메이션은 Google IO 2014를 직접 다운받아서 보는게 가장 정확한데, 특이한 부분만 요약하면 아래와 같다.

1. Activity가 ActionBar 영역을 사용하도록 되어있다.

2. 배너 이미지는 1/2 속도로 스크롤 된다.

3. Title 영역은 스크롤 되다가 화면 상단에서 고정된다.

4. Title 영역이 화면 상단에 고정될 때, ActionBar 영역의 색상이 Title 영역의 Background 색상으로 변경된다.

 

위의 4가지 기능들이 어떻게 구현되는지 소스에서 확인을 해보니 아래와 같다.

 

1. Activity가 ActionBar 영역을 사용하도록 구현. (기본은 ActionBar 아래에서 시작한다.)

Application/Activity의 Theme에 아래 속성을 추가한다.

windowActionBarOverlay 속성을 true로 설정하면 ActionBar가 overlay mode를 활성화 시켜서 Activity가 ActionBar 영역까지 사용하게 된다.

자세한 설명은 역시 공식문서를 읽는게 최고다.

* windowContentOverlay에 @null을 설정한 이유는 ActionBar 밑의 그림자 효과를 없애기 위해서다.

 

2. Banner 이미지는 1/2 속도로 Scroll 된다.

Banner 이미지는 다른 영역의 1/2 속도로 Scroll 되도록 구현하여 Parallax 효과를 주었다. 구현 방법은 ScrollView가 Scroll 될 때, Banner의 Y 좌표를 scroll 된 값의 절반만큼 아래로 내리는 방식으로 구현하였다.

 

3. Title 영역은 Scroll 되다가 화면 상단에서 고정된다.

ScrollView가 Scroll되어 Title 영역이 화면에서 사라지는 시점부터 Title 영역의 Y 좌표를 ScrollView의 scrollY 만큼 같이 내리는 방식으로 구현하였다.

Title 영역이 화면에서 사라지는 시점은 ScrollView의 scrollY의 값이 Banner 이미지의 높이보다 커진 경우라고 생각하면 쉽다. 이때 Title 영역의 Y좌표를 ScrollView의 scrollY 값만큼 내려주면 사용자가 느끼기에 Title 영역이 화면에 고정된 것과 같이 느끼게 된다.

 

 4. Title이 화면 상단에 고정될 때, ActionBar 영역의 배경 색상이 Title 영역의 Background 색상으로 변경된다.

이는 clipChildren=”false”와 View의 scaleY(), setPivotY()를 이용하여 구현할 수 있다.

1) ViewGroup의 clipChildren 속성은 Child View의 크기가 Parent보다 클 때, Parent를 넘어서는 부분에 대해 화면에 표시를 할 것인지 말 것인지를 설정하는 속성이다. 기본값은 true로 되어 있는데, 이를 false로 설정하게 되면 Child View의 크기가 Parent보다 클 때에도 화면에 출력이 된다.

* 이때 주의할 점은 Parent의 Parent들까지 clipChildren 속성이 false일 때에만 정상동작한다.

2) View의 setScaleY() 함수는 View를 위아래로 늘리거나 줄여주는 기능을 한다.

3) View의 setPivotY() 함수는 View를 Scaling 할 때 기준이 되는 Y좌표를 설정한다. Pivot이 View의 하단으로 설정되어 있으면 Scale 될 때 View는 위로 커지게 되고, Pivot이 상단일 경우는 View는 아래로 커지게 된다.

위의 3가지를 조합하면 Scroll시에 Title 영역이 ActionBar 높이까지 Scroll되면 Title 영역의 Pivot을 하단으로 설정한 상태에서 scaleY를 키우면 Title 영역이 ActionBar까지 커지게 된다.

구현한 코드는 아래와 같다.

- Animation은 덤이다.  역시 한국 사람은 덤이 있어야 한다.

 

* Source Code for Google IO 2014

https://github.com/google/iosched