情诗网 >高端情话 > 正文

TabLayout高端用法(二)

来源:情诗网    2021-01-14    分类:高端情话

setIndicator(this, mTabLayout, 20, 20);

  public  void setIndicator(MainActivity context, TabLayout tabs, int leftDip, int rightDip) {
        Class<?> tabLayout = tabs.getClass();
        Field tabStrip = null;
        try {
            tabStrip = tabLayout.getDeclaredField("mTabStrip");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }

        tabStrip.setAccessible(true);
        LinearLayout ll_tab = null;
        try {
            ll_tab = (LinearLayout) tabStrip.get(tabs);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

        int left = (int) (getDisplayMetrics(context).density * leftDip);
        int right = (int) (getDisplayMetrics(context).density * rightDip);

        for (int i = 0; i < ll_tab.getChildCount(); i++) {
            View child = ll_tab.getChildAt(i);
            child.setPadding(0, 0, 0, 0);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1);
            params.leftMargin = left;
            params.rightMargin = right;
            child.setLayoutParams(params);
            child.invalidate();
        }
    }

运行效果如下:

1.jpg
 tabLayout.addTab(tabLayout.newTab().setText("A"));
 tabLayout.addTab(tabLayout.newTab().setText("B"));
 tabLayout.addTab(tabLayout.newTab().setText("C"));

或许有些时候是从一个集合里读取数据填充,那就要来个for循环了,这个根据自己的实际情况来定。

public class MainActivity extends AppCompatActivity {

    ViewPager mViewPager;

    ListFragment mFragment1;

    ListFragment mFragment2;

    ListFragment mFragment3;

    PagerAdapter mPagerAdapter;

    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {

        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setOffscreenPageLimit(2);
        mTabLayout = (TabLayout) findViewById(R.id.toolbar_tab);
        initFragment();
    }


    private void initFragment() {

        mTabLayout.addTab(mTabLayout.newTab().setText("A"));
        mTabLayout.addTab(mTabLayout.newTab().setText("B"));
        mTabLayout.addTab(mTabLayout.newTab().setText("C"));

        if (mFragment1 == null) {
            mFragment1 = new ListFragment();
        }
        if (mFragment2 == null) {
            mFragment2 = new ListFragment();
        }
        if (mFragment3 == null) {
            mFragment3 = new ListFragment();
        }
        mPagerAdapter = new PagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mPagerAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
    }


    public class PagerAdapter extends FragmentPagerAdapter {
        public PagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            if (position == 0) {
                return mFragment1;
            } else if (position == 1) {
                return mFragment2;
            } else if (position == 2) {
                return mFragment3;
            }

            return null;
        }

        @Override
        public int getCount() {
            return 3;
        }

    }
}

运行起来之后,居然是这个样子的。我的标题呢?

2

官方推荐我们使用setupWithViewPager()方法,来完成这种Tablayout+Viewpager+Fragment组合的数据绑定,上面的代码实在看不出上面问题,但是我的标题呢?我们点进setupWithViewPager()方法查阅了下源码。

