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

모바일에서 많이 사용하는 탭 스타일을 구성할 때, 안드로이드 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

<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

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

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

<?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

<?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에 대해서 살펴봤는데 전체적인 파일 구성은 다음과 같다. 

 

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