轉(zhuǎn)載自：http://www.itdecent.cn/p/2b2bb6be83a8
序
[圖片上傳失敗...(image-dfa228-1524041292185)]
上圖是簡書Android端的主頁Tab,在其他的App中Tab也是很常見的，它的實現(xiàn)方式也有很多：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.
在清單文件中設(shè)置如下代碼即可：
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.顯示效果
[圖片上傳失敗...(image-250b17-1524041292185)]
感覺還不錯吧，挺簡單就實現(xiàn)了這個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>
這樣同樣也可以實現(xiàn)方式一的效果，可是單單這樣并不能滿足我們。于是接下來看看有什么屬性可以使用。
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"
于是現(xiàn)在我的Tab變成了這個樣子：
[圖片上傳失敗...(image-be2bf-1524041292185)]
4.改變TabLayout內(nèi)部字體大小
總覺得這個字體有點小了，于是想找方法把這個字變得大一點，
好像沒有直接變大的方法，可是找到了這個：
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"http://設(shè)置文字的外貌
效果：
[圖片上傳失敗...(image-fd6b81-1524041292185)]
5.改變指示器下標的高度
既然字體變大了，指示器太小就顯得不太好看了，
設(shè)置指示器下標的高度：
app:tabIndicatorHeight="4dp"
效果：
[圖片上傳失敗...(image-626974-1524041292184)]
6.添加圖標
有時候Tab只有文字感覺有點單調(diào)了：
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
[圖片上傳失敗...(image-21dd3b-1524041292184)]
7.Tab的模式
數(shù)據(jù)很多的時候我們應該怎么辦呢，簡書中的第二個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"));
然后設(shè)置屬性為：
app:tabMode="scrollable"
默認是fixed：固定的，標簽很多時候會被擠壓，不能滑動。
效果如下：
[圖片上傳失敗...(image-8d3ef6-1524041292184)]
8.加入Padding
設(shè)置Tab內(nèi)部的子控件的Padding：
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"
設(shè)置整個TabLayout的Padding：
app:paddingEnd="xxdp"
app:paddingStart="xxdp"
9.內(nèi)容的顯示模式
app:tabGravity="center"http://居中，如果是fill，則是充滿
10.Tab的寬度限制
設(shè)置最大的tab寬度：
app:tabMaxWidth="xxdp"
設(shè)置最小的tab寬度：
app:tabMinWidth="xxdp"
11.Tab的“Margin”
TabLayout開始位置的偏移量：
app:tabContentStart="100dp"
12.TabLayout的監(jiān)聽事件
選中了某個tab的監(jiān)聽事件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的聯(lián)動
最后也是最重要的：
tabLayout.setupWithViewPager(Viewpager);
一行代碼和ViewPager聯(lián)動起來，簡單粗暴。
14.簡單模仿簡書Android端的Tab
[圖片上傳失敗...(image-fa5ce0-1524041292184)]
主要就是設(shè)置下標的高度為0，相當于沒有下標。
app:tabIndicatorHeight="0dp"
然后設(shè)置背景顏色以及選中文字顏色
app:tabSelectedTextColor="#ff7a61"
app:tabBackground="#f6f4f2"http://這里不能直接寫RGB，需要@color/xx
最后設(shè)置Tab的模式：
app:tabMode="scrollable"
當然Tablayout還可以做很多的樣式，如果有關(guān)于Tablayout的注意事項或者相關(guān)知識的文章，希望大家可以分享給我，多謝！
15.仿京東商品詳情Android端的Tab
主要原理是setCustomView()加載自定義視圖，來實現(xiàn)字體大小的改變，默認的TabLayout不能改變。
[圖片上傳失敗...(image-3ab4c6-1524041292184)]
補充：默認選中某項
tablayout.getTabAt(position).select();
作者：自導自演的機器人
鏈接：http://www.itdecent.cn/p/2b2bb6be83a8
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
