前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用TabLayout遇到的几个坑

使用TabLayout遇到的几个坑

作者头像
提莫队长
发布2018-05-18 15:16:47
1.7K0
发布2018-05-18 15:16:47
举报
文章被收录于专栏:刘晓杰刘晓杰

1.setupWithViewPager以后之前已经设置好的tab的视图消失了

看源码: setupWithViewPager里面有这段

代码语言:javascript
复制
            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);
            }

setPagerAdapter里面有populateFromPagerAdapter

代码语言:javascript
复制
    void populateFromPagerAdapter() {
        removeAllTabs();
        ......
    }

看到了么,会把之前所有设置的TABS清空。那么解决方案就很简单。先关联,在设置

2.tabLayout切换时文字颜色当未选中时没有恢复

代码语言:javascript
复制
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int i = tabLayout.getSelectedTabPosition();
                Log.e("onTabSelected", i + "");
                tab.setIcon(licons_p[i]);
                mViewPager.setCurrentItem(i);
                //tabLayout.setTabTextColors(Color.BLACK, Color.RED);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                int i = tabLayout.getSelectedTabPosition();
                Log.e("onTabUnselected", i + "");
                tab.setIcon(licons[i]);
                //tabLayout.setTabTextColors(Color.BLACK, Color.BLACK);
            }

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

            }
        });

(先不看注释部分)我们一般都按照上面的写,但是文字颜色在切换的时候会有问题。 当我们先点击Tab1,再点击Tab2的时候(仅计算Tab2的步骤)。会先调用onTabUnselected,然后调用onTabSelected。基于这样的调用,我们可以在onTabUnselected里面先恢复到默认的颜色,然后再在onTabSelected设置点击的颜色

最后附上我的代码

代码语言:javascript
复制
public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private ViewPager mViewPager;
    private List<String> mTitleList = new ArrayList<>();//页卡标题集合
    private List<Fragment> mFragmentList = new ArrayList<>();
    //未选中状态的icon数组
    int licons[] = {R.drawable.custom, R.drawable.stock, R.drawable.order};
    //选中状态下的icon数组
    int licons_p[] = {R.drawable.custom_p, R.drawable.stock_p, R.drawable.order_p};

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

        mTitleList.add("商户");
        mTitleList.add("名字");
        mTitleList.add("出售");

        mFragmentList.add(new AFragment());
        mFragmentList.add(new BFragment());
        mFragmentList.add(new CFragment());

        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);

        MyAdpter mAdapter = new MyAdpter(getSupportFragmentManager(), mFragmentList);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setOffscreenPageLimit(3);
        mViewPager.setCurrentItem(0);

        forIconAndText();
    }

    /**
     * 文字图片都有的情况
     */
    private void forIconAndText() {
        tabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。

        //setupWithViewPager里面有removeAllTabs,所以关联以后在添加
        tabLayout.removeAllTabs();
        for (int i = 0; i < mTitleList.size(); i++) {
            tabLayout.addTab(tabLayout.newTab().setIcon(licons[i]).setText(mTitleList.get(i)));
        }

        tabLayout.getTabAt(0).setIcon(licons_p[0]);
        tabLayout.setTabTextColors(Color.BLACK, Color.RED);

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int i = tabLayout.getSelectedTabPosition();
                Log.e("onTabSelected", i + "");
                tab.setIcon(licons_p[i]);
                mViewPager.setCurrentItem(i);
                tabLayout.setTabTextColors(Color.BLACK, Color.RED);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                int i = tabLayout.getSelectedTabPosition();
                Log.e("onTabUnselected", i + "");
                tab.setIcon(licons[i]);
                tabLayout.setTabTextColors(Color.BLACK, Color.BLACK);
            }

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

            }
        });
    }

    /**
     * 只有文字的情况
     */
    private void onlyForText() {
        tabLayout.removeAllTabs();
        for (int i = 0; i < mTitleList.size(); i++) {
            tabLayout.addTab(tabLayout.newTab().setIcon(licons[i]).setText(mTitleList.get(i)), i == 0 ? true : false);
        }
        tabLayout.setTabTextColors(Color.BLACK, Color.RED);
        mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    }
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017年09月06日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.setupWithViewPager以后之前已经设置好的tab的视图消失了
  • 2.tabLayout切换时文字颜色当未选中时没有恢复
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档