DEFINICIÓN
TabLayout
Hereda de HorizontalScrollView.
TabLayout provee un layout horizontal para mostrar pestañas.
Para crear las pestañas que se van a mostrar se hace con instancias TabLayout.Tab. Se crean las nuevas pestañas con NewTab().
Una vez creadas se puede cambiar la etiqueta o el icono con TabLayout.Tab.setText(int) y TabLayout.Tab.setIcon(int) respectivamente.
Para mostrar las pestañas se deben añadir al Layout utilizando alguno de los métodos addTab(Tab).
TabLayout provides a horizontal layout to display tabs.
TabItem
Hereda de View.
Un TabItem es una View especial que permite declarar pestañas para un TabLayout desde el archivo de Layout.
Esta View no se incluye al TabLayout sino que es un Dummy que permite definir el número de pestañas, el texto o el icono.
INTEGRACIÓN
La integración con ViewPager2 es directa y muy sencilla.
Se va a utilizar como ejemplo el proyecto de la entrada de ViewPager2:
Añadir un TabLayout al Layout
Lo primero que debemos hacer es añadir un TabLayout sobre el ViewPager2 como se ve en el siguiente ejemplo:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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"
tools:context=".MainActivity">
<com.google.android.material.tabs.TabLayout
android:id="@+id/tlPrueba"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tlPrueba" />
</androidx.constraintlayout.widget.ConstraintLayout>
Después se configura el TabLayoutMediator para que exista relación entre el TabLayout y el ViewPager2:
TabLayoutMediator(binding.tlPrueba, binding.pager) { tab, position ->
tab.text = "${(position + 1)}"
}.attach()
Con esto lo tenemos todo hecho
package com.example.fragmentpagerapp
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.fragmentpagerapp.adapter.MyFragmentStateAdapter
import com.example.fragmentpagerapp.databinding.ActivityMainBinding
import com.example.fragmentpagerapp.model.CharacterProvider
import com.example.fragmentpagerapp.transformer.ZoomOutPageTransformer
import com.google.android.material.tabs.TabLayoutMediator
private lateinit var binding: ActivityMainBinding
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
val pagerAdapter = MyFragmentStateAdapter(this, CharacterProvider.characterList)
binding.pager.adapter = pagerAdapter
binding.pager.setPageTransformer(ZoomOutPageTransformer())
TabLayoutMediator(binding.tlPrueba,
binding.pager) {
tab, position ->
tab.text = "${(position + 1)}"
}.attach()
}
}
