Как использовать TabLayout с ViewPager2 в Android

Question

Я хочу использовать com.google.android.material.tabs.TabLayout компонент с новой реализацией Android ViewPager androidx.viewpager2.widget.ViewPager2. Однако метод setupWithViewPager(..), предоставляемый TabLayout, поддерживает только старую реализацию ViewPager. Есть ли способ легко связать TabLayout с ViewPager2 компонентом?

Answer 1

Вы должны использовать это TabLayoutMediator, которое имитирует tabLayout.setupWithViewPager() и устанавливает ViewPager2 с Tablayout.В противном случае вам придется написать свой собственный адаптер, который объединит обе стороны.

Answer 2

Инициализируйте объект TabLayoutMediator объектом TabLayout, ViewPager2, autoRefresh - логический тип и объектом OnConfigurationChangeCallback.

TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(tabLayout, viewPager2, true, new TabLayoutMediator.OnConfigureTabCallback() {
     @Override
     public void onConfigureTab(@NotNull TabLayout.Tab tab, int position) {
          // position of the current tab and that tab  
     }
});

Наконец, просто позвоните attach() объекту TabLayoutMediator , чтобы подключить вывод табуляции к пейджеру : -

 tabLayoutMediator.attach();

autoRefresh -ключ, если установлено значение true - (по умолчанию установлено значение true)

RECREATES все вкладки tabLayout, если notifyDataSetChanged вызывается дляпейджер adapter.

Использовать содержимое TabLayoutMediator.java

Answer 3

Вот ответ на обновление Как использовать TabLayout с ViewPager2 в Android

Теперь нам не нужно создавать класс из TabLayoutMediator

Используйте ниже dependencies

implementation 'com.google.android.material:material:1.1.0-alpha08'
implementation 'androidx.viewpager2:viewpager2:1.0.0-beta02'

ОБРАЗЕЦ КОДА

XMl макет

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
        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">

    <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/viewpager"
            app:layout_anchor="@id/tabs"
            app:layout_anchorGravity="bottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
    />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

Активность

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*
import com.google.android.material.tabs.TabLayoutMediator

import com.google.android.material.tabs.TabLayout


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

//        setSupportActionBar(toolbar)
        viewpager.adapter = AppViewPagerAdapter(supportFragmentManager, lifecycle)

        TabLayoutMediator(tabs, viewpager, object : TabLayoutMediator.OnConfigureTabCallback {
            override fun onConfigureTab(tab: TabLayout.Tab, position: Int) {
                // Styling each tab here
                tab.text = "Tab $position"
            }
        }).attach()


    }
}

ВЫХОД