Publicado en Android

Crear pestañas con TabLayout y ViewPager2 usando Kotlin – Android


Ejemplo básico de como implementar pestañas combinadas con un vista carrusel, las pestañas se usa el componente de Material Component TabLayout y para el carrusel el ViewPager2, las vistas que se cargarán dentro del carrusel serán fragmentos.

Vista diseño TabLayout y Viewpager

El siguiente código sirve para diseñar una vista con las pestañas en la parte superior del carrusel

<?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=".FirstFragment">

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/second_fragment_label"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tab_layout" />

</androidx.constraintlayout.widget.ConstraintLayout>

Adaptador para las vistas del carrusel

Para manejar la vistas del carrusel se tiene que crear un adaptador extendido de FragmentStateAdapter




private inner class CustomPagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
    private val mFragmentList = ArrayList<Fragment>()
    private val mFragmentTitleList = ArrayList<String>()

    override fun getItemCount(): Int {
        return mFragmentList.size
    }

    override fun createFragment(position: Int): Fragment {
        return mFragmentList[position]
    }

    fun getPageTitle(position: Int): CharSequence {
        return mFragmentTitleList[position]
    }

    fun addFragment(fragment: Fragment, title: String) {
        mFragmentList.add(fragment)
        mFragmentTitleList.add(title)
    }

}

Definir la vistas del carrusel

Ahora toca diseñar la vistas que se mostrarán en el carrusel con el componente ViewPager2

class SecondFragment : Fragment() {

    private var _binding: FragmentSecondBinding? = null

    // This property is only valid between onCreateView and
    // onDestroyView.
    private val binding get() = _binding!!

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        _binding = FragmentSecondBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        arguments?.takeIf { it.containsKey(ARG_OBJECT) }?.apply {
           binding.textviewSecond.text = getInt(ARG_OBJECT).toString()
        }

    }

    override fun onDestroyView() {
        super.onDestroyView()
        _binding = null
    }
}

Integrando ViewPager2 y TabLayout

Ahora falta asignar al adaptador las vistas y interconectando con las pestañas usando TabLayoutMediator

val pagerAdapter = CustomPagerAdapter(requireActivity())
val fragmentYesterday = SecondFragment().apply {
    arguments = Bundle().apply {
        putInt(ARG_OBJECT, 1)
    }
}

val fragmentToday = SecondFragment().apply {
    arguments = Bundle().apply {
        putInt(ARG_OBJECT, 2)
    }
}

val fragmentTomorrow = SecondFragment().apply {
    arguments = Bundle().apply {
        putInt(ARG_OBJECT, 3)
    }
}

pagerAdapter.addFragment(fragmentYesterday, "Ayer")
pagerAdapter.addFragment(fragmentToday, "Hoy")
pagerAdapter.addFragment(fragmentTomorrow, "Mañana")

binding.viewPager.adapter = pagerAdapter

TabLayoutMediator(binding.tabLayout, binding.viewPager) { tab, position ->
    tab.text = pagerAdapter.getPageTitle(position) //"${position + 1}"
}.attach()

Resultado

Autor:

Desarrollador freelance programador apasionado por el arte de programar, amante del auto aprendizaje y interesado por la tecnología en general.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .