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

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.

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!

#SwiftUI #TabView #Tabbar #Navigation

[leynercastillo]

Your content was the only that it helps me to fix my issue with my TabView without using UIKit components. Thanks

[akeemsalami]

Thank you for the detailed explanation and use cases explained in this tutorial.

[andreyp]

You are amazing! Thanks for a really helpful content.

[alexguthrie]

You are very helpful!! Thank you for your hard work

It was a great tutorial! I found everything that I'm looking for.

[danialothman]

thanks for this, Im a swiftui newbie, this really helped!

[qinqiangwu]

I am a beginner in SwiftUl, and it helpers me a lot, thanks~~

[AlexanderLopez-wwpz]

Nice, thank you a lot!!! New subscriber

[samandarjorayev]

Thank you dear
How could I get full source code? (HomeView, FoodDetailView ... etc)

[lazardjordjevic]

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?

[FRkiddo]

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?

[Sebistyla]

hello how make a tabbar with costum images also no systemimage

[whysquar]

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?

[jypubgp]

what is Food ? is it a class ? can we have the code ?