Create a tab bar with TabView and PageTabViewStyle in SwiftUI | Bootcamp #43

Подписаться 50 тыс.

Просмотров 33 тыс.

50% 1

In this installation of the SwiftUI Bootcamp we will learn how to use the TabView() component in SwiftUI. First we will use the DefaultTabViewStyle() to implement a regular tab view into our app. This will display the tabs at the bottom of the screen that a user can switch between. We will learn how to customize the tabs with icons and colors and how to programmatically navigate between the tabs. We will conclude the video by switching to the PageTabViewStyle() where we convert our regular TabView into a paging view, where users can swipe between the tabs.
Next video: • Adapt for Dark Mode in...
Last video: • How to use Slider in S...
🤙 WELCOME BACK 🤙
WEBSITE: www.swiftful-t...
DISCORD: / discord
GITHUB: github.com/Swi...
SAY THANKS: www.buymeacoff...

Опубликовано:

3 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 76

@roh9934 Год назад

Best SwiftUI channel on youtube.

@natgenesis5038 2 года назад

Brother I've been learning your great work since the first lesson and it's a great work trust me .

@SwiftfulThinking 2 года назад

Thank you bro

@ojtok79 3 года назад

Another fantastic video! Thank you.

@SwiftfulThinking 3 года назад

Thanks olcay!!

@andrejkling3886 3 года назад

Hey Nick all your course is amazing... cool job. Thank you very much

@SwiftfulThinking 3 года назад

Haha thanks again Andrej!

@samha1513 3 года назад

Ur amazing. Keep it up

@SwiftfulThinking 3 года назад

Thanks for watching Sam!

@youngdomsey 4 месяца назад

Really cool! Thank you!!

@최승기-g8f 3 года назад

Thank you!!!

@SwiftfulThinking 3 года назад

You're welcome! 최승기 !

@appleprof 2 года назад

thank you very much Nick! ur tutorials are amazing I'm smashing the like button every video lol. BTW, can you please do tutorial on RevenueCat or incorporating IAP on SwiftUI App? Having a lot of trouble with that...

@JeckyKA 3 года назад

very useful, thanks a lot!

@jeanpierrelabonte2868 2 года назад

Nice job!

@magedmohmed4403 2 года назад

Thank you Nick

@mykosen5679 25 дней назад

For iOS 18 (because .tabItem is being deprecated): struct TabViewBootcamp: View { @State var selectedTab: Int = 0 var body: some View { TabView(selection: $selectedTab) { Tab(value: 0) { HomeView(selectedTab: $selectedTab) } label: { Image(systemName: "house.fill") Text("Home") } Tab(value: 1) { Text("BROWSE TAB") } label: { Image(systemName: "globe") Text("Browse") } Tab(value: 2) { Text("PROFILE TAB") } label: { Image(systemName: "person.fill") Text("Profile") } } .tint(.red) } }

@cmtogether9987 2 года назад

Hi Nick, Thanks for the awesome video. Hoping you can help answer a question on the paged tabview. I want to disable manual scrolling and instead implement it manually. There doesn’t seem to be any way to disable the scrolling without disabling all content in the tab from receiving touches … Please help ! Thank you 🙏🏼

@GabeColors 3 года назад

What key do you click to finish autocomplete? When I click "tab" or "enter" while typing in ".tabIte...." for example I get a parenthesis instead of curly brackets like .tabItem(label: () -> View) instead of { } like I see you get. BTW any EASY way to massively increase the value of your videos would be to use a screen recording software that shows your hotkeys! Thanks as always for all your content.

@SwiftfulThinking 3 года назад

I just click tab haha. I think the autocomplete has several options and probably uses the most common one that you've been using, which is why yours is defaulting to the other option. Sometimes I'll just type it out with { } because it's faster lol

@rayhaanalykhan 9 месяцев назад

You can use control key to get the completion with all the parameters

@dennismallette258 2 года назад

Hi Nick, great videos, thank you so much… I was wondering if you could help me… Do you know if I can use PageTabViewStyle and Timer to auto scroll through the Tabs?

@DenisUjkanovic Год назад

Nice!

@GabeColors 3 года назад

Great video, at around 13:00 \.self threw me off. Anyone know an earlier video I missed on \

@SwiftfulThinking 3 года назад

I touched on in a few times in this course, but if you really want to dive into it, I'd check out this video on Hashable: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Oxc4dCtHPkk.html

@arnosolo2008 9 месяцев назад

Thanks you

@priyankapoojara 7 месяцев назад

Hey Nick, I really appreciate your work, I'm learning swiftui conceptually from your videos I have one query if you can answer I want to give custom color for active and disable page in swiftui, It would be great help for me if you will answer. Thanks.

