Android-ParallaxHeaderViewPager 코드공개


구글의 뉴스스텐드 앱을 보면 상단의 프로필을 나타내는영역과 하단에 리스트로 레이아웃이 배치되어 있다. 중요한점은 뷰페이저를 이용해 리스트뷰가 좌우로 제스쳐가 된다. 디자인도 그렇고 써보면 상당히 편리 하다는것을 느낄 수있다. 하지만 페이저의 좌우 위치가 맞지 않는 경우 제스쳐를 하게 되는 경우 화면이 튀는 경우를 볼 수 있는데 편리는 하지만 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/blob/master/res/layout-xhdpi/activity_main.xml



구글의 뉴스스텐드와 동일하게 작동되는 것을 볼 수 있다. 

소스코드는 https://github.com/kmshack/Android-ParallaxHeaderViewPager 





Android View 관련된 오픈소스 정리


Android View와 관련된 오픈소스들이 많이 공개 되고 있다. 그래서 많이 쓰이고 유용한 오픈소스를 정리 해보았다.  아직 국내에서는 오픈소스가 인색한지 모두 외국에서 만든것들이다. 나도 View관련 오픈소스를 하나준비 하겠다고 준비중인데.. 준비중이기만 하다.

 

참고로, 잘 알려지고 검증된 오픈소스라도 코드를 하나하나씩 보고 어떻게 구현되어 있는지 꼭 살펴보고 썼으면 좋겠다. 그리고 이제 개발을 시작한지 얼마 안된 분들이라면 이런 오픈소스를 사용함으로 자기 실력을 죽일 수도 있으니 한번씩 구현해보는 것도 좋을듯 하다.

 

그리고 국내 개발 커뮤니티에 보면 자기가 개발할 것에 대해 오픈소스를 찾음으로써 개발해서 삽질 하기전에 찾아서 다행이다라는 글들을 보면 씁쓸하다. 오픈소스는 좋은점도 있지만 그에 반하는 양면성을 가지고 있다는 것에 조심했으면 좋겠다.

 

 

아무튼 아래것들은 이미 유명하고 잘만들어진 오픈소스들이다.

 

 

 

 

1. ActionbarSherlock

허니컴부터 적용된 액션바를 이전버전에도 사용할 수 있게 해준다.

 

http://www.actionbarsherlock.com/
https://github.com/JakeWharton/ActionBarSherlock

 

ActionBarSherlock is an standalone library designed to facilitate the use of the action bar design pattern across all versions of Android through a single API.

The library will automatically use the native ActionBar implementation on Android 4.0 or later. For previous versions which do not include ActionBar, a custom action bar implementation based on the sources of Ice Cream Sandwich will automatically be wrapped around the layout. This allows you to easily develop an application with an action bar for every version of Android from 2.x and up.

 

 

 

2. Android-PullToRefresh

ListView, ScrollView, Viewpager, WebView 등 새로고침 기능의 View를 만들어 준다.

 

https://github.com/chrisbanes/Android-PullToRefresh

 

This project aims to provide a reusable Pull to Refresh widget for Android. It was originally based on Johan Nilsson’s library (mainly for graphics, strings and animations), but these have been replaced since.

 

 

 

 

3. StickyListHeaders

ListView의 Section Header 정보를 넣을 수 있다.

 

https://github.com/emilsjolander/StickyListHeaders

 

StickyListHeaders is an Android library that makes it easy to integrate section headers in your ListView. These section headers stick to the top like in the new People app of Android 4.0 Ice Cream Sandwich. This behavior is also found in lists with sections on iOS devices. This library can also be used for without the sticky functionality if you just want section headers.

StickyListHeaders actively supports android versions 2.3 (gingerbread) and above That said, it should be compatible with much older versions of android as well but these are not actively tested.

Here is a short gif showing the functionality you get with this library:

 

 

4. MenuDrawer
좌측 또는 우측의 슬라이드 메뉴를 구성 할 수 있다.

https://github.com/SimonVT/android-menudrawer

 

