前言

TabLayout是屬於Android Design Support Library中的一個控制元件，頂部或者底部水平的Tab佈局，滑動或者點選切換的功能，今天我們簡單講解TabLayout的使用，重點講解如何自定義TabLayout的item，也就是每一個tab。
首先看看GooglePlay的這個介面。

TabLayout使用

新增依賴

compile 'com.android.support:design:23.4.0'

佈局

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

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

通常我們都搭配ViewPager+Fragment使用。
頁面用Fragment，放了一個小圖示。
然後是ViewPager的介面卡：

public class FragmentAdapter extends FragmentPagerAdapter {

    private String [] title = {"one","two","three","four"};
    private List<Fragment> fragmentList;
    public FragmentAdapter(FragmentManager fm,List<Fragment> fragmentList) {
        super
 
(fm);
        this.fragmentList = fragmentList;
    }
    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }
    @Override
    public int getCount() {
        return fragmentList.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return title[position];
    }
}

MainActivity：

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

        ContentFragment fragment1 = new ContentFragment();
        ContentFragment fragment2 = new ContentFragment();
        ContentFragment fragment3 = new ContentFragment();
        ContentFragment fragment4 = new ContentFragment();
        fragments.add(fragment1);
        fragments.add(fragment2);
        fragments.add(fragment3);
        fragments.add(fragment4);
        adapter = new FragmentAdapter(getSupportFragmentManager(),fragments);
        viewpager.setAdapter(adapter);
        tablayout.setupWithViewPager(viewpager);
    }

看看效果：

完成了，大家注意最後一行程式碼，作用是將TabLayout與ViewPager連線起來，其實看原始碼也就知道是通ViewPager的OnPageChangeListener監聽連線起來的。

但是有一點要注意，setupWithViewPager這個方法會先將tab清除然後再根據ViewPager的adapter裡的count去取pagetitle，這也就是有些同學遇到用addTab方法新增tab不起作用的問題。

當然TabLayout還有很多api可以使用，來改變TabLayout的樣式，新增圖示，以及滾動模式等等。

自定義TabItem

當這些api都不能滿足你的要求的時候，我們想自己控制每一個tab怎麼顯示顯示什麼內容。
ok，我不想要TabLayout下面的那條橫線可以把它設定為0dp。

app:tabIndicatorHeight="0dp"

item佈局

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

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/tab_background"
        android:padding="10dp"
        android:textColor="@drawable/tab_text_color"
        android:textSize="24sp" />
</LinearLayout>

我這裡寫的比較簡單，只有一個TextView。

MainActivity

先把adapter裡寫的title註釋掉。

//private String [] title = {"one","two","three","four"};

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

        fragments.add(new ContentFragment());
        fragments.add(new ContentFragment());
        fragments.add(new ContentFragment());
        fragments.add(new ContentFragment());
        fragments.add(new ContentFragment());
        fragments.add(new ContentFragment());
        fragments.add(new ContentFragment());
        fragments.add(new ContentFragment());
        fragments.add(new ContentFragment());

        adapter = new FragmentAdapter(getSupportFragmentManager(), fragments);
        viewpager.setAdapter(adapter);

        tablayout.setupWithViewPager(viewpager);

        for (int i = 0; i < adapter.getCount(); i++) {
            TabLayout.Tab tab = tablayout.getTabAt(i);//獲得每一個tab
            tab.setCustomView(R.layout.tab_item);//給每一個tab設定view
            if (i == 0) {
                // 設定第一個tab的TextView是被選擇的樣式
                tab.getCustomView().findViewById(R.id.tab_text).setSelected(true);//第一個tab被選中
            }
            TextView textView = (TextView) tab.getCustomView().findViewById(R.id.tab_text);
            textView.setText(titles[i]);//設定tab上的文字
        }
        tablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tab.getCustomView().findViewById(R.id.tab_text).setSelected(true);
                viewpager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                tab.getCustomView().findViewById(R.id.tab_text).setSelected(false);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

ok,大功告成。看效果