안드로이드 프래그먼트를 활용한 탭 만들기

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

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

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

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

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

안드로이드 탭 스타일

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

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

SlidingTabLayout.java

SlidingTabStrip.java

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

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

activity_main.xml

view plaincopy to clipboardprint?

1. <LinearLayout  
2.     xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:orientation="vertical"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:id="@+id/mini_tab_layout">  
7.   
8.     <View  
9.         android:layout_width="match_parent"  
10.         android:layout_height="1dp"  
11.         android:background="@android:color/darker_gray" />  
12.   
13.     <FrameLayout  
14.         android:id="@+id/mini_content_fragment"  
15.         android:layout_weight="2"  
16.         android:layout_width="match_parent"  
17.         android:layout_height="0px" />  
18.   
19. </LinearLayout>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/mini_tab_layout"> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@android:color/darker_gray" /> <FrameLayout android:id="@+id/mini_content_fragment" android:layout_weight="2" android:layout_width="match_parent" android:layout_height="0px" /> </LinearLayout>

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

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

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

MainActivity.java

view plaincopy to clipboardprint?

1. package kr.co.acronym.minitab;  
2.   
3. import android.support.v4.app.FragmentActivity;  
4. import android.os.Bundle;  
5. import android.support.v4.app.FragmentTransaction;  
6. import android.view.Menu;  
7. import android.view.MenuItem;  
8.   
9.   
10. public class MainActivity extends FragmentActivity {  
11.   
12.     @Override  
13.     protected void onCreate(Bundle savedInstanceState) {  
14.         super.onCreate(savedInstanceState);  
15.         setContentView(R.layout.activity_main);  
16.   
17.         if (savedInstanceState == null) {  
18.             FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();  
19.             MiniTabsFragment fragment = new MiniTabsFragment();  
20.             transaction.replace(R.id.mini_content_fragment, fragment);  
21.             transaction.commit();  
22.         }  
23.     }  
24.   
25.     @Override  
26.     public boolean onCreateOptionsMenu(Menu menu) {  
27.         getMenuInflater().inflate(R.menu.menu_main, menu);  
28.         return true;  
29.     }  
30.   
31.     @Override  
32.     public boolean onOptionsItemSelected(MenuItem item) {  
33.         int id = item.getItemId();  
34.   
35.         if (id == R.id.action_settings) {  
36.             return true;  
37.         }  
38.   
39.         return super.onOptionsItemSelected(item);  
40.     }  
41. }  

package kr.co.acronym.minitab; import android.support.v4.app.FragmentActivity; import android.os.Bundle; import android.support.v4.app.FragmentTransaction; import android.view.Menu; import android.view.MenuItem; public class MainActivity extends FragmentActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); if (savedInstanceState == null) { FragmentTransaction transaction = getSupportFragmentManager().beginTransaction(); MiniTabsFragment fragment = new MiniTabsFragment(); transaction.replace(R.id.mini_content_fragment, fragment); transaction.commit(); } } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } }

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

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

MiniTabFragment.java

view plaincopy to clipboardprint?

