TabLayout繼承自HorizontalScrollView，它提供了一個水平方向的佈局來顯示tabs（標籤）

還是先來看看官方API吧

每一個標籤都是一個TabLayout.Tab的例項物件，你可以通過newTab（）方法來建立tabs，你可以通過setText(int)方法來修改tab標籤的名稱，通過setIcon(int)方法來修改tab標籤的圖示。要想顯示tab，你需要通過addTab(Tab)方法將tab新增到layout裡面，例如：

TabLayout tabLayout = ....;
tabLayout.addTab(tabLayout.newTab.setText("A"));
tabLayout.addTab(tabLayout.newtab.setText("B"));
tabLayout.addTab(tabLayout.newtab.setText("C"));
 

你需要通過setOnTabSelectedListener(OnTabSelectedListener)方法給TabLayout設定一個監聽事件，以方便當tab的選中狀態發生改變的時候能做一些你想要做的事情。如果你將TabLayout和ViewPager結合起來使用，你可以通過setTabsFromPagerAdapter(PagerAdapter)將讓TabLayout的tab標籤顯示PagerAdapter裡面所給出的標題。你同樣需要通過TabLayout.TabLayoutOnPageChangeListener轉發滑動和tab標籤選中狀態的改變給TabLayout，就如下面這樣

ViewPager viewPager = ...;
TabLayout tabLayout = ...;
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
 

TabLayout.OnTabSelectedListener，當TabLayout的tabs標籤的選中狀態發生改變的時候回撥的介面，裡面有三個方法，如下

//當某一個tab已經是選中狀態時，又被使用者選中時回撥
onTabReselected(TabLayout.Tab tab);
//當某一個tab進入選中狀態的時候回撥
onTabSelected(TabLayout.Tab tab);
//當某一個tab從選中狀態變成未選中狀態的時候回撥
onTabUnSelected(TabLayout.tab);

TabLayout.Tab，一個Tab的例項就是TabLayout裡面的一個tab標籤，可以通過newTab()方法來建立Tab的例項物件，常用的方法有

//設定Tab上面顯示的文字
setText(int resId);
setText(CharSequence text);
//設定tab上面顯示的圖示
setIcon(int resId);
setIcon(Drawable drawable);
//設定tab上顯示的佈局
setCustomView(int layoutId);
setCustomView(View view);
//判斷是否是選中狀態
isSelected();
//選中某個tab
select();
//獲取當前tab在ActionBar裡面的索引
getPosition();
//設定一個tag
setTag(Object);

TabLayout.TabLayoutOnPageChangeListener

它是一個ViewPager.OnPageChangeListener，提供給TabLayout必要的回撥來保證tab的position和ViewPager的切換是同步變化的

TabLayout.ViewPagerOnTabSelectedListener

它是一個TabLayout.OnTabSelectedListener，提供給ViewPager必要的回撥來保證tab的position和ViewPager的切換時同步變化的

注意了，當你的ViewPager和TabLayout結合使用的時候，必須要給他們兩個分別設定這兩個監聽事件，如果只給一個設定監聽事件，那麼必然會出現有一個切換 的時候另外一個不同步切換的問題，設定方法如下。

TabLayout tabLayout = ...;
ViewPager viewPager = ...;
//給TabLayout設定監聽事件
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPgaer));
//給ViewPager設定監聽事件
viewPapger.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

TabLayout一些方法

//給TabLayout新增Tab標籤
addTab(TabLayout.Tab tab,boolean setSelected);
addTab(TabLayout.Tab tab,int position);
addTab(TabLayout.Tab tab, int position, boolean setSelected);
addTab(TabLayout.Tab tab);
//獲取到TabLayout選中的Tab的位置
getSelectedTabPosition();
//獲取到指定位置的Tab標籤
getTabAt(int index);
//獲取TabLayout上有多少個Tab標籤
getTabCount();
//TabLayout的模式，有兩種取值，一個是MODE_FIXED，一個是MODE_SCROLLABLE，前者表示將所有的標籤都顯示出來，後者表示，標籤只顯示出部分，其他的標籤可以通過滑動顯示出來
getTabMode();
setTabMode(int mode);
//建立一個Tab物件
newTab();
//移除標籤
removeAllTabs();
removeTabAt(int position);
removeTab(TabLayout.Tab tab);
//設定選中Tab的顏色指示器
setSelectedTabIndicatorColor(int color);
//設定Tab在不同狀態下的text顏色
setTabTextColors(ColorStateList textColor);
setTabTextColors(int normalColor,int selectedColor);
//從給定的PagerAdapter生成tab標籤
setTabsFromPagerAdapter(PagerAdapter adapter);
//將TabLayout和ViewPager關聯，測試了下，這個方法可以直接關聯ViewPager和TabLayout，但是得通過setTabsFromPagerAdapter(PagerAdapter)方法設定Tabs
setupWithViewPager(ViewPager viewPager)

常用的XML屬性

<!--設定選中時的tab字型顏色-->
app:tabSelectedTextColor=""
<!--設定未選中時的tab字型顏色-->
app:tabTextColor=""
<!--設定tab指示器的顏色-->
app:tabIndicatorColor=""

該說的都說完了，下面來看看一個簡單的Demo，到目前為止，我們學習了三個控制元件了

XML程式碼如下所示

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.destiny.tablayout.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="#ffff00"
            android:gravity="center"
            android:text="我依舊是頭部的可以滑動出螢幕的控制元件"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import com.destiny.tablayout.adapter.MyPagerAdapter;
import com.destiny.tablayout.fragment.AFragment;
import com.destiny.tablayout.fragment.BFragment;
import com.destiny.tablayout.fragment.CFragment;
import com.destiny.tablayout.fragment.DFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List<Fragment> fragments;
    private MyPagerAdapter adapter;
    private String[] tabs = {"A", "B", "C", "D", "E", "F", "G"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        initData();
    }

    private void initData() {
        for (int i = 0; i < tabs.length; i++) {
            tabLayout.addTab(tabLayout.newTab().setText(tabs[i]).setIcon(R.mipmap.ic_launcher));
        }
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//設定TabLayout的模式
        tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#ff0000"));//設定選中的Tab下面的指示器顏色
        fragments = new ArrayList<>();
        fragments.add(AFragment.newInstance());
        fragments.add(BFragment.newInstance());
        fragments.add(CFragment.newInstance());
        fragments.add(DFragment.newInstance());
        adapter = new MyPagerAdapter(getSupportFragmentManager(), fragments);
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));//設定聯動
        tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));//設定聯動
    }
}