PagerTabStripの使い方

Support Package rev.9で追加されたPagerTabStripを使ってみたのでメモしておく。

PagerTabStripはViewPagerにタブの表示を追加するものです。
スクリーンショット上部のPage1～3の部分がPagerTabStripです。
後述しますが下部に配置することもできます。
類似のものにPagerTitleStripがありますが、相違点はPagerTabStripではタブの部分をタップしてページ切り替えが可能なところです。

使い方
・ViewPagerの子要素としてPagerTabStripを配置
・layout_gravity="top"で上、"bottom"で下に表示
・PagerTabStrip#setDrawFullUnderline(true)で下線を表示
・PagerTabStrip#setTabIndicatorColor()でインディケーターと下線の色を指定

コード
activity_main.xml

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >
    <android.support.v4.view.PagerTabStrip
        android:id="@+id/pager_tab_strip"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#33B5E5"
        android:textColor="#FFFFFF"
        android:paddingTop="10dp"
        android:paddingBottom="10dp" />
</android.support.v4.view.ViewPager>

MainActivity.java

package com.example.pagertabstripsample;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;

public class MainActivity extends FragmentActivity {

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

        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        PagerTabStrip pagerTabStrip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);
        FragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(
                getSupportFragmentManager());

        viewPager.setAdapter(fragmentPagerAdapter);
        pagerTabStrip.setDrawFullUnderline(true);
        pagerTabStrip.setTabIndicatorColor(Color.DKGRAY);
    }

}

MyFragmentPagerAdapter.java

package com.example.pagertabstripsample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    private String[] pageTitle = {
            "Page1", "Page2", "Page3"
    };

    public MyFragmentPagerAdapter(FragmentManager fragmentManager) {
        super(fragmentManager);
    }

    @Override
    public Fragment getItem(int position) {
        Fragment fragment = new PageFragment();
        Bundle arguments = new Bundle();
        arguments.putString("pageIndex", Integer.toString(position + 1));
        fragment.setArguments(arguments);
        return fragment;
    }

    @Override
    public int getCount() {
        return pageTitle.length;
    }

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

}

PagerFragment.java

package com.example.pagertabstripsample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class PageFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = getActivity().getLayoutInflater().inflate(R.layout.fragment_page, null);
        TextView textView = (TextView) view.findViewById(R.id.textview);
        textView.setText(getArguments().getString("pageIndex"));
        return view;
    }

}

レイアウトファイル（fragment_page.xml）のコードは割愛。
これまではViewPagerIndicatorというライブラリを使っていましたが、今後はPagerTabStripを使ってみようかなと思ってます。

ViewPagerIndicator
http://viewpagerindicator.com/