上圖是簡(jiǎn)書(shū)Android端的主頁(yè)Tab,在其他的App中Tab也是很常見(jiàn)的，它的實(shí)現(xiàn)方式也有很多：TabHost，自定義控件（第三方庫(kù)），RadioGroup等等。這里主要介紹Android Design庫(kù)中的TabLayout的使用。

什么是TabLayout

在源碼中給出了TabLayout的定義：TabLayout provides a horizontal layout to display tabs，意思很明顯：TabLayout提供了一個(gè)水平的布局用來(lái)展示Tabs。

特別說(shuō)明：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"

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.顯示效果

感覺(jué)還不錯(cuò)吧，挺簡(jiǎn)單就實(shí)現(xiàn)了這個(gè)UI效果。

方式二：

<android.support.design.widget.TabLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"><android.support.design.widget.TabItemandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Tab1"/>...</android.support.design.widget.TabLayout>

這樣同樣也可以實(shí)現(xiàn)方式一的效果，可是單單這樣并不能滿(mǎn)足我們。于是接下來(lái)看看有什么屬性可以使用。

3.改變下TabLayout的顏色

上面的Tab顏色感覺(jué)不好看，打算換換：

<!--1.改變選中字體的顏色--> app:tabSelectedTextColor="@android:color/holo_orange_light"<!--2.改變未選中字體的顏色--> app:tabTextColor="@color/colorPrimary"<!--3.改變指示器下標(biāo)的顏色--> app:tabIndicatorColor="@android:color/holo_orange_light"<!--4.改變整個(gè)TabLayout的顏色--> app:tabBackground="color"

于是現(xiàn)在我的Tab變成了這個(gè)樣子：

4.改變TabLayout內(nèi)部字體大小

總覺(jué)得這個(gè)字體有點(diǎn)小了，于是想找方法把這個(gè)字變得大一點(diǎn)，

好像沒(méi)有直接變大的方法，可是找到了這個(gè)：

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//設(shè)置文字的外貌

效果：

5.改變指示器下標(biāo)的高度

既然字體變大了，指示器太小就顯得不太好看了，

設(shè)置指示器下標(biāo)的高度：

app:tabIndicatorHeight="4dp"

效果：

6.添加圖標(biāo)

有時(shí)候Tab只有文字感覺(jué)有點(diǎn)單調(diào)了：

tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

7.Tab的模式

數(shù)據(jù)很多的時(shí)候我們應(yīng)該怎么辦呢，簡(jiǎn)書(shū)中的第二個(gè)Tab就是可以滑動(dòng)的：

我們先多加幾個(gè)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"

默認(rèn)是fixed：固定的，標(biāo)簽很多時(shí)候會(huì)被擠壓，不能滑動(dòng)。

效果如下：

8.加入Padding

設(shè)置Tab內(nèi)部的子控件的Padding：

app:tabPadding="xxdp"app:tabPaddingTop="xxdp"app:tabPaddingStart="xxdp"app:tabPaddingEnd="xxdp"app:tabPaddingBottom="xxdp"

設(shè)置整個(gè)TabLayout的Padding：

app:paddingEnd="xxdp"app:paddingStart="xxdp"

9.內(nèi)容的顯示模式

app:tabGravity="center"//居中，如果是fill，則是充滿(mǎn)

10.Tab的寬度限制
設(shè)置最大的tab寬度：

app:tabMaxWidth="xxdp"

設(shè)置最小的tab寬度：

app:tabMinWidth="xxdp"

11.Tab的“Margin”

TabLayout開(kāi)始位置的偏移量：

app:tabContentStart="100dp"

12.TabLayout的監(jiān)聽(tīng)事件

選中了某個(gè)tab的監(jiān)聽(tīng)事件OnTabSelectedListener()：

tabLayout.setOnTabSelectedListener(newTabLayout.OnTabSelectedListener() {@Overridepublic voidonTabSelected(TabLayout.Tab tab) {//選中了tab的邏輯}@Overridepublic voidonTabUnselected(TabLayout.Tab tab) {//未選中tab的邏輯}@Overridepublic voidonTabReselected(TabLayout.Tab tab) {//再次選中tab的邏輯}});

13.和ViewPager的聯(lián)動(dòng)

最后也是最重要的：

tabLayout.setupWithViewPager(Viewpager);

一行代碼和ViewPager聯(lián)動(dòng)起來(lái)，簡(jiǎn)單粗暴。

14.簡(jiǎn)單模仿簡(jiǎn)書(shū)Android端的Tab

主要就是設(shè)置下標(biāo)的高度為0，相當(dāng)于沒(méi)有下標(biāo)。

app:tabIndicatorHeight="0dp"

然后設(shè)置背景顏色以及選中文字顏色

app:tabSelectedTextColor="#ff7a61" app:tabBackground="#f6f4f2"//這里不能直接寫(xiě)RGB，需要@color/xx

最后設(shè)置Tab的模式：

app:tabMode="scrollable"

當(dāng)然Tablayout還可以做很多的樣式，如果有關(guān)于Tablayout的注意事項(xiàng)或者相關(guān)知識(shí)的文章，希望大家可以分享給我，多謝！

15.仿京東商品詳情Android端的Tab

主要原理是setCustomView()加載自定義視圖，來(lái)實(shí)現(xiàn)字體大小的改變，默認(rèn)的TabLayout不能改變。

Design庫(kù)-TabLayout仿京東商品詳情T(mén)ab

補(bǔ)充：默認(rèn)選中某項(xiàng)

tablayout.getTabAt(position).select();

設(shè)置tab的margin

public static void setIndicator(Context context, TabLayout tabs, int leftDip, int rightDip) {Class<?> tabLayout = tabs.getClass();Field tabStrip = null;try {tabStrip = tabLayout.getDeclaredField("mTabStrip");} catch (NoSuchFieldException e) {e.printStackTrace();}tabStrip.setAccessible(true);LinearLayout ll_tab = null;try {ll_tab = (LinearLayout) tabStrip.get(tabs);} catch (IllegalAccessException e) {e.printStackTrace();}int left = (int) (getDisplayMetrics(context).density * leftDip);int right = (int) (getDisplayMetrics(context).density * rightDip);for (int i = 0; i < ll_tab.getChildCount(); i++) {View child = ll_tab.getChildAt(i);child.setPadding(0, 0, 0, 0);LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);params.leftMargin = left;params.rightMargin = right;child.setLayoutParams(params);child.invalidate();}}

文／自導(dǎo)自演的機(jī)器人（簡(jiǎn)書(shū)作者）
原文鏈接：http://www.jianshu.com/p/2b2bb6be83a8
著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，并標(biāo)注“簡(jiǎn)書(shū)作者”。

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專(zhuān)家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的TabLayout属性详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。