Creación de una barra de pestañas
Agrupe pantallas en un TabView con etiquetas.
Creación de una barra de pestañas es una lección gratuita de SwiftUI Academy en CoddyKit. Esta es la lección 1 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 SwiftUI Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de SwiftUI Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
What a Tab Bar Does
A tab bar sits at the bottom of your app and lets people jump between a few top-level screens with one tap. 📱
Meet TabView
In SwiftUI you build that bar with TabView. It holds several screens and shows only one at a time.
TabView {
HomeScreen()
SettingsScreen()
}Each Child Is a Tab
Every view placed directly inside TabView becomes one tab. Two child views means two tabs in the bar.
Labeling a Tab
Without a label a tab shows nothing useful. The tabItem modifier gives each tab its icon and text.
HomeScreen()
.tabItem {
Label("Home", systemImage: "house")
}Using Label Inside tabItem
Inside tabItem you usually put a Label, which pairs a title with an SF Symbol for a clean, native look.
A Two-Tab Example
Here a full TabView shows a Home tab and a Settings tab, each with its own icon and screen.
TabView {
HomeScreen()
.tabItem { Label("Home", systemImage: "house") }
SettingsScreen()
.tabItem { Label("Settings", systemImage: "gear") }
}One Screen at a Time
TabView keeps every tab alive but only shows the selected one. Tapping another tab swaps the visible screen instantly.
Where to Place TabView
Make TabView the root view of your app so the bar stays visible no matter which tab is active.
Keep Tabs Few
iOS shows up to five tabs comfortably. Aim for three to five clear sections so users never feel lost. ✨
Tabs Are Independent
Each tab manages its own content. Scrolling or editing in one tab does not reset the others when you switch.
Native Feel for Free
Because TabView is built in, you get the standard look, blur, and animations users already expect from iOS.
Quick Check
Let us check how you give a tab its icon and title.
Recap: Building a Tab Bar
A TabView turns each child view into a tab, and tabItem gives every tab its label so users move between screens with one tap. 🎉
Aprende Swift con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Creación de una barra de pestañas» es gratis?
Sí — el texto completo de «Creación de una barra de pestañas» 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 SwiftUI Academy, actualiza a CoddyKit PRO. El curso de SwiftUI Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Creación de una barra de pestañas»?
Agrupe pantallas en un TabView con etiquetas. Practicas SwiftUI 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 SwiftUI Academy?
No se requiere experiencia previa. SwiftUI 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 1 de 4.
¿Cuánto tiempo toma la lección «Creación de una barra de pestañas»?
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 SwiftUI Academy?
Sí. Cada lección de SwiftUI 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
- Creación de una barra de pestañas
- Elementos de pestaña e insignias
- Vinculación de la pestaña seleccionada
- Combinación de pestañas con pilas