ViewPager<第四篇>：与TabLayout结合使用

ViewPager+Fragmnet+TabLayout结合使用在很多大型项目上都会使用，前面一篇已经讲解了ViewPager+Fragmnet的使用，本篇的重点是如何结合TabLayout使用。

效果展示：

339.gif

【TabLayout和ViewPager关联】

• 方法一：

tabLayout.setupWithViewPager(viewpager);

这个方法不建议大家使用，因为它是有问题的，从源码分析之后发现也不合理。直接跳过。

• 方法二：

viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewpager));

这个方法比较好，成功关联了ViewPager和TabLayout。

如果您需要在监听中实现其他逻辑，那么可以再重新添加一遍监听即可。代码如下：

    viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewpager));

    viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

        }

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

        }

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

        }
    });

【贴出代码】

xml布局：

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicatorGravity="top"
    android:layout_alignParentBottom="true"
    app:tabIndicatorColor="@color/colorPrimary"/>

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/tabLayout"/>

MyPagerFragment.java

public class MyPagerFragment extends Fragment {

    String mContent;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mContent = (String) getArguments().get("content");
        View view = inflater.inflate(R.layout.item_base, container, false) ;
        TextView textView = (TextView) view.findViewById(R.id.tv);
        textView.setText(mContent);
        return view;
    }

}

item_base.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView
    android:id="@+id/tv"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/ll_shape"
    android:textColor="#000000"
    android:gravity="center"
    android:textStyle="bold"
    android:textSize="200sp">
</TextView>

MyPagerAdapter2.java

public class MyPagerAdapter2 extends FragmentStatePagerAdapter {

    private Context mContext;
    private List<MyPagerFragment> myPagerFragmentList;

    public MyPagerAdapter2(Context context , List<MyPagerFragment> list, @NonNull FragmentManager fm, int behavior) {
        super(fm, behavior);
        mContext = context;
        myPagerFragmentList = list;
    }

    @Override
    public int getCount() {
        return myPagerFragmentList.size();
    }

    @NonNull
    @Override
    public Fragment getItem(int position) {
        return myPagerFragmentList.get(position);
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        super.destroyItem(container, position, object);
    }
}

MainActivity.java

    viewpager = findViewById(R.id.viewpager);

    final List<MyPagerFragment> list = new ArrayList<>();
    for (int i = 0; i < 5; i++) {
        MyPagerFragment fragment = new MyPagerFragment();
        Bundle bundle = new Bundle();
        bundle.putString("content",String.valueOf(i));
        fragment.setArguments(bundle);

        list.add(fragment);
    }

    MyPagerAdapter2 myPagerAdapter2 = new MyPagerAdapter2(this,list, getSupportFragmentManager(), FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
    viewpager.setAdapter(myPagerAdapter2);

    tabLayout = findViewById(R.id.tabLayout);
    tabLayout.addTab(tabLayout.newTab().setText("首页").setIcon(R.mipmap.home));
    tabLayout.addTab(tabLayout.newTab().setText("消息").setIcon(R.mipmap.message));
    tabLayout.addTab(tabLayout.newTab().setText("工具").setIcon(R.mipmap.tools));
    tabLayout.addTab(tabLayout.newTab().setText("提醒").setIcon(R.mipmap.notification));
    tabLayout.addTab(tabLayout.newTab().setText("我").setIcon(R.mipmap.me));

    viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
    tabLayout.addOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewpager));

这里还有TabLayout的详细讲解：

TabLayout-标签布局

[本章完...]