一、概述
TabLayout繼承關系.png
它也是design中新出的一個控件浴麻，用來實現(xiàn)選項卡切換的效果得问，以前我們常用RadioGroup+RadioButton或者TabHost等來實現(xiàn)，現(xiàn)在可以用TabLayout輕松的搞定软免；
二 宫纬、基本使用
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androidwanga.serenitynanian.serenityproject.TabLayoutActivity">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
</android.support.design.widget.CoordinatorLayout>
在Activity中的代碼設置如下：
mTabLayout = (TabLayout) findViewById(R.id.ac_tablayout);
//最基本的使用
mTabLayout.addTab(mTabLayout.newTab().setText("tab1"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab2"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab3"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab4"));
基本的效果圖.png
進本的使用方式還有另外一種，如下布局膏萧，直接在xml中填充布局選項：
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.androidwanga.serenitynanian.serenityproject.TabLayoutActivity">
<android.support.design.widget.TabLayout
app:tabMode="fixed"
android:id="@+id/ac_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:text="Tab1"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:text="Tab2"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:text="Tab3"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:text="Tab4"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.CoordinatorLayout>
一般情況下漓骚，布局的tab項是動態(tài)配置的，就不能這樣使用榛泛，必須在代碼中動態(tài)配置蝌蹂；
三、TabLayout常用的屬性
- 1.app:tabIndicatorColor 設置指示器的顏色曹锨；
- 2.app:tabIndicatorHeight 設置指示器的高度孤个；
- 3.app:tabTextColor 設置Tab文本默認的顏色，如果不設置沛简，默認黑色齐鲤；
- 4.app:tabSelectedTextColor 設置tab被選中的文本的顏色，如果不設置椒楣，默認是黑色给郊；
- 5.app:tabTextAppearance 設置tab文本樣式，一般需要為tab添加圖標時使用捧灰，引用一個style布局淆九，可以代替上面的3和4的設置，如果3、4炭庙、5同時設置跪另，5將不起作用；
- 6.app:tabBackground 設置tab的背景色煤搜；
- 7.app:tabGravity 設置tab項的對齊方式
- 1.center 居中顯示免绿；
- 2.fill 填滿顯示；
- 8.app:tabMode 有兩個值擦盾；
- 1.fixed 用于標題欄少于一屏幕的情況嘲驾，每個tab將平分屏幕的寬度；
- 2.scrollable 用于標題欄一屏幕顯示不下的情況迹卢，可以左右滾動辽故；如果占不滿一屏幕，只會占用一部分腐碱，效果不太好誊垢，具體的根據(jù)需求來設置；
- 9.app:tabContentStart 設置tab開始布局的位置距離左邊的距離症见，此時tabMode必須為scrollable才有效果喂走，否則無效果；
- 10.app:tabMinWidth 設置tab項的最小寬度谋作；
- 11.app:tabMaxWidth 設置tab項的最大寬度芋肠；如果tabMaxWidth小于tabMinWidth，會以tabMaxWidth為準遵蚜；
- 12.app:tabPadding 設置tab的內邊距：
- app:tabPaddingStart
- 2.app:tabPaddingBottom
- 3.app:tabPaddingTop
- 4.app:tabPaddingEnd
備注：以上屬性都能通過代碼設置
四 帖池、TabLayout中的代碼配置tab項
TabLayout.newTab() 創(chuàng)建標簽
TabLayout.addTab() 添加標簽 ：因為TabLayout繼承自HorizontalScrollView，所以可以直接添加View,內部使用addView（）吭净；
TabLayout.removeTab() 刪除標簽
TabLayout.removeTabAt() 通過索引刪除標簽
TabLayout.removeAllTabs() 刪除全部標簽
五 睡汹、添加監(jiān)聽
TabLayout.addOnTabSelectedListener(TabLayout.OnTabSelectedListener listener) 添加監(jiān)聽器；
TabLayout.removeOnTabSelectedListener(abLayout.OnTabSelectedListener listener) 取消監(jiān)聽器寂殉；
TabLayout.clearOnTabSelectedListeners() 清除所有的監(jiān)聽囚巴；
六 、獲取TabLayout的屬性
TabLayout.getSelectedTabPosition() 獲取當前選中的Tab的位置不撑；
TabLayout.getTabAt(int index) 根據(jù)索引獲取當前索引的Tab文兢；
TabLayout.getTabCount() 獲取tab的總數(shù)晤斩；
TabLayout.getTabMode() 獲取tab的mode焕檬；有對應的set方法；
TabLayout.getTabTextColors() 獲取對應tab的TextColor屬性澳泵；有對應的set方法实愚；
TabLayout.setupWithViewPager(ViewPager viewPager) 設置與之關聯(lián)的ViewPager，隨著ViewPager的滑動而滑動；
TabLayout和ViewPager常見的使用方式有兩種：
1.ViewPager包裹TabLayout進行嵌套腊敲，不需要設置setupWithViewPager击喂，如果嵌套了還設置了此方法，就會報錯;
2.如果沒有設置碰辅，則需要在ViewPager設置Adapter之后設置setupWithViewPager懂昂；
3.注意：只能ViewPager嵌套TabLayout,反了就會報錯，因為TabLayout中只能嵌套TabItem没宾；
七 凌彬、TabLatyou中的內部類：Tab
Tab表示TabLayout中的一個標簽;具體的屬性如下：
- boolean isSelected() tab是否被選中；
- 2.void setSelected() 設置tab為被選中狀態(tài)循衰；
- 3.Tab setText() 設置tab的文本內容铲敛；
- 4.String getText() 得到tab的文本內容；
- 5.Tab setIcon() 為tab設置圖標会钝；
- 6.Drawable getIcon() 獲取tab的圖標伐蒋；
- 7.Tab setCustomView(int resId or View view) 設置自定義的View，參數(shù)為資源id或View對象迁酸；
- 8.int getPosition() 獲取當前的位置先鱼；
八 、TabLayout自定義Tab布局--使用setCustomView
- 1.首先自定義一個布局奸鬓，item_tab.xml
<?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">
<ImageView
android:layout_width="40dp"
android:src="@mipmap/ic_launcher_round"
android:layout_gravity="center"
android:id="@+id/item_imageview"
android:layout_height="40dp" />
<TextView
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:id="@+id/item_textview"
android:layout_gravity="center"
android:text="desc"
android:gravity="center"
android:layout_height="wrap_content" />
</LinearLayout>
- 2.其次型型，在FragmentPageAdapter中重寫getPageTitle方法，返回null全蝶，其實不重寫也行闹蒜；然后自定義一個獲取View的方法，如下：
/**
* 使用我們自定義的布局時抑淫，這里返回null
* @param position
* @return
*/
@Override
public CharSequence getPageTitle(int position) {
return null ;
}
/**
* 定義一個方法 返回tab中要顯示的內容绷落；
* 注意：在我們使用自定義的tab時，將getPagerTitle返回null始苇，不設置也一樣的
* @param position
* @return
*/
public View getCustomTabView(int position) {
View view = LayoutInflater.from(mContext).inflate(R.layout.item_tablayout, null);
ImageView image = (ImageView) view.findViewById(R.id.item_imageview);
TextView textView = (TextView) view.findViewById(R.id.item_textview);
textView.setText(titles.get(position));
image.setImageResource(images[0]);
return view ;
}
- 3.在Activity中給每一個tab項設置自定義的View即可砌烁；在setupWithViewPager方法之后調用上述方法給每一個Tab設置自定義View；
List<String> titles = new ArrayList<>();
for (int i = 'A';i<'z';i++) {
titles.add("" + (char) i);
}
List<Fragment> fragments = new ArrayList<>();
for (String title : titles) {
DemoFragment fragment = new DemoFragment().newInstance(title);
fragments.add(fragment);
}
DemoFragmentAdapter adapter = new DemoFragmentAdapter(this,getSupportFragmentManager(),titles,fragments);
mViewPager.setAdapter(adapter);
mTabLayout.setupWithViewPager(mViewPager);
/**
* 給每一個Tab設置自定義布局
*/
for (int i = 0;i<mTabLayout.getTabCount();i++) {
TabLayout.Tab tab_item = mTabLayout.getTabAt(i);
tab_item.setCustomView(adapter.getCustomTabView(i));
}
