一。常用方法解析：
1.mTabLayout.setTabGravity
mTabLayout.setTabMode
//必须和Mode是MODE_FIXED才管用，
// GRAVITY_FILL：平分tablayout的宽度给每个标签
// GRAVITY_CENTER：所有的标签居中展示，标签的宽度根据标签内容的宽度
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
// Mode MODE_FIXED：tablayout的宽度是固定的，如果标签过多，会挤压每个标签，比如title展示为2行，末尾打点
// MODE_SCROLLABLE：tablayout的宽度不是固定的，如果标签过多可以滚动展示
mTabLayout.setTabMode(TabLayout.MODE_FIXED);
2.mTabLayout.setTabIndicatorFullWidth(false);
标签下面的指示器的宽度，是否占满整个标签，false：可以根据标签内容的宽度适当的展示一个剧中指示器，ture：沾满整个标签；
3.app:tabTextColor="@color/color_646161":设置没有选中的标签的字体颜色
app:tabSelectedTextColor="@color/color_ff8383" 设置选中的标签的字体颜色
4.app:tabIndicatorHeight="4dp"设置标签下面的指示器的高度；
5.app:tabIndicatorColor="@color/colorPrimary"设置标签下面的指示器的颜色
6.addOnTabSelectedListener的三个方法
mTabLayout.addOnTabSelectedListener(new TabLayout.BaseOnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
Log.i(TAG, "onTabSelected: "+tab.getPosition());
// 标签被选中时 当前选中的标签
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
Log.i(TAG, "onTabUnselected: "+tab.getPosition());
// 选中的标签被取消选中时 上一个选中的标签
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
Log.i(TAG, "onTabReselected: "+tab.getPosition());
// 标签被再次选中
}
});
7.tabLayout+viewpager结合时，需要重写适配器的getPageTitle方法
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mTitles.get(position);
}
8.mTabLayout.setTabTextColors(R.color.color_646161,R.color.color_ff8383);
设置后没有管用，我是用3中的属性设置的标签内容文字选中和未选中的颜色，如果有知道，请留言哈，多谢
9.TabLayout.Tab tabAt = mTabLayout.getTabAt(0);
tabAt.setCustomView(R.layout.layout_tatlayout_custom_tab);
tabAt.setIcon(R.drawable.gashapon_share_logo);
设置自定义的标签view，需要注意tablayout中已经有textview和imageview的ID，必须复用
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实现多个fragment滑动切换和点击切换：
首先看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();
// 重点：viewpager滑动page的监听，viewpger和tablayout的联动处理
viewPager.addOnPageChangeListener(this.pageChangeListener);
this.currentVpSelectedListener = new TabLayout.ViewPagerOnTabSelectedListener(viewPager);
// 重点：tablayout改变时，viewpager的联动监听
this.addOnTabSelectedListener(this.currentVpSelectedListener);
PagerAdapter adapter = viewPager.getAdapter();
if (adapter != null) {
// 重点 根据adapter中的数量，创建tab
this.setPagerAdapter(adapter, autoRefresh);
}
...省略
} else {
this.viewPager = null;
this.setPagerAdapter((PagerAdapter)null, false);
}
this.setupViewPagerImplicitly = implicitSetup;
}
2.先看TabLayoutOnPageChangeListener，在onPageScrolled设置tablayout的滑动到指定pos，onPagerSelected设置tablayout选中的pos
实现viewpager的滑动和选中的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中，设置viewPager.setCurrentItem(tab.getPosition())，源码如下：
这样就实现了点击tab，viewpager的滑动和选中
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) {
// 如果有之前设置的 pagerAdapterObserver，移出掉
if (this.pagerAdapter != null && this.pagerAdapterObserver != null) {
this.pagerAdapter.unregisterDataSetObserver(this.pagerAdapterObserver);
}
this.pagerAdapter = adapter;
// addObserver根据setPagerAdapter(adapter, autoRefresh)传入的autoRefresh，是否根据pagerAdapter的数据改变/刷新，tablayout的数据是否刷新，如果需要跟随pagerAdapter刷新数据，添加pagerAdapterObserver的监听事件
if (addObserver && adapter != null) {
if (this.pagerAdapterObserver == null) {
this.pagerAdapterObserver = new TabLayout.PagerAdapterObserver();
}
adapter.registerDataSetObserver(this.pagerAdapterObserver);
}
// 重点，tablayout数据赋值的方法
this.populateFromPagerAdapter();
}
5.先看下PagerAdapterObserver中有两个方法，当PagerAdapter中的 notifyDataSetChanged被调用时，会调用其onChanged方法；进而刷新tablayout的数据
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) {
// 重点：根据pagerAdapter中页面的数量，添加tablayout中tab的数据，内容事pagerAdapter.getPageTitle(curItem)
this.addTab(this.newTab().setText(this.pagerAdapter.getPageTitle(curItem)), false);
}
if (this.viewPager != null && adapterCount > 0) {
curItem = this.viewPager.getCurrentItem();
// 设置选中的tab
if (curItem != this.getSelectedTabPosition() && curItem < this.getTabCount()) {
this.selectTab(this.getTabAt(curItem));
}
}
}
}
网友评论