[안드로이드] TabLayout과 ViewPager 만들기

TabLayout 과 ViewPager

TabLayout은 안드로이드 서포트 디자인 라이브러리에 있는 클래스입니다.

이전에는 탭에 대한 애니메이션, 변화, 디자인을 직접 구현했다면 

이제 TabLayout 내에 있는 속성만으로 쉽게 컨트롤 할 수 있습니다.

자주 사용하는 xml 속성은 다음과 같습니다.

XML Attributes	Description
design:tabGravity	탭의 정렬 방식을 선택  fill : 너비를 모두 같게 표시  center : 가운데 정렬하여 표시
design:tabMode	탭의 표시 방식을 선택  Fixed : 모든 탭을 한번에 표시  Scrollable : 일부 탭만 표시, 나머지 스크롤
design:tabIndicatorColor	현재 선택된 탭에 대한 색 지정
design:tabTextColor	탭에 적용할 기본 텍스트 색 지정
design:tabSelectedTextColor	현재 선택된 탭의 텍스트 색 지정

---

ViewPager는 탭에서 보여주는 화면에 해당합니다.

TabLayout과 연결된 리스너를 설정하여 동기화 시킬 수 있습니다.

그리고 ViewPager 역시 Adapter가 필요합니다. (v4.app.FragmentStatePagerAdapter)

TabLayout과 ViewPager에서 추가하게 되는 리스너는 크게 2가지 기능을 합니다.

첫번째는 탭을 선택했을 때 호출되는 리스너이며, 두번째는 뷰 페이저에서 스크롤 했을 때 호출되는 리스너입니다.

Listener	Description
TabLayout.onTabSelectedListener	탭의 선택 상태가 변경될 때 호출되는 리스너  addOnTabSelectedListener를 통해 설정  setOnTabSelectedListener는 deprecated
TabLayout.onPageChangeListener	ViewPager에서 페이지의 상태가 변경될 때   페이지 변경 이벤트를 TabLayout에 전달하여  탭의 선택 상태를 동기화해주는 역할  addOnPageChangeListener를 통해 설정

 

---

TabLayout 구현방법

1.

먼저 탭 레이아웃을 사용하기 위해 gradle에 dependency를 추가해줍니다.

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:design:24.0.0'
}

2.

그리고 style.xml 에서 액션바를 제거한 다음, 탭으로 사용할 Fragment를 생성합니다.

3개의 탭을 만들기 위해 아래와 같은 코드를 다른 탭에도 생성해줍니다.

public class TabFragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.tab_fragment_1, container, false);
    }
}

3.

tab_fragment_1.xml 을 생성하여 화면을 구분하기 위해 TextView를 임시로 넣겠습니다.

위와 마찬가지로 다른 2개의 xml 에도 같은 코드를 복붙합니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="This is Tab 1"
        android:textAppearance="?android:attr/textAppearanceLarge"/>

</RelativeLayout>

4.

다음으로 FragmentStatePagerAdapter를 상속받는 TabPagerAdapter를 생성해줍니다.

탭이 변할때마다 position을 받아 Fragment를 전환해주는 역할을 합니다.

public class TabPagerAdapter extends FragmentStatePagerAdapter {

    // Count number of tabs
    private int tabCount;

    public TabPagerAdapter(FragmentManager fm, int tabCount) {
        super(fm);
        this.tabCount = tabCount;
    }

    @Override
    public Fragment getItem(int position) {

        // Returning the current tabs
        switch (position) {
            case 0:
                TabFragment1 tabFragment1 = new TabFragment1();
                return tabFragment1;
            case 1:
                TabFragment2 tabFragment2 = new TabFragment2();
                return tabFragment2;
            case 2:
                TabFragment3 tabFragment3 = new TabFragment3();
                return tabFragment3;
            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return tabCount;
    }
}

5.

마지막으로 MainActivity에서 Toolbar, TabLayout, ViewPager를 생성하고 설정시켜야 합니다.

그리고 ViewPager와 TabLayout에 각 리스너를 달아줍니다.

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Adding Toolbar to the activity
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Initializing the TabLayout
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText("Tab One"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab Two"));
        tabLayout.addTab(tabLayout.newTab().setText("Tab Three"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        // Initializing ViewPager
        viewPager = (ViewPager) findViewById(R.id.pager);

        // Creating TabPagerAdapter adapter
        TabPagerAdapter pagerAdapter = new TabPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(pagerAdapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        // Set TabSelectedListener
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }
}

전체 코드는 다음 깃헙 링크에 공개되어 있습니다.

https://github.com/Swalloow/AndroidStudy/tree/master/MyTabLayout