1.什麼是TabLayout
在源碼中給出了TabLayout的定義：
TabLayout provides a horizontal layout to display tabs.
意思很明顯：TabLayout提供了一個水平的佈局用來展示Tabs。
Design庫：AS有直接的引用，如果是Eclipse這裏提供一個通道-Design庫
特別說明：
Caused by: java.lang.IllegalArgumentException: You need to use a Theme.AppCompat theme (or descendant) with the design library.
在清單文件中設置如下代碼即可：
android:theme="@style/Theme.AppCompat"
2.TabLayout的基本使用方式
方式一：
1.在佈局中加入該控件：
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
2.在代碼中
tabLayout= (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
3.顯示效果
感覺還不錯吧，挺簡單就實現了這個UI效果。
方式二：
<android.support.design.widget.TabLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1"/>
...
</android.support.design.widget.TabLayout>
這樣同樣也可以實現方式一的效果，可是單單這樣並不能滿足我們。於是接下來看看有什麼屬性可以使用。
3.改變下TabLayout的顏色
上面的Tab顏色感覺不好看，打算換換：
1.改變選中字體的顏色
app:tabSelectedTextColor="@android:color/holo_orange_light"
2.改變未選中字體的顏色
app:tabTextColor="@color/colorPrimary"
3.改變指示器下標的顏色
app:tabIndicatorColor="@android:color/holo_orange_light"
4.改變整個TabLayout的顏色
app:tabBackground="color"
於是現在我的Tab變成了這個樣子：
4.改變TabLayout內部字體大小
總覺得這個字體有點小了，於是想找方法把這個字變得大一點，
好像沒有直接變大的方法，可是找到了這個：
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//設置文字的外貌
效果：
5.改變指示器下標的高度
既然字體變大了，指示器太小就顯得不太好看了，
設置指示器下標的高度：
app:tabIndicatorHeight="4dp"
效果：
6.添加圖標
有時候Tab只有文字感覺有點單調了：
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
7.Tab的模式
數據很多的時候我們應該怎麼辦呢，簡書中的第二個Tab就是可以滑動的：
我們先多加幾個tab：
tabLayout.addTab(tabLayout.newTab().setText("Tab 4"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 5"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 6"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 7"));
然後設置屬性爲：
app:tabMode="scrollable"
默認是fixed：固定的，標籤很多時候會被擠壓，不能滑動。
效果如下：
8.加入Padding
設置Tab內部的子控件的Padding：
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"
設置整個TabLayout的Padding：
app:paddingEnd="xxdp"
app:paddingStart="xxdp"
9.內容的顯示模式
app:tabGravity="center"//居中，如果是fill，則是充滿
10.Tab的寬度限制
設置最大的tab寬度：
app:tabMaxWidth="xxdp"
設置最小的tab寬度：
app:tabMinWidth="xxdp"
11.Tab的“Margin”
TabLayout開始位置的偏移量：
app:tabContentStart="100dp"
12.TabLayout的監聽事件
選中了某個tab的監聽事件OnTabSelectedListener()：
tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {
@Override
public voidonTabSelected(TabLayout.Tab tab) {
//選中了tab的邏輯
}
@Override
public voidonTabUnselected(TabLayout.Tab tab) {
//未選中tab的邏輯
}
@Override
public voidonTabReselected(TabLayout.Tab tab) {
//再次選中tab的邏輯
}
});
13.和ViewPager的聯動
最後也是最重要的：
tabLayout.setupWithViewPager(Viewpager);
一行代碼和ViewPager聯動起來，簡單粗暴。
14.簡單模仿簡書Android端的Tab
主要就是設置下標的高度爲0，相當於沒有下標。
app:tabIndicatorHeight="0dp"
然後設置背景顏色以及選中文字顏色
app:tabSelectedTextColor="#ff7a61"
app:tabBackground="#f6f4f2"//這裏不能直接寫RGB，需要@color/xx
最後設置Tab的模式：
app:tabMode="scrollable"
當然Tablayout還可以做很多的樣式，如果有關於Tablayout的注意事項或者相關知識的文章，希望大家可以分享給我，多謝！
15.仿京東商品詳情Android端的Tab
主要原理是setCustomView()加載自定義視圖，來實現字體大小的改變，默認的TabLayout不能改變。
補充：默認選中某項
tablayout.getTabAt(position).select();
原文鏈接：http://www.jianshu.com/p/2b2bb6be83a8#
著作權歸作者所有，轉載請聯繫作者獲得授權，並標註“簡書作者”。
