一。常用方法解析：
1.mTabLayout.setTabGravity
mTabLayout.setTabMode
//必須和Mode是MODE_FIXED才管用骑疆，
// GRAVITY_FILL：平分tablayout的寬度給每個(gè)標(biāo)簽
// GRAVITY_CENTER：所有的標(biāo)簽居中展示鹿榜，標(biāo)簽的寬度根據(jù)標(biāo)簽內(nèi)容的寬度
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
// Mode MODE_FIXED：tablayout的寬度是固定的，如果標(biāo)簽過(guò)多，會(huì)擠壓每個(gè)標(biāo)簽，比如title展示為2行，末尾打點(diǎn)
// MODE_SCROLLABLE：tablayout的寬度不是固定的添吗，如果標(biāo)簽過(guò)多可以滾動(dòng)展示
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
2.mTabLayout.setTabIndicatorFullWidth(false);
標(biāo)簽下面的指示器的寬度，是否占滿整個(gè)標(biāo)簽份名，false：可以根據(jù)標(biāo)簽內(nèi)容的寬度適當(dāng)?shù)恼故疽粋€(gè)劇中指示器碟联，ture：沾滿整個(gè)標(biāo)簽妓美；
3.app:tabTextColor="@color/color_646161":設(shè)置沒(méi)有選中的標(biāo)簽的字體顏色
app:tabSelectedTextColor="@color/color_ff8383" 設(shè)置選中的標(biāo)簽的字體顏色
4.app:tabIndicatorHeight="4dp"設(shè)置標(biāo)簽下面的指示器的高度；
5.app:tabIndicatorColor="@color/colorPrimary"設(shè)置標(biāo)簽下面的指示器的顏色
6.addOnTabSelectedListener的三個(gè)方法
mTabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
Log.i(TAG, "onTabSelected: "+tab.getPosition());
// 標(biāo)簽被選中時(shí) 當(dāng)前選中的標(biāo)簽
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
Log.i(TAG, "onTabUnselected: "+tab.getPosition());
// 選中的標(biāo)簽被取消選中時(shí) 上一個(gè)選中的標(biāo)簽
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
Log.i(TAG, "onTabReselected: "+tab.getPosition());
// 標(biāo)簽被再次選中
}
});
7.tabLayout+viewpager結(jié)合時(shí)鲤孵，需要重寫(xiě)適配器的getPageTitle方法
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
8.mTabLayout.setTabTextColors(R.color.color_646161,R.color.color_ff8383);
設(shè)置后沒(méi)有管用壶栋，我是用3中的屬性設(shè)置的標(biāo)簽內(nèi)容文字選中和未選中的顏色，如果有知道普监，請(qǐng)留言哈贵试，多謝
9.TabLayout.Tab tabAt = mTabLayout.getTabAt(0);
tabAt.setCustomView(R.layout.layout_tatlayout_custom_tab);
tabAt.setIcon(R.drawable.gashapon_share_logo);
設(shè)置自定義的標(biāo)簽view，需要注意tablayout中已經(jīng)有textview和imageview的ID凯正，必須復(fù)用
layout_tatlayout_custom_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--tablayout中icon的id為"@android:id/icon"-->
<ImageView
android:id="@android:id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<!--tablayout中textview的id為@android:id/text1-->
<TextView
android:id="@android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
二毙玻。源碼分析：
1.tabLayout+viewpager實(shí)現(xiàn)多個(gè)fragment滑動(dòng)切換和點(diǎn)擊切換：
首先看tabLayout.setupWithViewPager(viewPager, true);做了哪些事情
setupWithViewPager源碼
private void setupWithViewPager(@Nullable ViewPager viewPager, boolean autoRefresh, boolean implicitSetup) {
....省略
if (viewPager != null) {
this.viewPager = viewPager;
if (this.pageChangeListener == null) {
this.pageChangeListener = new TabLayout.TabLayoutOnPageChangeListener(this);
}
this.pageChangeListener.reset();
// 重點(diǎn)：viewpager滑動(dòng)page的監(jiān)聽(tīng)，viewpger和tablayout的聯(lián)動(dòng)處理
viewPager.addOnPageChangeListener(this.pageChangeListener);
this.currentVpSelectedListener = new TabLayout.ViewPagerOnTabSelectedListener(viewPager);
// 重點(diǎn)：tablayout改變時(shí)廊散，viewpager的聯(lián)動(dòng)監(jiān)聽(tīng)
this.addOnTabSelectedListener(this.currentVpSelectedListener);
PagerAdapter adapter = viewPager.getAdapter();
if (adapter != null) {
// 重點(diǎn) 根據(jù)adapter中的數(shù)量淆珊，創(chuàng)建tab
this.setPagerAdapter(adapter, autoRefresh);
}
...省略
} else {
this.viewPager = null;
this.setPagerAdapter((PagerAdapter)null, false);
}
this.setupViewPagerImplicitly = implicitSetup;
}
2.先看TabLayoutOnPageChangeListener，在onPageScrolled設(shè)置tablayout的滑動(dòng)到指定pos奸汇，onPagerSelected設(shè)置tablayout選中的pos
實(shí)現(xiàn)viewpager的滑動(dòng)和選中的pos，在tablayout中的選中效果往声，
public static class TabLayoutOnPageChangeListener implements OnPageChangeListener {
private final WeakReference<TabLayout> tabLayoutRef;
private int previousScrollState;
private int scrollState;
public TabLayoutOnPageChangeListener(TabLayout tabLayout) {
this.tabLayoutRef = new WeakReference(tabLayout);
}
public void onPageScrollStateChanged(int state) {
this.previousScrollState = this.scrollState;
this.scrollState = state;
}
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
TabLayout tabLayout = (TabLayout)this.tabLayoutRef.get();
if (tabLayout != null) {
boolean updateText = this.scrollState != 2 || this.previousScrollState == 1;
boolean updateIndicator = this.scrollState != 2 || this.previousScrollState != 0;
tabLayout.setScrollPosition(position, positionOffset, updateText, updateIndicator);
}
}
public void onPageSelected(int position) {
TabLayout tabLayout = (TabLayout)this.tabLayoutRef.get();
if (tabLayout != null && tabLayout.getSelectedTabPosition() != position && position < tabLayout.getTabCount()) {
boolean updateIndicator = this.scrollState == 0 || this.scrollState == 2 && this.previousScrollState == 0;
tabLayout.selectTab(tabLayout.getTabAt(position), updateIndicator);
}
}
void reset() {
this.previousScrollState = this.scrollState = 0;
}
}
3.ViewPagerOnTabSelectedListener是在onTabSelected中擂找，設(shè)置viewPager.setCurrentItem(tab.getPosition())，源碼如下：
這樣就實(shí)現(xiàn)了點(diǎn)擊tab浩销，viewpager的滑動(dòng)和選中
public static class ViewPagerOnTabSelectedListener implements TabLayout.OnTabSelectedListener {
private final ViewPager viewPager;
public ViewPagerOnTabSelectedListener(ViewPager viewPager) {
this.viewPager = viewPager;
}
public void onTabSelected(TabLayout.Tab tab) {
this.viewPager.setCurrentItem(tab.getPosition());
}
public void onTabUnselected(TabLayout.Tab tab) {
}
public void onTabReselected(TabLayout.Tab tab) {
}
}
4.下面看下this.setPagerAdapter(adapter, autoRefresh);方法做了哪些事
void setPagerAdapter(@Nullable PagerAdapter adapter, boolean addObserver) {
// 如果有之前設(shè)置的 pagerAdapterObserver贯涎，移出掉
if (this.pagerAdapter != null && this.pagerAdapterObserver != null) {
this.pagerAdapter.unregisterDataSetObserver(this.pagerAdapterObserver);
}
this.pagerAdapter = adapter;
// addObserver根據(jù)setPagerAdapter(adapter, autoRefresh)傳入的autoRefresh，是否根據(jù)pagerAdapter的數(shù)據(jù)改變/刷新慢洋，tablayout的數(shù)據(jù)是否刷新塘雳，如果需要跟隨pagerAdapter刷新數(shù)據(jù)，添加pagerAdapterObserver的監(jiān)聽(tīng)事件
if (addObserver && adapter != null) {
if (this.pagerAdapterObserver == null) {
this.pagerAdapterObserver = new TabLayout.PagerAdapterObserver();
}
adapter.registerDataSetObserver(this.pagerAdapterObserver);
}
// 重點(diǎn)普筹，tablayout數(shù)據(jù)賦值的方法
this.populateFromPagerAdapter();
}
5.先看下PagerAdapterObserver中有兩個(gè)方法败明，當(dāng)PagerAdapter中的 notifyDataSetChanged被調(diào)用時(shí)，會(huì)調(diào)用其onChanged方法太防；進(jìn)而刷新tablayout的數(shù)據(jù)
private class PagerAdapterObserver extends DataSetObserver {
PagerAdapterObserver() {
}
public void onChanged() {
TabLayout.this.populateFromPagerAdapter();
}
public void onInvalidated() {
TabLayout.this.populateFromPagerAdapter();
}
}
6.populateFromPagerAdapter源碼如下
void populateFromPagerAdapter() {
this.removeAllTabs();
if (this.pagerAdapter != null) {
int adapterCount = this.pagerAdapter.getCount();
int curItem;
for(curItem = 0; curItem < adapterCount; ++curItem) {
// 重點(diǎn)：根據(jù)pagerAdapter中頁(yè)面的數(shù)量妻顶，添加tablayout中tab的數(shù)據(jù)，內(nèi)容事pagerAdapter.getPageTitle(curItem)
this.addTab(this.newTab().setText(this.pagerAdapter.getPageTitle(curItem)), false);
}
if (this.viewPager != null && adapterCount > 0) {
curItem = this.viewPager.getCurrentItem();
// 設(shè)置選中的tab
if (curItem != this.getSelectedTabPosition() && curItem < this.getTabCount()) {
this.selectTab(this.getTabAt(curItem));
}
}
}
}
