티스토리 뷰

모바일에서 많이 사용하는 탭 스타일을 구성할 때, 안드로이드 5.0이후 Material Tab Design을 추천하고 있다. 

안드로이드에서 Material Design은 직관적이면서 일관된 UI/UX를 제공하는 것을 말한다. 

다시 말해 UI/UX의 일관성을 위해 구글이 제시한 가이드가 바로 Material Design이다. 


탭 UI/UX와 관련된 샘플을 살펴보니 프래그먼트를 활용하여 탭 사이를 빠르게 이동하고, 좌우로 스와이프(Swipe)하는 기능을 제공하고 있다. 

안드로이도 예제인 SlidingTabsBasicSlidingTabsColors를 다운 받아서 살펴보면 이해할 수 있을 것이다.


안드로이드 탭 스타일

SlidingTabsBasic을 기반으로 안드로이드 탭 구성을 살펴보도록 하자. 

기본적으로 SlidingTabLayout.java 파일과 SlidingTabStrip.java 파일을 활용해야 한다. 

SlidingTabLayout.java

SlidingTabStrip.java


본 예제에서 사용할 패키지는 kr.co.acronym.minitab으로 되어 있다. 위 파일에서 패키지 부분만 변경해서 사용하면 된다. 


이제 메인 액티비티의 레이아웃을 살펴보자. 

activity_main.xml

탭 메뉴를 보여줄 View와 선택한 탭의 내용을 보여줄 FrameLayout으로 구성되어 있다. 

액티비티 자바 파일에서 활용하기 위해 14번째 줄을 보면 FrameLayout에 mini_content_fragment라는 id를 부여했다. 


메인 액티비티 파일은 다음과 같다. 

MainActivity.java

다른 부분은 기본으로 생성된 대로 놔뒀고, onCreate 메소드의 17~22번째 줄에 Fragment를 활용하는 부분이 추가되어 있다. 


이 부분에서 필요한 MiniTabFrament를 Fragment를 상속해서 만들어야 한다. 

MiniTabFragment.java


onCreateVew 메소드를 살펴보면 19번째 줄에서 R.layout.fragment_mini_tabs를 참조하고 있는 것을 볼 수 있다. 

뒤에서 별도의 fragment_mini_tabs.xml을 레이아웃에 만들도록 하자. 

참고로 프레그먼트를 사용할 때는 setContentView()로 레이아웃을 지정하는 것이 아니라, inflater.inflate() 메소드를 사용한다는 것도 알아두자. 


onViewCreated 메소드에서 뷰가 생성된 다음에 ViewPager에 어댑터를 지정하고(24~25번째 줄), SlidingTabLayout에 할당한다. 


이어서 ViewPager에서 사용하는 어댑터 클래스를 만든다. 

34번째 줄의 getCount()는 탭 영역에 보여줄 탭의 개수를 설정하는데, 여기에서는 6개로 지정했다. 

45번찌 줄의 getPageTitle()은 탭에 보여줄 제목을 설정한다. 


InstantiateItem() 메소드는 보여줄 아이템을 초기화 하는 부분이다. 

R.layout.pager_item을 가져와서 만든 View를 컨테이너에 추가하고 있다. (50~54번째 줄)

그리고 pager_item.xml 파일의 item_title 부분에 텍스트를 출력한다. (56~58번째 줄)


마지막으로 destroyItem() 메소드는 컨테이너에 추가한 View를 제거한다. (65~66번째 줄)


이제 레이아웃과 관련된 fragment_mini_tabs.xml과 pager_item.xml을 살펴보자. 

fragment_mini_tabs.xml

SlidingTabLayout은 지정한 패키지를 포함해서 적어줘야 한다. 

여기에서는 kr.co.acronym.minitab.SlidingTabLayout으로 선언되어 있다. 


pager_item.xml


이상으로 안드로이드에서 제공하는 탭 UI/UX에 대해서 살펴봤는데 전체적인 파일 구성은 다음과 같다. 

 

최종 실행 결과는 다음과 같다. 슬라이딩과 탭 클릭 등을 테스트해 보기 바란다. 


댓글
댓글쓰기 폼