구글의 뉴스스텐드 앱을 보면 상단의 프로필을 나타내는영역과 하단에 리스트로 레이아웃이 배치되어 있다. 중요한점은 뷰페이저를 이용해 리스트뷰가 좌우로 제스쳐가 된다. 디자인도 그렇고 써보면 상당히 편리 하다는것을 느낄 수있다. 하지만 페이저의 좌우 위치가 맞지 않는 경우 제스쳐를 하게 되는 경우 화면이 튀는 경우를 볼 수 있는데 편리는 하지만 UI가 논리적이지 않다는 것을 볼 수 있다.
예를 들어보면 2개의페이지가 있는데 한쪽은 가장 상단에 반대쪽은 가장 하단으로 이동해있는 경우 좌우페이지를 이동하게 되면 프로필영역의 크기와 위치가 애매하게 된다. 현재로서는 다른 대안이 없기때문에 아직도 수정을 보류중인것 같다.
이러한 문제점은 Airbnb에서도 어떻게 할까 많은 고민을 한것 같고, 블로그에도 잘 적혀 있다. 나도 이러한 문제점을 해결 하기위해 고민한 결과와 좀더 나은 방법을 고안해낸 코드를 공개한다.
모든것은 준비되어 있다. 연결되어 있지 않을 뿐이다.
이미 훌륭하게 만들어진 뷰페이저의 인디케이터 역할을 하는 PagerSlidingTabStrip, 이미지를 자연스럽게 애니메이션하는 것과 스크롤시 효과에 대한 NoBoringActionBar는 익히 알려져있다. 이 두개의 조합을 통해 ParallaxHeaderViewPager를 만들어 보았다.
PagerSlidingTabStrip + NoBoringActionBar → ParallaxHeaderViewPager
구현 방법은 다음과 같다.
1. NoBoringActionBar의 ListView를 ViewPager로 교체한다.
2. ViewPager에 아이템별로 생성된 Fragment에 ListView 또는 ScrollView를 만든다.
3. 모든 Fragment의 ListView또는 ScrollView의 OnScroll() Listener을 Activity에서 받을 수 있는 Interface를 만든다.
4. ListView또는 ScrollView에 특정상황에 스크롤을 하는 기능을 가진 Interface를 만든다.
5. ViewPger에서 페이지 전환시 Interface를 통해 Fragment의 각각의 ListView에 페이지 전환전의 ListView의 높이를 스크롤 하게 함으로 페이지 전환시 높이는 고정된다.
레이아웃 구조
구글의 뉴스스텐드와 동일하게 작동되는 것을 볼 수 있다.
소스코드는 https://github.com/kmshack/Android-ParallaxHeaderViewPager
'안드로이드 개발 > View' 카테고리의 다른 글
| 안드로이드 사용자 터치 Pressed에 대한 처리 방법 (0) | 2014.03.06 |
|---|---|
| 안드로이드 Selector에서 Custom States 만들기 (0) | 2014.02.27 |
| 구글플러스 안드로이드 앱 프로필 화면 구성 (1) | 2014.02.26 |
