tabLayout源码分析+常用方法

2021-01-20  本文已影响0人  陈萍儿Candy

一。常用方法解析:
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));
                }
            }
        }

    }
上一篇下一篇

猜你喜欢

热点阅读