TabLayout + ViewPager2 + Fragment 实现底部导航栏

先上效果图

我这里倒叙来介绍，先看调用

TestTablayoutActivity

public class TestTablayoutActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_tablayout);
        SelfVierPageFragmentControl selfVierPageFragmentControl = findViewById(R.id.self_view_page_1);
        List<Pair<Fragment,Pair<String,Integer>>> data = new ArrayList<>();

        data.add(new Pair<>(ViewPagerFragment.newInstance("123"),new Pair<>("测试1", com.pksh.tools.R.mipmap.sel_lie_biao)));
        data.add(new Pair<>(ViewPagerFragment.newInstance("13"),new Pair<>("测试2", com.pksh.tools.R.mipmap.def_map_select)));
        data.add(new Pair<>(ViewPagerFragment.newInstance("14"),new Pair<>("测试3", com.pksh.tools.R.mipmap.def_map_navigation_neibu)));
        data.add(new Pair<>(ViewPagerFragment.newInstance("123"),new Pair<>("测试4", com.pksh.tools.R.mipmap.def_map_navigation_tengxun)));
//        data.add(new Pair<>(ViewPagerFragment.newInstance("123"),new Pair<>("测试5", com.pksh.tools.R.mipmap.def_map_navigation_tengxun)));
        selfVierPageFragmentControl.setData(data).build();
    }
}

布局

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

    <com.pksh.tools.style.display.SelfVierPageFragmentControl
        android:id="@+id/self_view_page_1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

SelfVierPageFragmentControl

public class SelfVierPageFragmentControl extends RelativeLayout {

    private ViewPager2 viewPager2;
    private TabLayout tabLayout;
    private List<Pair<Fragment,Pair<String,Integer>>> data;
    private boolean isTop = false;
    private boolean isRoll = false;
    private int tabHeight = 0;


    public SelfVierPageFragmentControl(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.slef_view_page_fragment, this);
        viewPager2 = findViewById(R.id.view_pager);
        tabLayout = findViewById(R.id.tab_layout);
    }

    /**
     * 设置数据
     */
    public SelfVierPageFragmentControl setData(List<Pair<Fragment,Pair<String,Integer>>> data){
        this.data = data;
        return this;
    }

    /**
     * 导航条是否在顶部
     * 根据传入的参数设置布局
     */
    public SelfVierPageFragmentControl isTop(boolean isTop){
        this.isTop = isTop;
        return this;
    }

    /**
     * 导航条是否在顶部
     * 根据传入的参数设置布局
     */
    public SelfVierPageFragmentControl isRoll(boolean isRoll){
        this.isRoll = isRoll;
        return this;
    }

    /**
     * 设置tablayout的高度
     */
    public SelfVierPageFragmentControl setTabHeight(int height){
        this.tabHeight = height;
        return this;
    }

    /**
     * 启动
     */
    public void build(){
        //根据导航条位置设置布局格式
        //顶部布局
        if (isTop) {
            //设置viewPager2布局
            RelativeLayout.LayoutParams layoutParams = (LayoutParams) viewPager2.getLayoutParams();
            layoutParams.addRule(RelativeLayout.BELOW,R.id.tab_layout);
            viewPager2.setLayoutParams(layoutParams);
            //设置tablayout高度
            if (tabHeight != 0) {
                RelativeLayout.LayoutParams layoutParams1 = new LayoutParams(LayoutParams.MATCH_PARENT,tabHeight);
                tabLayout.setLayoutParams(layoutParams1);
            }
        //底部布局
        } else {
            //设置viewPager2布局
            RelativeLayout.LayoutParams layoutParams = (LayoutParams) viewPager2.getLayoutParams();
            layoutParams.addRule(RelativeLayout.ABOVE,R.id.tab_layout);
            viewPager2.setLayoutParams(layoutParams);

            //设置tablayout布局
            RelativeLayout.LayoutParams layoutParams1;
            if (tabHeight != 0) layoutParams1 = new LayoutParams(LayoutParams.MATCH_PARENT,tabHeight);
            else layoutParams1 = (LayoutParams) tabLayout.getLayoutParams();
            layoutParams1.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
            tabLayout.setLayoutParams(layoutParams1);
        }

        //tabLayout是否可滚动
        if (isRoll) tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

        if (data != null) {
            //设置ViewPage2的Adapter
            AdapterViewPage2 adapterViewPage = new AdapterViewPage2((FragmentActivity) getContext(),data);
            viewPager2.setAdapter(adapterViewPage);
            //tabLayout和viewPager2关联
            new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
                @Override
                public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                    //设置默认布局
//                    tab.setIcon(data.get(position).second.second);
//                    tab.setText(data.get(position).second.first);

                    //设置自定义布局
                    tab.setCustomView(makeTabView(getContext(),position));
                }
            }).attach();
        }
    }

    /**
     * 引入布局设置图标和标题
     * @param position
     * @return
     */
    private View makeTabView(Context context, int position){
        View tabView = LayoutInflater.from(context).inflate(R.layout.tab_text_icon,null);
        TextView textView = tabView.findViewById(R.id.textview);
        ImageView imageView = tabView.findViewById(R.id.imageview);
        textView.setText(data.get(position).second.first);
        imageView.setImageResource(data.get(position).second.second);

        return tabView;
    }
}

布局

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

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:tabTextColor="#B8B8B8"
        app:tabPaddingStart="1dp"
        app:tabPaddingEnd="1dp"
        app:tabPaddingBottom="1dp"
        app:tabPaddingTop="1dp"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="#000000"
        app:tabMinWidth="10dp"
        app:tabMaxWidth="200dp"
        app:tabPadding="0dp"
        />
</RelativeLayout>

自定义布局 tab_text_icon

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/text_view_def"
    android:gravity="center">

    <ImageView
        android:id="@+id/imageview"
        android:layout_gravity="center"
        android:layout_width="24dp"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="3dp"
        android:gravity="center"
        />
</LinearLayout>

自定义布局的背景

text_view_def

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/background_text_view_def"/>
</shape>

background_text_view_def

<?xml version="1.0" encoding="utf-8"?>
<!--默认文本框颜色-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#9F9F9F" android:state_enabled="false"/>
    <item android:color="#D5F2FF" android:state_pressed="true"/>
    <item android:color="#03A9F4" android:state_checked="true"/>
    <item android:color="#BDE6F8" android:state_selected="true"/>
    <item android:color="#00FFFFFF"/>
</selector>