1. package kr.co.acronym.minitab;  
2.   
3. import android.support.v4.app.Fragment;  
4. import android.os.Bundle;  
5. import android.support.v4.view.PagerAdapter;  
6. import android.support.v4.view.ViewPager;  
7. import android.view.LayoutInflater;  
8. import android.view.View;  
9. import android.view.ViewGroup;  
10. import android.widget.TextView;  
11.   
12. public class MiniTabsFragment extends Fragment {  
13.     private SlidingTabLayout mSlidingTabLayout;  
14.     private ViewPager mViewPager;  
15.   
16.     @Override  
17.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
18.                              Bundle savedInstanceState) {  
19.         return inflater.inflate(R.layout.fragment_mini_tabs, container, false);  
20.     }  
21.   
22.     @Override  
23.     public void onViewCreated(View view, Bundle savedInstanceState) {  
24.         mViewPager = (ViewPager) view.findViewById(R.id.viewpager);  
25.         mViewPager.setAdapter(new MiniPagerAdapter());  
26.   
27.         mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs);  
28.         mSlidingTabLayout.setViewPager(mViewPager);  
29.     }  
30.   
31.     class MiniPagerAdapter extends PagerAdapter {  
32.   
33.         @Override  
34.         public int getCount() {  
35.             return 6;  
36.         }  
37.   
38.         @Override  
39.         public boolean isViewFromObject(View view, Object o) {  
40.             return o == view;  
41.         }  
42.   
43.         @Override  
44.         public CharSequence getPageTitle(int position) {  
45.             return "Item " + (position + 1);  
46.         }  
47.   
48.         @Override  
49.         public Object instantiateItem(ViewGroup container, int position) {  
50.             // Inflate a new layout from our resources  
51.             View view = getActivity().getLayoutInflater().inflate(R.layout.pager_item,  
52.                     container, false);  
53.             // Add the newly created View to the ViewPager  
54.             container.addView(view);  
55.   
56.             // Retrieve a TextView from the inflated View, and update it's text  
57.             TextView title = (TextView) view.findViewById(R.id.item_title);  
58.             title.setText(String.valueOf(position + 1));  
59.   
60.             // Return the View  
61.             return view;  
62.         }  
63.   
64.         @Override  
65.         public void destroyItem(ViewGroup container, int position, Object object) {  
66.             container.removeView((View) object);  
67.         }  
68.   
69.     }  
70. }  

package kr.co.acronym.minitab; import android.support.v4.app.Fragment; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class MiniTabsFragment extends Fragment { private SlidingTabLayout mSlidingTabLayout; private ViewPager mViewPager; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment_mini_tabs, container, false); } @Override public void onViewCreated(View view, Bundle savedInstanceState) { mViewPager = (ViewPager) view.findViewById(R.id.viewpager); mViewPager.setAdapter(new MiniPagerAdapter()); mSlidingTabLayout = (SlidingTabLayout) view.findViewById(R.id.sliding_tabs); mSlidingTabLayout.setViewPager(mViewPager); } class MiniPagerAdapter extends PagerAdapter { @Override public int getCount() { return 6; } @Override public boolean isViewFromObject(View view, Object o) { return o == view; } @Override public CharSequence getPageTitle(int position) { return "Item " + (position + 1); } @Override public Object instantiateItem(ViewGroup container, int position) { // Inflate a new layout from our resources View view = getActivity().getLayoutInflater().inflate(R.layout.pager_item, container, false); // Add the newly created View to the ViewPager container.addView(view); // Retrieve a TextView from the inflated View, and update it's text TextView title = (TextView) view.findViewById(R.id.item_title); title.setText(String.valueOf(position + 1)); // Return the View return view; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } } }

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

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:orientation="vertical">  
6.   
7.     <kr.co.acronym.minitab.SlidingTabLayout  
8.         android:id="@+id/sliding_tabs"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="wrap_content" />  
11.   
12.     <android.support.v4.view.ViewPager  
13.         android:id="@+id/viewpager"  
14.         android:layout_width="match_parent"  
15.         android:layout_height="0px"  
16.         android:layout_weight="1"  
17.         android:background="@android:color/white"/>  
18.   
19. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <kr.co.acronym.minitab.SlidingTabLayout android:id="@+id/sliding_tabs" android:layout_width="match_parent" android:layout_height="wrap_content" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1" android:background="@android:color/white"/> </LinearLayout>

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

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

pager_item.xml

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>  
2.   
3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:orientation="vertical"  
7.     android:gravity="center">  
8.   
9.     <TextView  
10.         android:id="@+id/item_subtitle"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content"  
13.         android:textAppearance="?android:attr/textAppearanceLarge"  
14.         android:text="Page:"/>  
15.   
16.     <TextView  
17.         android:id="@+id/item_title"  
18.         android:layout_width="wrap_content"  
19.         android:layout_height="wrap_content"  
20.         android:textSize="80sp" />  
21.   
22. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="center"> <TextView android:id="@+id/item_subtitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Page:"/> <TextView android:id="@+id/item_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="80sp" /> </LinearLayout>

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

 

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