@valerieokelly6224 2 года назад

Nice

@tabitetoncoutau6103 11 месяцев назад

Hi Nick, Love your videos, however I did hit a snag on this one. The extracted view "HomeView" breaks the code. The tabs are no longer selectable. I use on my computer MacOS Ventura 13.3 and iPhone 14 and above. Also some other details of your code seem to not work properly. Would you consider adding an addendum to the changes with current MacOS Ventura and above. Are you still actively making videos on Swift? This make me realize how do we keep up with Mac updates and insure our code stays compatible? Is there an easy way to deal with deprecated functions?

@stevanmilovanovic2612 Год назад

Hey Nick, first of all thank you for the great content. Do you maybe know if there is a way to show part of the next page?

@SwiftfulThinking Год назад

No there isn’t (unless your on iPad). You’d have to build something totally custom. Generally, you want to load the screens separately to keep low memory and high performance - this drives a lot of the design for native components like this

@stevanmilovanovic2612 Год назад

@@SwiftfulThinking I am actually using this for tvOS shelves :) Thanks for the answer, something totally custom was something I wanted to avoid 😅

@ElianasJourney Год назад

hi! is it possible every tab bar will be link in webpage? like webview? can u make a videos for it please

@kevincosta2132 8 месяцев назад

Hello, thanks for the all the videos, i'm learning so much. In this video you said that we could have the subview in another file and this is something i've been wondering for a while, how can we call another file to use as a view? So we can reuse for example the same button.swift file to create all the buttons in the app, is this something you will explain later in the serie or is there no video for that?

@SwiftfulThinking 8 месяцев назад

I think video #13 started to show that. We’ve been creating separate views in many of these videos… someone in our Discord can definitely explain further if you’re still confused: discord.gg/UUcmZZeGaU

@kevincosta2132 8 месяцев назад

In video #13 you showed how to reuse a view but not how to include it if it was in a different file, thank you for the discord tho i didn't know there was one :)@@SwiftfulThinking

@bobx7339 7 месяцев назад

Hi, I have a question. How can I hide the TabBar when pushing to the second page using NavigationLink?

@SwiftfulThinking 7 месяцев назад

.toolbar(.hidden, for: .tabBar)

@YaroslavSherstyuk 2 года назад

How use presentation Detents together with tabview?

@tainguyen-ng3yl Год назад

hi Nick, is there any way to make the carousel scroll like a cycle?

@perrinmatias 2 года назад

Hello Nick, great video, but I run in to 2 problems, the first one is when I put the .ignoresSafeArea() (by the way: I tried them in all their forms of the modifier) it covered the tab view bar, so i lefted like that with the white part on the top. and the second is how i can change the color of the tabview bar? Thanks bye!

@SwiftfulThinking 2 года назад

Hi Matias! Umm well if you are calling .ignoreSafeArea() and it's cover the Tab bar, then that View must be ON TOP of the TabView, rather than inside of the TabView. You might need to move the background layer further back in the hierarchy. And #2... unfortunately we can't change the TabView color (at least not yet anyway). I have a video on creating a custom tab bar so that we can do things like that, but it's pretty challenging to do and is why I put it in my Advanced playlist: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FxW9Dxt896U.html

@perrinmatias 2 года назад

@@SwiftfulThinking ok thanks, i appreciate the fast response!!

@ulquiorramax1749 Год назад

@@perrinmatias I am also facing .ignoreSafeArea() covering issue. I have ensured, HomeView is inside TabView, but still if overlaps TabBar

@calebhawley1473 9 месяцев назад