A slide-out menu implementation, which allows users to navigate between views in your app. Most commonly the menu is revealed by either dragging the edge of the screen, or clicking the ‘up’ button in the action bar.

 

 

5. SlidingMenu
MenuDrawer와 같다.

 

https://github.com/jfeinstein10/SlidingMenu

SlidingMenu is an Open Source Android library that allows developers to easily create applications with sliding menus like those made popular in the Google+, YouTube, and Facebook apps. Feel free to use it all you want in your Android apps provided that you cite this project and include the license in your app.]

 

 

6. FadingActionBar

리스트뷰 스크롤시 헤더 컨텐츠에 따라 액션바의 알파값이 변한다. 구글 음악플레이어의 아티스트정보 페이지

 

https://github.com/ManuelPeinado/FadingActionBar

 

FadingActionBar is a library which implements the cool fading action bar effect that can be seen in the new Play Music app.

 

7. DragSortListView

리스트 소팅

 

https://github.com/bauerca/drag-sort-listview

 

DragSortListView (DSLV) is an extension of the Android ListView that enables drag-and-drop reordering of list items.

 

 

8. IndexableListView

리스트뷰의 알파벳 인덱스 기능

 

https://github.com/woozzu/IndexableListView

 

 

9. ListViewAnimations

ListView 스크롤시 애니메이션(구글 플러스)

 

https://github.com/nhaarman/ListViewAnimations

 

ListViewAnimations is an Open Source Android library that allows developers to easily create ListViews with animations. Feel free to use it all you want in your Android apps provided that you cite this project and include the license in your app.

 

 

10. ViewPagerIndicator

ViewPager 인디케이터

 

https://github.com/JakeWharton/Android-ViewPagerIndicator

 

Android-ViewPagerIndicator is presented as an Android library project. A standalone JAR is not possible due to the theming capabilities offered by the indicator widgets.

 

11. PagerSlidingTabStrip

ViewPager 인디케이터

 

https://github.com/astuetz/PagerSlidingTabStrip

 

Interactive paging indicator widget, compatible with the ViewPager from the Android Support Library.

 

 

12. JazzyViewPager

ViewPager 스크롤시 애니메이션

 

https://github.com/jfeinstein10/JazzyViewPager

 

An easy to use ViewPager that adds an awesome set of custom swiping animations. Just change your ViewPagers to JazzyViewPagers and you’re good to go!

 

 

14. ViewPager3D

ViewPager 스크롤시 3D 효과

 

https://github.com/inovex/ViewPager3D

 

 

15. DirectionalViewPager

ViewPager 좌우, 아래위 스크롤

 

https://github.com/JakeWharton/Android-DirectionalViewPager

 

Implementation of the compatibility library ViewPager class that supports paging both vertically and horizontally as well as changing between the two at runtime.

 

 

 

16. VerticalSeekBarAndroid
수직 SeekBar

 

https://github.com/AndroSelva/Vertical-SeekBar-Android

 

This project is all about Customizing the normal SeekBar to Vertical Seekbar.

 

 

17. HoloCircleSeekBar
원형으로 생긴 SeekBar

 

https://github.com/JesusM/HoloCircleSeekBar

 

A Circle SeekBar inspired by Android Holo ColorPicker designed by Marie Schweiz and developed by Lars Werkman.

 

 

18. MultiChoiceAdapter
ListView, GridView에서 다중선택을 쉽게 할 수 있도록 도와준다.

 

https://github.com/ManuelPeinado/MultiChoiceAdapter

 

MultiChoiceAdapter is an implementation of ListAdapter which adds support for modal multiple choice selection as in the native Gmail app.

 

 

19. TwoWayGridView
GridView를 가로, 세로방향으로 스크롤 되도록 한다.

 

https://github.com/jess-anders/two-way-gridview

 

An Android GridView that can be configured to scroll horizontally or vertically.

 

 

20. ScrollBarPanel
스크롤바 옆에 View를 생성(Path 2.0에서 볼 수 있는 기능)

 

https://github.com/rno/Android-ScrollBarPanel

 

Android-ScrollBarPanel allows to attach a View to a scroll indicator like it’s done in Path 2.0.