轉自：http://www.jianshu.com/p/2b2bb6be83a8
序
上圖是簡書Android端的首頁Tab,在其他的App中Tab也是很常見的，它的實作方式也有很多：TabHost，自定義控件（第三方庫），RadioGroup等等。這裡主要介紹Android Design庫中的TabLayout的使用。
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不能改變。
Design庫-TabLayout仿京東商品詳情Tab
補充：預設選中某項
tablayout.getTabAt(position).select();
文／自導自演的機器人（簡書作者）
原文連結：http://www.jianshu.com/p/2b2bb6be83a8