Had the same problem tried all possible ways and copied yours several times did not work. This is the only thing that did. By the way, learning a lot from your videos! .onAppear { // correct the transparency bug for Tab bars let tabBarAppearance = UITabBarAppearance() tabBarAppearance.configureWithOpaqueBackground() UITabBar.appearance().scrollEdgeAppearance = tabBarAppearance // correct the transparency bug for Navigation bars let navigationBarAppearance = UINavigationBarAppearance() navigationBarAppearance.configureWithOpaqueBackground() UINavigationBar.appearance().scrollEdgeAppearance = navigationBarAppearance }

@rayhaanalykhan 9 месяцев назад

@@SwiftfulThinkingThanks nick, I figured you can actually change the color of TabView like this: .toolbarBackground(.visible, for: .tabBar) .toolbarBackground(.yellow, for: .tabBar) // we can change background color of 'TabView' using above lines of code. Note: This will change color of 'TabView' for this item only, if you want the color to be changed for all tab items you can copy paste this code to other items. Don't bother putting this code outside, i.e: on TabView, it won't work. .tag(0)

@tomqin3685 3 года назад

Hi Nick! Nice job! And there is question that I hate to ask for answers is , when I use the NavigationLink to go to the next page from TabView , how can I hide the tabBar in the second page? Thank you all the time! ( Sorry for my bad English

@SwiftfulThinking 3 года назад

Hi Tom! On the second page, you can include .navigationBarHidden(true). You might have to also include .navigationBarHidden(false) when going back to the first page!

@tomqin3685 3 года назад

@@SwiftfulThinking I will try , Thanks again Nick!

@rayhaanalykhan 9 месяцев назад

@@SwiftfulThinking wouldn't that hide the navigation bar instead of Tabbar?

@rayhaanalykhan 9 месяцев назад

Please provide the code.

@tmjromao 2 года назад

Hi Nick! Shall each tabItem have its own "Navigation view" in case it has 2, 3 inner views (navigation links)? thanks, regards

@SwiftfulThinking 2 года назад

Hey Tiago, yes, you can def do that. It's important to just make sure you never embed two NavigationViews inside the same hierarchy, but as long as they don't over lap it should work. Some other devs might put the entire TabView inside a single NavView, which will change the UI a bit. ... In more advanced apps, developers will probably make their own tab bar to avoid limitations like this

@tmjromao 2 года назад

@@SwiftfulThinking i think i got it. Navigationview per each tab item. Believe it's possible to "hide" the navigation top bar (should be blank or back button). Will try to implement 2 or 3 screens (views), higher, medium and more detailed content) . Thanks for all the videos, explanations you did. learned a lot. keep up doing enlighten work. best regards

@rayhaanalykhan 9 месяцев назад

@@tmjromao Generally speaking TabView is parent and NavigationStack is child.

@tmjromao 9 месяцев назад

@@rayhaanalykhan got it, thanks for the explanation, replying.happy and fruitful 2024

@MrSkyydude 2 года назад

8:16 "fucking brackets" LOL

@rayhaanalykhan 9 месяцев назад

He didn't say that.

@elemento_arts 4 месяца назад

Hi Nick. Not sure if this is a bug. I tried to use the “.toolbar(.hidden, for: .tabBar) to hide the TaBar when going into detail mode and back to visible on the list. It does work but there is a delay of about 1 second till the TabBar gets back to visible. Have you tried it? Thanks

@SwiftfulThinking 4 месяца назад

Yea, I’ve been finding it quite buggy to use too unfortunately. I’m hoping this is fixed in upcoming updates. It works a little better if you add animation to it, or sometimes I will actually animate it before (or further after) the segue to not distract the user

@elemento_arts 4 месяца назад

@@SwiftfulThinkingI see. Let’s hope they fix it soon cause it really is an essential part of any basic App, we need that extra space and transition to feel natural such as in UIKit. Cool, I’ll give it a try. Thanks 👍

@williamwildsmith5162 2 года назад

Hi Nick. Great videos! .accentcolor is going to be deprecated, it seems. Replaced by .tint. But if I use .tint, the tab bar items don't change color. Any thoughts?

@davidebettarello8310 Год назад

It gets the AccentColor from the assets folder. Try changing it from there!

@rayhaanalykhan 9 месяцев назад

.toolbarBackground(.visible, for: .tabBar) .toolbarBackground(.yellow, for: .tabBar) // we can change background color of 'TabView' using above lines of code. Note: This will change color of 'TabView' for this item only, if you want the color to be changed for all tab items you can copy paste this code to other items. Don't bother putting this code outside, i.e: on TabView, it won't work. .tag(0)

@andresraigoza2082 2 года назад

Thanks Nick!!! What can I do to change the color of the tab items and the background color of the tab in Xcode 13?

@SwiftfulThinking 2 года назад

Hi Andres! Always asking great questions. Unfortunately, the TabView isn't that customizable. I think Apple wants us to keep the tab in the native light/dark mode colors. If you really want to customize the colors you'll need to create a custom tab view, which is much more difficult. I do cover that in a video in the Advanced Learning playlist though...

@miguelesteves7454 Год назад

Hi, How personalize page indicator when .tabViewStyle(PageTabViewStyle())???

@rayhaanalykhan 9 месяцев назад

You can use the same code, define an image in tabItem, then you can use that image as page indicator.

@rasheed1andrew 3 года назад

Is their a way to dismiss a tab bar after transitioning to a view on the tab bar

@rasheed1andrew 3 года назад

The project I’m working on has a tab bar that manages 5 views. 1 of the views is a camera view. I want the camera to take up the full screen when the user navigates to the camera.

@rasheed1andrew 3 года назад

And also if the user cancels out of the camera, I will like to go back to the view the user was on before going to the camera

@rayhaanalykhan 9 месяцев назад

You meant to say hide TabView right? or dismiss?