private void setupWithViewPager(@Nullable final ViewPager viewPager, boolean autoRefresh,
            boolean implicitSetup) {
        if (mViewPager != null) {
            // If we've already been setup with a ViewPager, remove us from it
            if (mPageChangeListener != null) {
                mViewPager.removeOnPageChangeListener(mPageChangeListener);
            }
            if (mAdapterChangeListener != null) {
                mViewPager.removeOnAdapterChangeListener(mAdapterChangeListener);
            }
        }

        if (mCurrentVpSelectedListener != null) {
            // If we already have a tab selected listener for the ViewPager, remove it
            removeOnTabSelectedListener(mCurrentVpSelectedListener);
            mCurrentVpSelectedListener = null;
        }

        if (viewPager != null) {
            mViewPager = viewPager;

            // Add our custom OnPageChangeListener to the ViewPager
            if (mPageChangeListener == null) {
                mPageChangeListener = new TabLayoutOnPageChangeListener(this);
            }
            mPageChangeListener.reset();
            viewPager.addOnPageChangeListener(mPageChangeListener);

            // Now we'll add a tab selected listener to set ViewPager's current item
            mCurrentVpSelectedListener = new ViewPagerOnTabSelectedListener(viewPager);
            addOnTabSelectedListener(mCurrentVpSelectedListener);

            final PagerAdapter adapter = viewPager.getAdapter();
            if (adapter != null) {
                // Now we'll populate ourselves from the pager adapter, adding an observer if
                // autoRefresh is enabled
                setPagerAdapter(adapter, autoRefresh);
            }

            // Add a listener so that we're notified of any adapter changes
            if (mAdapterChangeListener == null) {
                mAdapterChangeListener = new AdapterChangeListener();
            }
            mAdapterChangeListener.setAutoRefresh(autoRefresh);
            viewPager.addOnAdapterChangeListener(mAdapterChangeListener);

            // Now update the scroll position to match the ViewPager's current item
            setScrollPosition(viewPager.getCurrentItem(), 0f, true);
        } else {
            // We've been given a null ViewPager so we need to clear out the internal state,
            // listeners and observers
            mViewPager = null;
            setPagerAdapter(null, false);
        }

        mSetupViewPagerImplicitly = implicitSetup;
    }

这个方法也不算太长,只是对viewPager的状态做了一些检查校验,设置了一些监听。看这一句:

 if (adapter != null) {
                // Now we'll populate ourselves from the pager adapter, adding an observer if
                // autoRefresh is enabled
                setPagerAdapter(adapter, autoRefresh);
            }

setPagerAdapter方法里又调用了populateFromPagerAdapter();

点进populateFromPagerAdapter() 方法第一句就是:

removeAllTabs();

    /**
     * Remove all tabs from the action bar and deselect the current tab.
     */
    public void removeAllTabs() {
        // Remove all the views
        for (int i = mTabStrip.getChildCount() - 1; i >= 0; i--) {
            removeTabViewAt(i);
        }

        for (final Iterator<Tab> i = mTabs.iterator(); i.hasNext();) {
            final Tab tab = i.next();
            i.remove();
            tab.reset();
            sTabPool.release(tab);
        }

        mSelectedTab = null;
    }

就是这么简单粗暴,直接全部清理掉了,我们且不去探讨源码中的这个逻辑是否有问题,单就setupWithViewPager()这个方法来说,这也算是一个不大不小的坑。所以我们自己在写代码的时候要注意避让。那关于上面我们自己写的代码就要做些调整,我们修改下initFragment方法,主要是代码语句的顺序上做些调整,如下:

  private void initFragment() {

        mTabLayout.addTab(mTabLayout.newTab());
        mTabLayout.addTab(mTabLayout.newTab());
        mTabLayout.addTab(mTabLayout.newTab());

        if (mFragment1 == null) {
            mFragment1 = new ListFragment();
        }
        if (mFragment2 == null) {
            mFragment2 = new ListFragment();
        }
        if (mFragment3 == null) {
            mFragment3 = new ListFragment();
        }
        mPagerAdapter = new PagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mPagerAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

        mTabLayout.getTabAt(0).setText("A");
        mTabLayout.getTabAt(1).setText("B");
        mTabLayout.getTabAt(2).setText("C");
}

代码逻辑上,我们在setupWithViewPager()方法最终remove掉了标题栏之后再重新设置标题,这样就不会出现标题栏消失的问题了。

C7415CAC-CEC5-4640-884D-9295C2F331D0-77553-000ACB2CD7593F7A.gif

好像ViewPager和TabLayout之间的纽带断了,不会联动了。那我们就模仿setupWithViewPager()方法的源码让它们联动起来。我们要做的就是点击TabLayout的时候ViewPager会跟着滚动。滑动ViewPager的时候TabLayout会跟着滚动,那就简单了,我们分别给这二位设置个监听就好了。

       mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));

       mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                mViewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                changeTabStatus(tab, false);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

比较起来好像还是setupWithViewPager()更方便些,虽然有坑。

完整代码:GitHub

热门文章