最近閑來無事，就想學(xué)習(xí)一下android 新出的tablayout控件浑度，原先是用radioGroup+fragment，于是我重新用tablayout+fragment重構(gòu)了一下。因?yàn)閠ablayout是support design包的，因此需要在build.gradle文件中添加：
compile'com.android.support:design:23.3.0'
按照國際慣例挟秤，先上圖：
我們先開始寫布局
xml version="1.0"encoding="utf-8"?><LinearLayout?xmlns:android="http://schemas.android.com/apk/res/android"
? ? ? ? ?android:layout_width="match_parent"
? ? ? ? android:layout_height="match_parent"
? ? ? ? ?android:orientation="vertical">
? ? ?<RelativeLayout ?android:id="@+id/main_client"
? ? ? ? ? ? android:layout_width="match_parent"
? ? ? ? ? ? android:layout_height="0px"
? ? ? ? ? ? android:layout_weight="1"/>
? ? <android.support.design.widget.TabLayout
? ? ? ? ? ?android:id="@+id/main_tablayout"
? ? ? ? ? android:layout_width="match_parent"
? ? ? ? ? android:layout_height="wrap_content"
? ? ? ? ? android:background="@color/color_title_bar"/>
</LinearLayout>
布局很簡(jiǎn)單，就包括一個(gè)相對(duì)布局和一個(gè)tablayout控件,寫好之后呢抄伍，我就想著艘刚，tablayout如何設(shè)置相應(yīng)的屬性，比如選中某個(gè)tab后截珍，下方是否有選中的線攀甚，比如下圖(這是tabLayout默認(rèn)的顯示效果)，如果想更改線的高度岗喉，顏色或者直接不讓線顯示秋度，該怎么辦呢？
跟蹤tablayout的源碼查看钱床，發(fā)現(xiàn)tabLayout默認(rèn)使用Widget_Design_TabLayout這個(gè)theme
其中可以看到 tabGravity和tabMode這2個(gè)屬性静陈，但是我們那個(gè)選中的線的顏色和高度在哪呢？注意看它還有個(gè)父類诞丽，繼續(xù)跟蹤：
看到一個(gè)tabIndicatorColor屬性，猜想一下拐格，這個(gè)是否就是選中線的顏色僧免？那個(gè)height是否是選中的線的高度？于是查看一下
發(fā)現(xiàn)還真是捏浊，高度同理懂衩，我就不帶著大家看了，因此我們?nèi)绻氚堰x中的線的顏色去掉金踪，就可以把高度浊洞，設(shè)置為0就行了，因此如果想要定制tab的一些屬性胡岔，比如顏色法希，選中的字體的顏色等，就可以寫下屬性：
比如我的項(xiàng)目里靶瘸，就加了一個(gè)style苫亦，來得到我需要的效果
其中style為：在res/values/styles目錄下
<--主界面tablayout-->
<style ?name="MainTabLayout">
? ? ? <item ?name="tabIndicatorColor">@android:color/transparent ?</item>
? ? ? <item ?name="tabIndicatorHeight">0dp ?</item>
? ? ?<item ?name="tabPaddingStart">12dp ?</item>
? ? ?<item ?name="tabPaddingEnd">12dp </item>
</style>
這些屬性具體代表什么意思毛肋，請(qǐng)參考?安卓developer
第二步：寫activity
因?yàn)橛玫搅薴ragment，所以我這里用到了FragmentPagerAdapter
廢話不多說了屋剑，直接上代碼吧
tabLayout.setTabMode()這個(gè)是tab的模式润匙，有4種模式，如下圖：
這個(gè)模式也可以在xml中設(shè)置
因?yàn)槭褂昧薴ragment唉匾，所以這里使用了FragmentPagerAdapter來管理fragment
mainPageAdapter
tabLayout已經(jīng)初始化好了tab孕讳，fragment也已經(jīng)初始化好了，現(xiàn)在需要將fragment與container綁定(container即為相對(duì)布局巍膘，也就是中間顯示的那塊),當(dāng)點(diǎn)擊切換tab時(shí)厂财，container顯示對(duì)應(yīng)的fragment
來實(shí)現(xiàn)點(diǎn)擊切換tab的操作：
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
int position = tab.getPosition();
Fragment fragment = (Fragment)adapter.instantiateItem(container, position);
adapter.setPrimaryItem(container, pos, fragment);
adapter.finishUpdate(container);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
給tabLayout加個(gè)切換的監(jiān)聽，setOnTabSelectedListener這個(gè)監(jiān)聽典徘，看名字就能大概猜出來是什么意思蟀苛，就是當(dāng)tab頁面被選中時(shí)，會(huì)調(diào)用這個(gè)方法逮诲，當(dāng)tab頁面被選中時(shí)帜平，切換目前的fragment。并且將container與fragment聯(lián)合在一起了
還有一個(gè)問題梅鹦，就是裆甩，第一次進(jìn)頁面，如何顯示默認(rèn)選中的頁面齐唆？
我們看到代碼中的initTab中嗤栓，里面有個(gè)
這段代碼，就是給tabLayout加上tab箍邮，并且后面的第二個(gè)參數(shù)茉帅，當(dāng)i==0的時(shí)候，給了true锭弊，其他都是false堪澎，查看源碼發(fā)現(xiàn)，最后會(huì)執(zhí)行下面這段代碼：
因此會(huì)回調(diào)我們寫的那個(gè)onTabSelected方法,會(huì)默認(rèn)選擇第一個(gè)
總結(jié)：
一味滞、在xml里定義 tabLayout樱蛤，相對(duì)布局
二、在代碼里剑鞍，給tablayout add 上tab昨凡，并且寫上一個(gè)用于管理fragment的adapter
三、給tablayout加個(gè)監(jiān)聽蚁署，用于切換tab時(shí)便脊，顯示切換的那個(gè)fragment
注意：
要在fragment里面，加上這段代碼光戈，如果不加的話就轧，會(huì)出現(xiàn)fragment重疊的現(xiàn)象证杭，
跟蹤下 ?adapter.setPrimaryItem(mContainer, pos, fragment) ??源碼，
發(fā)現(xiàn)這段代碼是用來控制哪個(gè)fragment'顯示妒御，哪個(gè)隱藏解愤，所以要在每個(gè)fragment里加上 那段代碼，否則都會(huì)顯示乎莉，就出現(xiàn)重疊的現(xiàn)象
終于寫完了送讲，類似我了，
