Design庫-TabLayout屬性詳解

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


1.什么是TabLayout

在源碼中給出了TabLayout的定義:

TabLayout provides a horizontal layout to display tabs.

意思很明顯:TabLayout提供了一個(gè)水平的布局用來展示Tabs。

Design庫:AS有直接的引用,如果是Eclipse這里提供一個(gè)通道-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.顯示效果


感覺還不錯(cuò)吧,挺簡(jiǎn)單就實(shí)現(xiàn)了這個(gè)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>

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


3.改變下TabLayout的顏色

上面的Tab顏色感覺不好看,打算換換:

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)部字體大小

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

好像沒有直接變大的方法,可是找到了這個(gè):

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

效果:


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

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

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

app:tabIndicatorHeight="4dp"

效果:



6.添加圖標(biāo)

有時(shí)候Tab只有文字感覺有點(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)書中的第二個(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"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)聽事件

選中了某個(gè)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)動(dòng)

最后也是最重要的:

tabLayout.setupWithViewPager(Viewpager);

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


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


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

app:tabIndicatorHeight="0dp"

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

app:tabSelectedTextColor="#ff7a61"

app:tabBackground="#f6f4f2"http://這里不能直接寫RGB,需要@color/xx

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

app:tabMode="scrollable"

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


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

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

Design庫-TabLayout仿京東商品詳情Tab


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

tablayout.getTabAt(position).select();

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,466評(píng)論 25 708
  • 序 上圖是簡(jiǎn)書Android端的主頁Tab,在其他的App中Tab也是很常見的,它的實(shí)現(xiàn)方式也有很多:TabHos...
    小莊bb閱讀 1,870評(píng)論 0 8
  • 前言:本文只針對(duì)tab layout與viewpager聯(lián)用來講的,以前總是覺得tablayout使用特別麻煩,所...
    laer_L閱讀 5,377評(píng)論 23 35
  • 林默再一次見到顧然是在一家咖啡館,一家名叫“轉(zhuǎn)角”的咖啡館。初見這個(gè)小店時(shí),林默哀傷的笑了,自己沒實(shí)現(xiàn)的夢(mèng)想總算是...
    奕森閱讀 505評(píng)論 3 2
  • 官方原文 字符和字形 一個(gè)字符是帶有意義的書面語言的最小單位。 字符可以對(duì)應(yīng)于語言的特定聲音,羅馬字母的字母也可以...
    紅袖吾狗閱讀 1,474評(píng)論 0 0