카카오톡 UI의 비밀, ViewPagerIndicator

출처 : http://blog.naver.com/hj332921/90191352095

 

카카오톡을 쓰다 보면 슥슥 화면을 좌우로 긁으면 저렇게 부드럽게 이동하면서 화면 상단에 있는 갈색 바가 함께 움직이는 수려한 UI를 볼 수 있다. 

이 UI의 이름은 View Pager Indicator. 말 그대로 ViewPager와 연동되어서 작동하는 인디케이터이다.

 

게다가 이 라이브러리의 개발자는 그 유명한 ActionBarSherlock을 개발한 그 개발자다. 그러니까, ViewPager와, ActionBarSherlock과, 이 라이브러리를 함께 쓸 때 그 효과가 배가 된다는 이야기다.

 

자세한 내용과 라이브러리 다운로드는 http://viewpagerindicator.com 을 참고하자.

 

사용 방법은 매우 단순하다.

 

ActionBarSherlock과 마찬가지로, 전체 소스를 이클립스에 Import 해 준 후, Properties에 들어가 Is Library에 체크 후 Android 버전을 4.0.3으로 바꿔준다.

 

다음은 우리가 프로젝트를 만들고, XML 파일에 다음 소스를 넣는다.

 

<com.viewpagerindicator.TitlePageIndicator
 android:id="@+id/titles"
 android:layout_height="wrap_content"
 android:layout_width="fill_parent" />

이 소스를 넣으면 titles 라는 아이디로 인디케이터가 표시된다.

물론 저 소스는 ViewPager 안에 있어야 할 것이다. XML을 애초에 ViewPager로 작성한 후 레이아웃 최상단에 저것을 넣어준다.

 

그 후, 다음 소스를 Java 코드에 넣어준다.

 

//Set the pager with an adapter
ViewPager pager = (ViewPager)findViewById(R.id.pager);
pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

//Bind the title indicator to the adapter
TitlePageIndicator titleIndicator = (TitlePageIndicator)findViewById(R.id.titles);
titleIndicator.setViewPager(pager);

해석은 다음과 같다.

먼저 ViewPager를 하나 생성해 준 후 위에서 작성한 XML에 연결해준다.

그 후 ViewPager의 어댑터를 할당해준다. 어댑터 할당의 자세한 내용은 ViewPager의 영역이므로, 이 포스트의 내용을 넘어서므로 쓰지 않는다. (구글링!)

그 후 TitlePageIndicator를 XML과 연동해준 후에 setViewPager() 함수로 ViewPager와 연결해주면 끝이다.

 

또, ViewPager의 페이지가 바뀔 때 마다 인디케이터에 이벤트를 주고 싶다면,

titleIndicator.setOnPageChangeListener(mPageChangeListener);

위와 같은 코드를 위 코드 바로 아래에 추가 시켜주면 된다. 물론 mPageChangeListener를 정의하면 커스텀이 가능하다.

 

정말 쉬운 적용 방법으로 수려한 UI를 연출해 낼 수 있다. 물론, UI 스타일링을 거치면 카카오톡 같은 스타일 외에도 많은 스타일을 만들 수 있다. UI 스타일링과 라이브러리에 대한 자세한 설명 등을 보고 싶다면 링크를 참고하자.

[출처] [UI] 카카오톡 UI의 비밀, ViewPagerIndicator|작성자 HarryHong