一、布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="vertical"
    tools:context=".main.MainActivity">


    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/main_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="65dp"/>

    <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout_main"
            android:layout_width="match_parent"
            android:background="@color/white"
            app:tabGravity="fill"
            app:tabMaxWidth="0dp"
            app:tabMode="fixed"
            android:layout_height="65dp" />

</RelativeLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/transparent"
    android:gravity="center">

    <CheckBox
        android:id="@+id/tb_main_tab_checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@null"
        android:checked="false"
        android:focusable="false"
        android:clickable="false"
        android:text="" />

    <TextView
        android:id="@+id/tv_main_tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/dimen_4"
        android:text=""
        android:textSize="@dimen/font_12"
        android:clickable="false"
        android:textColor="@drawable/common_tab_text_color" />

</LinearLayout>

 

二、界面中使用

private String[] tabs;
private int[] resIds;
  tabs = this.getResources().getStringArray(R.array.main_tab_btn_name);
        resIds = new int[]{R.drawable.icon_main_tab_bg,
                R.drawable.icon_project_tab_bg,
                R.drawable.icon_block_tab_bg,
                R.drawable.icon_me_tab_bg};

        ViewPagerScrollAdapter scrollAdapter = new ViewPagerScrollAdapter(getSupportFragmentManager(), getLifecycle(), fragmentList);

        binding.mainViewpager.setAdapter(scrollAdapter);

        binding.mainViewpager.setUserInputEnabled(false);
//        binding.mainViewpager.setOffscreenPageLimit(2);
        binding.tabLayoutMain.setTabTextColors(R.color.color_3D80FC, R.color.color_3D80FC);

        mediator = new TabLayoutMediator(binding.tabLayoutMain, binding.mainViewpager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                //自定义TabView
                View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_main_tab_view, null);
                view.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT,1));

                TextView tabView = view.findViewById(R.id.tv_main_tab_text);
                tabView.setText(tabs[position]);


                CheckBox checkBox = view.findViewById(R.id.tb_main_tab_checkbox);
                checkBox.setBackgroundResource(resIds[position]);
                if (position == 0) {
                    checkBox.setChecked(true);
                    tabView.setSelected(true);
                }

                tab.setCustomView(view);
            }
        });

        binding.tabLayoutMain.setSelectedTabIndicatorHeight(0); //去掉下划线
        binding.tabLayoutMain.setTabRippleColor(ColorStateList.valueOf(getContext().getResources().getColor(R.color.white)));//去掉黑色背景

        //要执行这一句才是真正将两者绑定起来
        mediator.attach();

    binding.tabLayoutMain.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                selectOrLogin();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                ((CheckBox) tab.getCustomView().findViewById(R.id.tb_main_tab_checkbox)).setChecked(false);
                tab.getCustomView().findViewById(R.id.tv_main_tab_text).setSelected(false);
            }

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

 

ViewPagerScrollAdapter 

public class ViewPagerScrollAdapter extends FragmentStateAdapter  {
    private ArrayList<Fragment> fragmentList;

    public ViewPagerScrollAdapter(@NonNull Fragment fragment) {
        super(fragment);
    }

    public ViewPagerScrollAdapter(@NonNull FragmentActivity fragmentActivity,ArrayList<Fragment> fragmentList) {
        super(fragmentActivity);
        this.fragmentList=fragmentList;
    }

    @Override
    public void onAttachedToRecyclerView(@NonNull RecyclerView recyclerView) {
        super.onAttachedToRecyclerView(recyclerView);
        recyclerView.setItemViewCacheSize(fragmentList.size());
    }

    public ViewPagerScrollAdapter(@NonNull FragmentManager fragmentManager, @NonNull Lifecycle lifecycle,ArrayList<Fragment> fragmentList) {
        super(fragmentManager, lifecycle);
        this.fragmentList=fragmentList;
    }


    @NonNull
    @Override
    public Fragment createFragment(int position) {
        // 返回Fragment
        return fragmentList.get(position);
    }

    @Override
    public int getItemCount() {
        // 获取Fragment数量
        return fragmentList.size();
    }

}