SwiftUI TabView Tutorial - How to work with Tab Bar Navigation, Page Style, and tab items

  Рет қаралды 19,614

Karin Prater

Karin Prater

Күн бұрын

In this SwiftUI tab bar tutorial, I explain how to use TabView in your SwiftUI projects. TabView is an essential component in creating navigation structures for iOS applications. I walk you through the process of setting TabView with tabItem, including adding multiple pages and changing the TabView styling like paging and background tab bar colors.
One of the key features I discuss is programmatically changing the selected tab, which is especially useful for creating onboarding sequences or navigating through a series of pages. I demonstrate how to use the selection binding to control the tab selection and perform actions based on the selected tab.
I also provide tips on customizing the appearance of the TabView, such as changing the background color and styling the selected and unselected tabs. Additionally, I show you how to integrate the TabView into a macOS settings view, highlighting its versatility and usefulness across multiple platforms.
📃 See the code and explanations in this blog post www.swiftyplace.com/blog/tabv...
00:00 introduction
02:08 Basic example of TabView and tabitem
09:17 TabView appearance for page styling
14:34 How to change the tab bar background color
20:00 Using TabView on macOS for the Settings window
22:25 Programmatically changing the selected tab
29:09 wrap up
If you liked what you learned and you want to see more, check out one of my courses!
👨‍💻 my SwiftUI course school.swiftyplace.com/course...
👨‍💻 my Core Data and SwiftUI course school.swiftyplace.com/course...
#SwiftUI #TabView #Tabbar #Navigation

Пікірлер: 26
@leynercastillo
@leynercastillo 7 күн бұрын
Your content was the only that it helps me to fix my issue with my TabView without using UIKit components. Thanks
@akeemsalami1854
@akeemsalami1854 Жыл бұрын
Thank you for the detailed explanation and use cases explained in this tutorial.
6 ай бұрын
It was a great tutorial! I found everything that I'm looking for.
@alexguthrie1924
@alexguthrie1924 Жыл бұрын
You are very helpful!! Thank you for your hard work
@andreyp7224
@andreyp7224 Жыл бұрын
You are amazing! Thanks for a really helpful content.
@jaysullivan897
@jaysullivan897 5 ай бұрын
Great Tutorial!
@qinqiangwu7136
@qinqiangwu7136 9 ай бұрын
I am a beginner in SwiftUl, and it helpers me a lot, thanks~~
@danialothman
@danialothman 3 ай бұрын
thanks for this, Im a swiftui newbie, this really helped!
@santiagonahuel8845
@santiagonahuel8845 9 ай бұрын
Thank you Karin!
@neiocheney5583
@neiocheney5583 10 ай бұрын
Tank you for share!
@landgasthofzumschwarzenadl3305
@landgasthofzumschwarzenadl3305 6 ай бұрын
sehr schön und hilfreich danke !
@AlexanderLopez-ww8pz
@AlexanderLopez-ww8pz 2 ай бұрын
Nice, thank you a lot!!! New subscriber
@p.ternali
@p.ternali Жыл бұрын
Amazing!
@AndrewDChristie
@AndrewDChristie 6 ай бұрын
Thanks!
@maulikpatel5714
@maulikpatel5714 11 ай бұрын
You are insane !!🙇‍♂️
@yasinkon
@yasinkon 4 ай бұрын
Thank you
@lazardjordjevic4523
@lazardjordjevic4523 9 ай бұрын
Hi Karin, Great video. How would you deal with case where you have few pages before you show TabView? For example App starts with Page1 Page1 opens Page2 Page2 opens Page3 Page3 opens TabView I want TabView to be like root view when it opens so it does not have back arrow. Also I would like to have native push animation when moving from Page1 to Page2 to Page3. As far I can see NavigationStack does not allow us to have nasted NavigationStacks. If I move my NavigationStack inside each TabView page then I don't have NavigationStack that would give me ability to push pages from Page1 to Page2 etc. Any idea how this can be solved?
@katerinaromanov
@katerinaromanov 11 ай бұрын
I love everything you do
@johnnyp1523
@johnnyp1523 Ай бұрын
thanks
@FRkiddo
@FRkiddo 9 ай бұрын
Hi Karen, how can we make the tap bar buttons also work as back buttons just like the native ios Phone app has this for example but also apps like Twitter?
@samandarjorayev8229
@samandarjorayev8229 10 ай бұрын
Thank you dear How could I get full source code? (HomeView, FoodDetailView ... etc)
@victorriurean
@victorriurean Жыл бұрын
nice
@Sebistyla22
@Sebistyla22 10 ай бұрын
hello how make a tabbar with costum images also no systemimage
@whysquar2473
@whysquar2473 11 ай бұрын
Please, how can you do it so that when you press the tab item and it was already the selected tab item to reset the state of the navigation to the original view?
@30guarino
@30guarino 9 ай бұрын
That's why I'm here lol... AppStuff (Stephan Dowless)does a 'hacky solution in his treadClone video but I wanted to see if I can find a more elegant way
@user-jy5pu6bg5p
@user-jy5pu6bg5p 11 ай бұрын
what is Food ? is it a class ? can we have the code ?
WWDC24: Key Updates for macOS Development with SwiftUI
31:51
Karin Prater
Рет қаралды 2,1 М.
Clown takes blame for missing candy 🍬🤣 #shorts
00:49
Yoeslan
Рет қаралды 42 МЛН
Secret Experiment Toothpaste Pt.4 😱 #shorts
00:35
Mr DegrEE
Рет қаралды 27 МЛН
Gym belt !! 😂😂  @kauermtt
00:10
Tibo InShape
Рет қаралды 17 МЛН
WHAT’S THAT?
00:27
Natan por Aí
Рет қаралды 14 МЛН
Hands-On Power BI Tutorial 📊 Beginner to Pro [Full Course] ⚡
3:02:18
Pragmatic Works
Рет қаралды 2,5 МЛН
Programmatic Routing in SwiftUI for TabView Apps in SwiftUI
29:53
No Code App Development is a Trap
9:31
Coding with Dee
Рет қаралды 178 М.
SwiftUI List with Custom Cell & Passing Data
36:27
Sean Allen
Рет қаралды 115 М.
How to use NavigationStack in SwiftUI | Bootcamp #62
23:59
Swiftful Thinking
Рет қаралды 32 М.
Clown takes blame for missing candy 🍬🤣 #shorts
00:49
Yoeslan
Рет қаралды 42 МЛН