Android 使用TabLayout製作下劃線能滑動的Tab標籤頁-design

google提供的Design開發包裏，有很多實用好看的新控件，這裏介紹下使用TabLayout+ViewPager實現下劃線能滑動的Tab標籤頁

效果圖

不使用google的design包，我們也可以自己製作這樣的效果，詳看我的這篇博客：http://blog.csdn.net/zhuwentao2150/article/details/51407661

要使用Design包，在項目的build.gradle中添加下依賴就好（記得更新SDK到最新版本）

dependencies {
     compile 'com.android.support:design:23.4.0'
}

先來看佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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="@color/colorPrimary"
        app:tabSelectedTextColor="#ffffff"
        app:tabIndicatorColor="#ff00ff"
        app:tabTextColor="#000000"
        app:tabIndicatorHeight="5dp"
        app:tabMode="fixed"/>

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

</LinearLayout>

常用屬性
tabSelectedTextColor：當Tab標籤被選中時的文字顏色
tabTextColor：Tab標籤中文字的默認顏色
tabIndicatorColor：下劃線顏色
tabIndicatorHeight：下劃線的高度
tabBackground：設置Tab標籤的背景
tabMode：Tab標籤的行爲模式

MODE_FIXED: Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
MODE_SCROLLABLE: Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs. They are best used for browsing contexts in touch interfaces when users don’t need to directly compare the tab labels. This mode is commonly used with a ViewPager.

兩種模式的差異：
tabMode=”scrollable”
滾動模式，TabLayout可以滾動
標籤多時，TabLayout支持滑動查看

標籤少時，，這些Tab會擠在一側，且各個Tab不是等量分佈的，有的佔地多有的佔地少

tabMode=”fixed”
填充模式，TabLayout不可滾動，所有的Tab都被限制在一定區域內
標籤多時，Tab會受到擠壓

Tab少時，各個Tab等量空間分佈

Fragment頁面

/**
 * ViewPager頁面
 * Created by zhuwentao on 2016-08-22.
 */
public class ViewPagerFragment extends Fragment{

    private String mPageNo;

    private TextView mPageNoTv;

    /** 狀態類型常量 */
    public static final String STATUS_TYPE = "pagerType";

    public static final String STATUS_ONE = "One";

    public static final String STATUS_TWO = "Two";

    public static final String STATUS_THREE = "Three";

    /**
     * 取得Fragment實例
     */
    public static ViewPagerFragment newInstance(Bundle args) {
        ViewPagerFragment fragment = new ViewPagerFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPageNo = getArguments().getString(STATUS_TYPE);
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.fragment_tab, container, false);
        mPageNoTv = (TextView) v.findViewById(R.id.tv_page_text);
        mPageNoTv.setText(mPageNo);
        return v;
    }

}

Activity界面

public class TabLayoutActivity extends AppCompatActivity {

    private ViewPager mPageVp;

    private TabLayout mLayoutTab;

    /**
     * 選項卡總數
     */
    private static final int TAB_COUNT = 3;

    private static final int TAB_0 = 0;

    private static final int TAB_1 = 1;

    private static final int TAB_2 = 2;

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

    /**
     * 初始化UI
     */
    private void initUI() {
        mPageVp = (ViewPager) findViewById(R.id.vp_tab_pager);
        mLayoutTab = (TabLayout) findViewById(R.id.tab_layout);

        mPageVp.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
        // 把TabLayout和ViewPager關聯起來
        mLayoutTab.setupWithViewPager(mPageVp);
    }

    /**
     * ViewPager適配器
     */
    public class MyPagerAdapter extends FragmentPagerAdapter {

        // 定義Tab標題
        private String[] tabTitles = new String[]{
                "One","Two","Three"
        };

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            Bundle args = new Bundle();
            boolean flag = true;
            switch (position) {
                case TAB_0:
                    args.putString(ViewPagerFragment.STATUS_TYPE, ViewPagerFragment.STATUS_ONE);
                    break;
                case TAB_1:
                    args.putString(ViewPagerFragment.STATUS_TYPE, ViewPagerFragment.STATUS_TWO);
                    break;
                case TAB_2:
                    args.putString(ViewPagerFragment.STATUS_TYPE, ViewPagerFragment.STATUS_THREE);
                    break;
                default:
                    flag = false;
                    break;
            }
            if (flag) {
                // 返回對應的Fragment頁面
                return ViewPagerFragment.newInstance(args);
            }
            return null;
        }

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

        @Override
        public CharSequence getPageTitle(int position) {
            // 設置Page對應的Tab標題
            return tabTitles[position];
        }
    }

}

調用setupWithViewPager()方法傳入一個ViewPager對象，請確保該ViewPager對象已經通過setAdapter設置好了Adapter適配器
從源碼可以看出

public void setupWithViewPager(@Nullable final ViewPager viewPager) {
    if (mViewPager != null && mPageChangeListener != null) {
        // If we've already been setup with a ViewPager, remove us from it
        mViewPager .removeOnPageChangeListener( mPageChangeListener);
    }

    if (viewPager != null ) {
        final PagerAdapter adapter = viewPager.getAdapter();
        if (adapter == null) {
            throw new IllegalArgumentException( "ViewPager does not have a PagerAdapter set");
        }
    // ......

如果ViewPager的Adapter爲空，則會拋出IllegalArgumentException異常
把 TabLayout和 ViewPager 關聯起來，該方法相當於幫我們封裝好了 addOnPageChangeListener 和setOnTabSelectedListener ，幫我們節省了大量的代碼。