➜ Navegación con TabLayout y ViewPager

¡Hola, programadores! Bienvenidos a una nueva lección de nuestro curso de Carrito de Compras con Kotlin. En el video de hoy, vamos a implementar la navegación con TabLayout y ViewPager, una herramienta súper útil para organizar el contenido en pestañas y ofrecer una experiencia de usuario fluida y moderna.

Aquí tienes una descripción detallada del código de la clase CatalogoActivity, fragmentada con explicaciones acompañadas de trozos de código relevantes:

1. Variables y Layout de la Actividad

Se declaran las variables tab y page que corresponden al TabLayout y al ViewPager. Estas gestionan las pestañas y el contenido de cada fragmento que se muestra al deslizar entre ellas.

kotlin

class CatalogoActivity : AppCompatActivity() {
    lateinit var tab: TabLayout
    lateinit var page: ViewPager

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

2. Inicialización de TabLayout y ViewPager

Se vinculan los componentes del layout XML con el código mediante findViewById. Aquí se añaden tres pestañas al TabLayout con textos "OFICINA", "LIBRERÍA" y "REGALOS".

kotlin

tab = findViewById(R.id.tab)
page = findViewById(R.id.page)

tab.addTab(tab.newTab().setText("OFICINA"))
tab.addTab(tab.newTab().setText("LIBRERÍA"))
tab.addTab(tab.newTab().setText("REGALOS"))

También se define la gravedad de las pestañas para que ocupen todo el espacio disponible:

kotlin

tab.tabGravity = TabLayout.GRAVITY_FILL

3. Adaptador de ViewPager

Aquí se crea el adaptador MyAdapter (una clase interna que veremos más adelante), que es responsable de gestionar qué fragmento se debe mostrar para cada pestaña. El ViewPager recibe este adaptador.

kotlin

val adapter = MyAdapter(this, supportFragmentManager, tab.tabCount)
page.adapter = adapter

4. Sincronización entre TabLayout y ViewPager

Se añade un PageChangeListener que sincroniza el cambio de páginas en el ViewPager con las pestañas del TabLayout. Cuando el usuario desliza entre las páginas, las pestañas se actualizan automáticamente.

kotlin

page.addOnPageChangeListener(TabLayoutOnPageChangeListener(tab)) 

Además, se gestiona el comportamiento cuando una pestaña es seleccionada. Esto asegura que, cuando se toca una pestaña, el ViewPager cambie a la página correspondiente:

kotlin

tab.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
    override fun onTabSelected(ttab: TabLayout.Tab?) {
        page.currentItem = ttab!!.position
    }

    override fun onTabUnselected(ttab: TabLayout.Tab?) {}

    override fun onTabReselected(ttab: TabLayout.Tab?) {}
})

5. Menú de Opciones

Se infla un menú en la barra de acciones mediante onCreateOptionsMenu. En este caso, contiene una opción para acceder al carrito de compras.

kotlin

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_cart -> {
            startActivity(Intent(baseContext, CartActivity::class.java))
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

En onOptionsItemSelected, se maneja el evento cuando el usuario selecciona la opción de "Carrito", redirigiéndolo a la actividad CartActivity.

 kotlin

override fun onOptionsItemSelected(item: MenuItem): Boolean {
    return when (item.itemId) {
        R.id.action_cart -> {
            startActivity(Intent(baseContext, CartActivity::class.java))
            true
        }
        else -> super.onOptionsItemSelected(item)
    }
}

6. Clase Interna MyAdapter

MyAdapter es un adaptador personalizado que extiende FragmentPagerAdapter. Aquí se gestionan los fragmentos que se deben mostrar según la pestaña seleccionada.

kotlin

class MyAdapter(var context: Context, fm: FragmentManager, var numTabs: Int) : FragmentPagerAdapter(fm) {
    
    override fun getCount(): Int {
        return numTabs
    }

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> OficinaFragment()
            1 -> LibreriaFragment()
            2 -> RegalosFragment()
            else -> getItem(position)
        }
    }
}

• getCount: Retorna el número total de pestañas que tiene el TabLayout.
• getItem: Devuelve el fragmento correspondiente a la pestaña seleccionada. Dependiendo de la posición, se retorna OficinaFragment, LibreriaFragment, o RegalosFragment.