关于TabLayout+ViewPager2的使用以及相关问题点

1.前言

• 最新项目需要用到TabLayout+ViewPager实现对应的功能，后来发现ViewPager的实现方法被废弃掉了（虽然还可以用，但有坑后面说），Google推荐用新一点的ViewPager2来代替，下面来谈谈我用到的。

2.特点

• 实现标题栏和内容联动切换
• 用多个TabLayout关联多个fragment页面

3.代码及说明

3.1.先上效果图

3.2.代码如下

3.2.1.首先在app的build.gradle文件下加入依赖

implementation 'androidx.viewpager2:viewpager2:1.0.0'
implementation "com.google.android.material:material:1.1.0"

3.2.2.activity的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

	//这里省略了toolbar
   ...

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/transparency_color"
        app:tabIndicator="@color/text_FB6137"
        app:tabIndicatorColor="@color/text_FB6137"
        app:tabMode="scrollable"
        app:tabRippleColor="@color/transparency_color"
        app:tabSelectedTextColor="#333333"
        app:tabTextColor="@color/text_normal_color">

    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="@dimen/margin_10" />

</LinearLayout>

3.2.3.activity类的主要代码如下

private String[] mTitles = {"关注","收藏","点赞👍"};


@Override
public void initData() {
    for (int i = 0; i < mTitles.length; i++) {
        mTabLayout.addTab(mTabLayout.newTab().setText(mTitles[i]), false);
    }
    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            TextView textView = new TextView(getActivity());
            float selectedSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics());
            textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, selectedSize);
            textView.setTextColor(getResources().getColor(R.color.text_222222));
            textView.setText(tab.getText());
            textView.setGravity(Gravity.CENTER_HORIZONTAL);
            textView.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
            tab.setCustomView(textView);
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            tab.setCustomView(null);
        }

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

        }
    });
    //禁用预加载
    mViewPager2.setOffscreenPageLimit(ViewPager2.OFFSCREEN_PAGE_LIMIT_DEFAULT);
    mViewPager2.setAdapter(new FragmentStateAdapter(getSupportFragmentManager(),getLifecycle()) {
        @NonNull
        @Override
        public Fragment createFragment(int position) {
            return PagerFragment.newInstance(position);
        }

        @Override
        public int getItemCount() {
            return mTitles.length;
        }
    });

    new TabLayoutMediator(mTabLayout, mViewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
        @Override
        public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
            tab.setText(mTitles[position]);
        }
    }).attach();

    new Thread(new Runnable() {
        @Override
        public void run() {
            try {
                Thread.sleep(10);
                getActivity().runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        mTabLayout.getTabAt(1).select();//默认选中第二个
                        mViewPager2.setCurrentItem(1);
                    }
                });
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }).start();
}    

3.2.4.fragment的布局如下：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/iv"
        tools:background="@mipmap/ic_page1"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</androidx.constraintlayout.widget.ConstraintLayout>

3.2.5.fragment类的代码如下：

public class PagerFragment extends BaseFragment {
    private static final String KEY_POSITION = "position";

    @BindView(R.id.iv)
    ImageView mIv;

    public static PagerFragment newInstance(int position) {
        PagerFragment fragment = new PagerFragment();
        Bundle bundle = new Bundle();
        bundle.putInt(KEY_POSITION, position);
        fragment.setArguments(bundle);
        return fragment;
    }


    @Override
    public int setContentLayout() {
        return R.layout.fragment_pager;
    }

    @Override
    public void initToolBar() {

    }

    @Override
    public void initPresenter() {

    }

    @Override
    public void initData() {
        int position = getArguments().getInt(KEY_POSITION);
        if (position == 0) {
            mIv.setImageResource(R.mipmap.ic_page1);
        } else if (position == 1) {
            mIv.setImageResource(R.mipmap.ic_page2);
        } else {
            mIv.setImageResource(R.mipmap.ic_page3);
        }
    }

    @Override
    public void onDestroyFragment() {

    }
}

到这里功能就结束了！

4.问题点

4.1.导入依赖冲突

• 在项目里有用到Google原生的下拉刷新库swiperefreshlayout，通过重新添加依赖解决的

4.2.默认选中问题

一开始进入页面设置默认选中第二个title

//单纯的设置下面这行代码，并没有用
mViewPager2.setCurrentItem(1);

需要这么做才行

new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(10);
                    getActivity().runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            mTabLayout.getTabAt(1).select();//默认选中第二个
                            mViewPager2.setCurrentItem(1);
                        }
                    });
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }).start();

4.3.源码

附上源码地址：github源码（平时的demo）

5.最后

开通了个公众号，扫码关注一下，可以获得超过1个G的免费PDF书籍学习资料，并且可以及时收到我分享的内容哦！