Android Design Support libraryを使う（3）TabLayout

Android Design Support libraryはAndroid Support Library 22.2で公開された、
マテリアルデザインを実現するのに便利なコンポーネントのライブラリです。

そんなDesign Support libraryのコンポーネントの紹介と使い方の説明をしていきたいと思います。
導入方法は第一回のこちらから。

本稿ではTabLayoutの使い方を紹介します。

TabLayout

TabLayoutはタブの実装を行うためのコンポーネントです。
タブの実装は従来Actionbar.Tab（現在非推奨）がなどがあり実装が若干ごちゃごちゃしていた感がありましたが、TabLayoutの登場でそのあたりがすっきりしました。
また、ViewPager（スワイプによりページ遷移してくれるアレ）との同期を想定してある設計なのも嬉しいですね。

基本実装

レイアウトファイルにTabLayoutを配置します。

acitivity_main.xml

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

コード側でタブを生成、セットします。
MainActivity.java

public class MainActivity extends AppCompatActivity {

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

        TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
        tabLayout.addTab(tabLayout.newTab().setText("タブ1"));
        tabLayout.addTab(tabLayout.newTab().setText("タブ2"));
        tabLayout.addTab(tabLayout.newTab().setText("タブ3"));

    }
}

表示するタブをTabLayout#newTab()で生成し、タブにテキストを表示する場合はsetText()、アイコンを表示する場合はsetIcon()を呼びます。
TabをTabLayou#addTab()で追加します。

ViewPagerとの組み合わせ

TabLayotにはViewPagerと表示の同期を簡単に可能にするメソッドが用意されています。
以下ではViewPagerとの併用したパターンを紹介します。

activity_main.xml

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#3F51B5"
        app:tabIndicatorColor="#FF4081"
        app:tabSelectedTextColor="#FFFFFF"
        app:tabTextColor="#000000"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

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

        TabLayout tabLayout = (TabLayout)findViewById(R.id.tab_layout);
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());

        ViewPager viewPager = (ViewPager)findViewById(R.id.view_pager);
        viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));

        tabLayout.setupWithViewPager(viewPager);
    }

    private class ViewPagerAdapter extends FragmentPagerAdapter {
        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Fragment fragment = null;

            switch (position) {
                case 0:
                    fragment = new FirstFragment();
                    break;
                case 1:
                    fragment = new SecondFragment();
                    break;
                case 2:
                    fragment = new ThirdFragment();
                    break;
                default:
                    break;
            }
            return fragment;
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            return "タブ"+ (position+1);
        }
    }

TabLayoutとViewPagerを配置したレイアウトを用意し、TabLayou#setupWithViewPager(ViewPager)を呼んであげればOKです。
これだけでTabLayoutとViewPagerを結び付けてそれぞれの動きを同期してくれます。