ViewPager+Fragment+TabLayout 爬坑

6,622 阅读2分钟

1. 在xml布局中定义ViewPager和TabLayout



    
        
        
    

2. 禁止重复添加相同的Fragment到Viewpager中

当时,我的tab有三个,但是另外两个Fragment还没有写好,就偷懒把FragmentPagerAdapter中数组重复添加了第一个fragment三次,结果就出错了:

Can't change tag of fragment SubscribedFragment{41157420 id=0x7f070005 android:switcher:2131165189:0}: was android:switcher:2131165189:0 now android:switcher:2131165189:1

解决方法

新建另外的两个Fragment,与FragmentPagerAdapter绑定。

3. setupWithViewPager后Tab不显示

查看源码:

void populateFromPagerAdapter() {
        removeAllTabs();
        if (mPagerAdapter != null) {
            final int adapterCount = mPagerAdapter.getCount();
            for (int i = 0; i < adapterCount; i++) {
                addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);
            }
            // Make sure we reflect the currently set ViewPager item
            if (mViewPager != null && adapterCount > 0) {
                final int curItem = mViewPager.getCurrentItem();
                if (curItem != getSelectedTabPosition() && curItem < getTabCount()) {
                    selectTab(getTabAt(curItem));
                }
            }
        }
    }

注意addTab(newTab().setText(mPagerAdapter.getPageTitle(i)), false);,看到没,在setupWithViewPager后,会自动添加三个Tab,Tab上的文字是FragmentPagerAdapter中的PageTitle。

所以,我们不能自己给TabLayout添加tab,因为你只要绑定ViewPager,它会自动再添加一次。

3.1 那么怎么来让Tab显示文字和图标呢?

  • 只显示文字

如果只显示文字可以直接在定义FragmentPagerAdapter时,添加一个方法就行:

pageAdapter = new FragmentPagerAdapter(this.getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }
            @Override
            public int getCount() {
                return fragmentList.size();
            }
            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }
        };
  • 显示文字和图标

因为FragmentPagerAdapter中无法指定图标,所以,我们可以在执行完setupWithViewPager后,给已经添加上的tab重新设置:

tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setText(mTitles[0]).setIcon(R.drawable.home_xml);
tabLayout.getTabAt(1).setText(mTitles[1]).setIcon(R.drawable.rank_xml);
tabLayout.getTabAt(2).setText(mTitles[2]).setIcon(R.drawable.category_xml);

注意

可以看到setIcon的参数为xml,这样就可以实现点击后图标变色了。



    
    
  • 只显示图标

这就很简单了,去掉setText就可以:

tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setIcon(R.drawable.home_xml);
tabLayout.getTabAt(1).setIcon(R.drawable.rank_xml);
tabLayout.getTabAt(2).setIcon(R.drawable.category_xml);

4. 完整的java 代码

public class MainActivity extends AppCompatActivity {
    private String[] mTitles = new String[]{"首页", "排行","分类"};
    TabLayout tabLayout;
    ViewPager viewPager;
    List fragmentList;
    FragmentPagerAdapter pageAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout)this.findViewById(R.id.tabLayout);
        viewPager = (ViewPager)this.findViewById(R.id.viewPager);
        initFragment();
        initAdapter();
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.getTabAt(0).setText(mTitles[0]).setIcon(R.drawable.home_xml);
        tabLayout.getTabAt(1).setText(mTitles[1]).setIcon(R.drawable.rank_xml);
        tabLayout.getTabAt(2).setText(mTitles[2]).setIcon(R.drawable.category_xml);
    }
    private void initAdapter() {
        pageAdapter = new FragmentPagerAdapter(this.getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return fragmentList.get(position);
            }
            @Override
            public int getCount() {
                return fragmentList.size();
            }
            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }
        };
        viewPager.setAdapter(pageAdapter);
    }
    private void initFragment() {
        fragmentList = new ArrayList();
        RecentPostsFragment recentPostsFragment = new RecentPostsFragment();
        RankFragment rankFragment = new RankFragment();
        CategoryFragment categoryFragment = new CategoryFragment();
        //添加到数组中
        fragmentList.add(recentPostsFragment);
        fragmentList.add(rankFragment);
        fragmentList.add(categoryFragment);
    }
}

Enjoy Coding! 如果在阅读本博客的过程中有任何疑问或者需要帮助,可以随时在微博上联系我,我的微博是 @orzanglei

如果你觉得本文帮助了你,你可以选择打赏支持我继续创作。 赏 orzangleli WeChat Pay

微信打赏

orzangleli Alipay

支付宝打赏