Android Studio - Tab 화면을 ViewPager 와 연동 하자

1. main_activity.xml 에 TabLayout 추가
2. MainActivity.java 에 TabLayout 변수를 선언하여 컨트롤
3. ViewPager와 연결


[main_activity.xml 에 TabLayout 추가]

<Toolbar> 태그 밑에다가 추가

<android.support.design.widget.TabLayout

    android:id="@+id/tabs"

    android:layout_width="match_parent"

    android:layout_height="50dp"

    android:layout_below="@id/toolbar"

    android:layout_gravity="bottom"

    app:layout_collapseMode="parallax"

    app:tabGravity="center"

    app:tabMode="scrollable">

</android.support.design.widget.TabLayout>

[MainActivity.java 에 TabLayout 변수를 선언하여 컨트롤]

1. TabLayout 의 이벤트 처리를 해당 클래스에서 처리

tabLayout 의 이벤트 처리를 MainActivity 에서 하도록, eventlistner를 implement 하고

public class MainActivity extends AppCompatActivity        

      implements TabLayout.OnTabSelectedListener

추상함수 구현
Tab을 선택할 경우 ViewPager를 이동 시키는 것은 개발자가 수동으로 해줘야 함.

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

@Overridepublic void onTabUnselected(TabLayout.Tab tab) {

}

@Overridepublic void onTabReselected(TabLayout.Tab tab) {

}

2. onCreate 함수 안에 아래 코드를 추가

// TabLayout

TabLayout tabLayout = (TabLayout)findViewById(R.id.tabs);
// 아래의 코드로 유저가 viewPager화면 조정시 tab도 자동조정

// 반대로는 개발자가 이벤트 처리로

// tab button의 문자열은 이곳에서 직접줄수도 있고

// 아래 코드에 의해 viewPager의 문자열을 그대로 적용할 수도 있다.

tabLayout.setupWithViewPager(viewPager);
tabLayout.addOnTabSelectedListener(this);

[ViewPager와 연결]

MyPagerAdapter 내부클래스에 Tab의 title 정보를 추가 및 getter 추가

class MyPagerAdapter extends FragmentStatePagerAdapter {

    ....

    // viewPager를 위한 PagerTitleStrip, PagerTabStrip에 나올 문자열    // 우리의 경우에는 TabLayout에서 이용한다.    String titles[] = new String[]{"TAB1", "TAB2", "TAB3"};

    @Override    public CharSequence getPageTitle(int position) {
        return titles[position];
    }

    ....

}