TabLayout+ViewPager2的简单使用详解

implementation "androidx.viewpager2:viewpager2:1.0.0"

<androidx.viewpager2.widget.ViewPager2
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/tablayout"
    android:id="@+id/viewpager2"/>

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="30dp"
    app:layout_constraintTop_toTopOf="parent"
    app:tabTextAppearance="@style/tabLayoutTheme"
    android:id="@+id/tablayout"
    app:tabMode="fixed">

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

class ViewPager2Adapter extends FragmentStateAdapter{

    public ViewPager2Adapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        // 每个页面对应的fragment
        switch (position){
            // 这里我随便写了两个Fragment
            case 0:return new Fragment1();
            case 1:return new Fragment2();
        }

        return null;
    }

    @Override
    public int getItemCount() {
        // 有几个页面就返回几
        return 2;
    }
}

for (int i = 0; i < 2; i++) {
    tabLayout.addTab(tabLayout.newTab());
}

TabLayoutMediator mediator = new TabLayoutMediator(binding.tabLayout, binding.viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
    @Override
    public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
        tab.setText(tabs[position]);
    }
});
mediator.attach();

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    // 页面被选中
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        Log.d(TAG, "onTabSelected: "+tab.getText());
    }
    // 页面切换到其他
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        Log.d(TAG, "onTabUnselected: "+tab.getText());
    }

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

    }
});

<?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">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/icon"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/icon"/>

</androidx.constraintlayout.widget.ConstraintLayout>

private View getViewAtI(int position){
    View view = getLayoutInflater().inflate(R.layout.bottom_layout, null, false);
    ImageView  imageView = view.findViewById(R.id.icon);
    TextView textView = view.findViewById(R.id.text);
    // 这个icons就是一个简单的图片保存的数组，保存如R.drawable.touxiang
    imageView.setImageResource(icons[position]);
    textView.setText(tabs[position]);

    return view;
}

TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
    @Override
    public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
        //tab.setText(tabs[position]);
        tab.setCustomView(getViewAtI(position));
    }
});

mediator.attach();