TabRow y páginas deslizables
Añada pestañas horizontales con paginación.
TabRow y páginas deslizables es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
Meet TabRow
While NavigationBar sits at the bottom, TabRow places a row of tabs at the top, perfect for switching between related views on one screen. 🗂️
TabRow vs NavigationBar
Use TabRow for in-screen sections like Posts and About; use NavigationBar for whole app destinations. Different jobs, different bars.
Add Tabs Inside It
A TabRow takes a selectedTabIndex and a content lambda where you emit one Tab per section.
TabRow(selectedTabIndex = index) {
Tab(/* ... */)
Tab(/* ... */)
}Each Tab Is Selectable
Each Tab has its own selected flag and onClick, plus text or an icon, much like a NavigationBarItem.
Tab(
selected = index == 0,
onClick = { index = 0 },
text = { Text("Posts") }
)Make Pages Swipeable
To swipe between pages, pair the tabs with a HorizontalPager, which shows one full-width page at a time.
val pagerState = rememberPagerState { 3 }
HorizontalPager(state = pagerState) { page -> }One State, Two Views
The trick is sharing pagerState. The TabRow reads its current page, and the pager drives that page as the user swipes.
TabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Tap Should Scroll the Pager
On a tab tap, call animateScrollToPage so tapping a tab smoothly slides the pager to that page.
scope.launch {
pagerState.animateScrollToPage(i)
}Run It in a Scope
Because animateScrollToPage is a suspend call, launch it from a rememberCoroutineScope inside your onClick.
val scope = rememberCoroutineScope()Scrollable Tabs
Got many tabs? Use ScrollableTabRow so they scroll horizontally instead of cramming into the screen width.
ScrollableTabRow(selectedTabIndex = pagerState.currentPage) { /* ... */ }Style the Indicator
The moving underline is the indicator slot. You can recolor or resize it to match your theme and brand.
indicator = { tabPositions -> /* custom underline */ }Pager Plus Tabs Pattern
Combining TabRow and HorizontalPager over one shared state is the standard Compose pattern for swipeable, tabbed screens.
Quick Check
You built swipeable tabbed pages. Final check!
Recap
You mastered TabRow with HorizontalPager: shared pagerState links them, animateScrollToPage handles taps, and ScrollableTabRow fits many tabs. Course done! 🚀
Preguntas frecuentes
¿La lección «TabRow y páginas deslizables» es gratis?
Sí — el texto completo de «TabRow y páginas deslizables» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «TabRow y páginas deslizables»?
Añada pestañas horizontales con paginación. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «TabRow y páginas deslizables»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- NavigationBar con varias pestañas
- Resaltar la ruta seleccionada
- Conservar el estado de las pestañas al cambiar
- TabRow y páginas deslizables