上圖是簡書Android端的主頁Tab,在其他的App中Tab也是很常見的，它的實現方式也有很多：TabHost，自定義控件（第三方庫），RadioGroup等等。這裏主要介紹Android Design庫中的TabLayout的使用。
優秀文章:
一.什麼是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.
在清單文件中設置如下代碼即可：
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.顯示效果
感覺還不錯吧，挺簡單就實現了這個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>
這樣同樣也可以實現方式一的效果，可是單單這樣並不能滿足我們。於是接下來看看有什麼屬性可以使用。
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"
於是現在我的Tab變成了這個樣子：
4.改變TabLayout內部字體大小
總覺得這個字體有點小了，於是想找方法把這個字變得大一點，
好像沒有直接變大的方法，可是找到了這個：
app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//設置文字的外貌
效果：
5.改變指示器下標的高度
既然字體變大了，指示器太小就顯得不太好看了，
設置指示器下標的高度：
app:tabIndicatorHeight="4dp"
效果：
6.添加圖標
有時候Tab只有文字感覺有點單調了：
tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));
7.Tab的模式
數據很多的時候我們應該怎麼辦呢，簡書中的第二個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"));
然後設置屬性爲：
app:tabMode="scrollable"
默認是fixed：固定的，標籤很多時候會被擠壓，不能滑動。
效果如下：
8.加入Padding
設置Tab內部的子控件的Padding：
app:tabPadding="xxdp"
app:tabPaddingTop="xxdp"
app:tabPaddingStart="xxdp"
app:tabPaddingEnd="xxdp"
app:tabPaddingBottom="xxdp"
設置整個TabLayout的Padding：
app:paddingEnd="xxdp"
app:paddingStart="xxdp"
9.內容的顯示模式
app:tabGravity="center"//居中，如果是fill，則是充滿
10.Tab的寬度限制
設置最大的tab寬度：
app:tabMaxWidth="xxdp"
設置最小的tab寬度：
app:tabMinWidth="xxdp"
11.Tab的“Margin”
TabLayout開始位置的偏移量：
app:tabContentStart="100dp"
12.TabLayout的監聽事件
選中了某個tab的監聽事件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的聯動
最後也是最重要的：
tabLayout.setupWithViewPager(Viewpager);
一行代碼和ViewPager聯動起來，簡單粗暴。
14.簡單模仿簡書Android端的Tab
主要就是設置下標的高度爲0，相當於沒有下標。
app:tabIndicatorHeight="0dp"
然後設置背景顏色以及選中文字顏色
app:tabSelectedTextColor="#ff7a61"
app:tabBackground="#f6f4f2"//這裏不能直接寫RGB，需要@color/xx
最後設置Tab的模式：
app:tabMode="scrollable"
當然Tablayout還可以做很多的樣式，如果有關於Tablayout的注意事項或者相關知識的文章，希望大家可以分享給我，多謝！
15.仿京東商品詳情Android端的Tab
主要原理是setCustomView()加載自定義視圖，來實現字體大小的改變，默認的TabLayout不能改變。
補充：默認選中某項
tablayout.getTabAt(position).select();
三,實現下圖的效果,需要自定義tab
2.1,佈局屬性設置
<android.support.design.widget.TabLayout
android:id="@+id/home_tab"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabBackground="@color/freecolor_white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/home_page"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
2.2,代碼設置
private void intiUI(View view) {
mHome_tab = (TabLayout) view.findViewById(R.id.home_tab);
mHome_page = (ViewPager) view.findViewById(R.id.home_page);
mHome_page.setAdapter(new MainFragmentPagerAdapter(getActivity().getSupportFragmentManager(),titles));
mHome_page.setOffscreenPageLimit(2);//設置預加載的頁面數量,設置0無效,因爲源碼最低值是1
//方法的調用必須在viewpager設置完適配器後調用，如果在設置適配器之前調用會拋異常
mHome_tab.setupWithViewPager(mHome_page);
setCustomeTab();
initPageListener();
}
private void setCustomeTab() {
for (int i = 0; i < titles.length; i++) {
TabLayout.Tab tab = mHome_tab.getTabAt(i);//獲得每一個tab
tab.setCustomView(R.layout.my_tablayout);//給每一個tab設置view
TextView mTv_custome = (TextView) tab.getCustomView().findViewById(R.id.tv_title);
mTv_custome.setText(titles[i]);//設置tab上的文字
if (i == 0) {
setChecked(mTv_custome);
}
}
}
private void setChecked(TextView mTv_custome) {
mTv_custome.setSelected(true);
mTv_custome.setBackgroundResource(R.drawable.bg);
mTv_custome.setTextColor(getResources().getColor(R.color.freecolor_white));
}
private void initPageListener() {
mHome_tab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
TextView textView = (TextView) tab.getCustomView().findViewById(R.id.tv_title);
setChecked(textView);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
TextView textView = (TextView) tab.getCustomView().findViewById(R.id.tv_title);
textView.setBackgroundColor(getResources().getColor(R.color.freecolor_white));
textView.setTextColor(getResources().getColor(R.color.tv_black));
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}