Я хочу использовать com.google.android.material.tabs.TabLayout
компонент с новой реализацией androidx.viewpager2.widget.ViewPager2
Android ViewPager
. Однако метод setupWithViewPager(..)
предоставляемый TabLayout
поддерживает только старую реализацию ViewPager
. Есть ли способ легко связать TabLayout
с компонентом ViewPager2
?
Как использовать TabLayout с ViewPager2 в Android
Ответ 1
Вы должны использовать этот TabLayoutMediator
, который имитирует tabLayout.setupWithViewPager()
и устанавливает ViewPager2
с помощью Tablayout
. В противном случае вам придется написать свой собственный адаптер, который объединит обе стороны.
Ответ 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
Ответ 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()
}
}
UPDATE
Если вы используете implementation 'com.google.android.material:material:1.1.0-alpha10'
, используйте приведенный ниже код
TabLayoutMediator(tabs, viewpage,
TabLayoutMediator.TabConfigurationStrategy { tab, position ->
when (position) {
0 -> { tab.text = "TAB ONE"}
1 -> { tab.text = "TAB TWO"}
}
}).attach()
OUTPUT