序
上圖是簡(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不能改變。
補(bǔ)充:默認(rèn)選中某項(xiàng)
tablayout.getTabAt(position).select();