Swiftful Thinking indeed. I just stumbled across your channel on my app development journey and your tutorials are showing me how to leverage extensions, conditionals, enums, and a lot of that other great Swift in a way that no one else has. I feel like it's really changing my approach to the language and this app that I'm working on. Really appreciate the work you're doing, not to mention that you're putting such comprehensive tutorials out for free for broke plebeians like myself. Great moves, keep it up!
You're a one-in-million SwiftUI TH-camr. Step by step about Matched Geometry, ViewBuilder, Generics, PreferenceKey, and then come to Custom Tabbar. Anyone can understand when you do your tutorials in this strategy. Thanks, Nick. You deserve the "SwiftUI Angel" Trophy. 🏆❤🔥
Wow! Indeed, this was a very long tutorial but worth the time and your effort is really appreciated. Honestly, I got lost a couple of times and had to rewatch your other videos and this one. Thanks for making all these videos, I cant than k enough
Awesome. Your literally so clever, they way you design, and put stuff together so we understand is really well done. the second you typed ".home" after showing us how the Enum could replace a model was something else indeed!
😅 Thanks Daniel. I generally try to design these custom components as close to Apple's APIs as possible. This way they are more easily supported for future updates 😎
Amazing video-thanks for making this. I wanted to build a custom tab bar for a while but didn't know how. One subtle/buggy thing: Around minute 44:06 (th-cam.com/video/FxW9Dxt896U/w-d-xo.htmlsi=sYKxr0zkNRMAto50&t=2646), you set up a ZStack with alignment bottom and put the content there and then the tabbar below it. This leads the content to render (intentionally) below the tab bar. However, if you're building a tab bar that looks similar to the typical iOS tab bar (i.e., not floating), then the content will still render below the tab bar even though that might no longer be the intention. I had fixed mine by: - replacing the ZStack with a VStack (with spacing of 0) - removing the ignoreSafeAreas() (to be noted: one can set this individually on each tab view so it makes it somewhat not needed) - placing the content inside a ZStack (needed otherwise each view will render on top of each other) - adding a frame(maxHeight: .infinity) to this ZStack - and then finally putting my tab bar below that I realize this was a problem not in your set up but more specific to how I wanted my tab bar to render, but I thought I might comment in case someone else runs into this. Otherwise again awesome video.
I have no words. I've been following the whole tutorial so far and I have to say that you were born for it. You explain every topic very well, you have structured the training to make it easy and step by step. You have helped me by giving me many ideas on how to do things! I saw you have a something on Udemy and I'm going for it! Big hug from the Basque Country and thank you very much for the tutorial!
Thank you so much Nick. Your videos are awesome. So progressive, comprehensive and very useable. I really appreciate the hard work of compiling all this knowledge into learning material. I followed you on several playlists since I started with Swift and SwiftUI and it starts to pay now. Thanks again.
That is so nice compared to how I have seen other solutions! Lots to absorb but the pre-requisite videos got us somewhat ready for your final solution (Evil Nick!) Great stuff - keep these videos coming sir!
Thank you, Nick excellent tutorial; I enjoyed your teaching style; well done. I have learned so much from your classes. You explain Swift's concepts in laymen's terms. I look forward to learning more!
@ 13:07 "you said connect to a higher level selection" that part might be what is bringing about the confusion for me. where is the higher level "selection"? is it already built into swiftUi? I didn't see you create a @state var selection on any other page. I see the @state var selection: string on the Apptabbar page but I'm just not sure if that is the higher level selection you are referring to. nonetheless, when I do this and change it to a binding var, all hell breaks loose. the tabs don't get selected when I tap on them. really hoping you can help me out with this one
i loved this channel, just one thing about this custom tab bar... i dont know if anyone had the same issue, but when creating a testing environment i found out that the views are being initiated when calling them on the Tab Bar... and when you try to automate UI test.... the last view that is in the Tab Bar is the one that is going to be on front and view will take all the tap gestures that you simulate... also you can inspect that on the view hierarchy.
I found an issue with the content being larger than the screen size. For example, a list that scrolls off screen fetched from an API. The ZStack in the container view doesn't seem to handle that case as the entire list is printed and then the tab bar sits at the bottom.
Great tutorial! just wondering if there's a way to auto-extend the page if there is a scrollview like how the official tabview does when it reaches the bottom of a page?
If you / you’re client is ok with the default tab tab’s design, I recommend using the default tab bar. The native components don’t require any maintenance. However, if you want a custom design (most clients do) then go with a custom one. I have a packaged implementation of this on my GitHub if you’re interested: github.com/SwiftfulThinking/SwiftfulUI/wiki/TabBar
Great video! Very explanatory and complete. Before realizing my error, I had built my TabView inside the NavigationView. Change the setup has been problematic. The only workaround was building a custom tab view.
Thank you, Nick - this is an amazing tutorial. May I ask you whether it is possible to add a scroll to the top feature if the tab icon of the selected view is tapped? Thank you in advance!
Are you basically rendering all the screens at the same time and setting the opacity 1.0 for the selected tab? Doesnt this leave the other views active? lets say there is a video playing in another view.. wouldn't it still be active, just opacity 0?
Yes, you can easily make it lazy by changing the behavior of that modifier if you prefer (example is I the repo on github). Otherwise, I recommend using the native tabbar
This is a really cool video. I like the clever use of preference key to generate the tabs dynamically. Just one question, would this not load the content of all the views into memory at the same time? 🤔
Hey Nick, i'm really stuck where content is hidden by the CustomTabBar, i don't know which approach would be better to make the content scrolling below TabBar with respecting the spacing between TabBar and content. i used geometry reader but everything goes up after keyboard triggered. btw thanks a lot for your tutorials, i had started the bootcamp last year, it's been 439days now, i have a counter widget for my learning. thanks a lot.
Thank you so much for this helpful video! For the native TabView, the view does not redraw when you switch tabs, but it will redraw on your code, which will lost the previous state, such as scrolled position..etc. So do you happen to know how to not let the view redraw?
@@SwiftfulThinking I know you have 2 kind of version of the viewBuilder on your repo, one is no redraw no onAppear, another one has redraw and onAppear... I think the the expected behavior for TabView should be no redraw but with on Appear, but adding the local @State on each tab will disable both redraw and onAppear, right? When I was playing around your code, I found a really odd behavior, I thought those 2 code should behave the exactly same, but they are not, the 1st will redraw the view, but the 2ed will not, any idea why? 1. if selection == tab { content .opacity(1.0) .preference(key: TabBarItemsPreferenceKey.self, value: [tab]) } else { content .opacity(0.0) .preference(key: TabBarItemsPreferenceKey.self, value: [tab]) } 2. content .opacity(selection == tab ? 1.0 : 0.0) .preference(key: TabBarItemsPreferenceKey.self, value: [tab])
OnAppear is called when the view appears on the screen.. which is the same as when it draws on the screen. If you want to run a function every time the tab is clicked, just add a function onTabClick or similar
This is really neat, but doesn’t this limit you to a single tab ui per view hierarchy since the array of tabs are stored in a single global preference key?
A nice content, the only thing I wonder and I'm not able to understand, because when I'm going to create a TabBar following this tutorial, when you go to insert text in a TextField present in a View of a tabBarItem then opens the keyboard, the whole tabBar moves over, and is not covered by the keyboard as I normally expect to happen with a native tabbar.
Great catch Jonas. You should be able to make the TabBar ignore the Keyboard. Try adding ".ignoresSafeArea(.keyboard, edges: .bottom)" modifier onto the CustomTabBarContainerView! You might also need to add "ignoresSafeArea(.keyboard" in a few other places depending on your screens.
@@SwiftfulThinking Thanks, true your solution works, unfortunately though I have to look for another solution because .ignoresSafeArea(.keyboard, edges: .bottom) is available since iOS 14.0, and I'm working on iOS 13
Yes, Thank you for being the best tutor, your videos are only my hope these days , I solved my question, In TabBarItemViewModifier you change the opacity of other views and show them in Zstack, I am searching another way for switching views@@SwiftfulThinking
followed all this step but for some reason when I update the state var to a binding var section on the customTabBarView, the tabs don't change when tapped on. before the change from state to binding it does but now, it doesn't
for some reason, after changing the state selection variable to a binding variable in the customTabBarView, the buttons don't get selected on taps. I've been trying to figure this out for 2 weeks now.
Hey Rasheed, hope you got this figured out already since this was posted 5 months ago. If you're following the tutorial exactly, I think this is just an issue with the preview since we pass the .constant(tabs.first!) in as the bound "selection" parameter. The selection changing should work in a different, broader context where we have a variable rather than a constant. Good luck!
I have a question regarding using ZStack in CustomTabBarContainerView... in that ZStack you put all tabbar item views (actuall screens that change opacity upon change of tab) does that mean it will imidiatelly load all views upon launch? Or it will be same behavior as with TabView where it loads content when you go to that screen? Great video btw!
Yes but you can easily modify the view modifiers to avoid this. There is an example in the repo in github. Note: I still recommend using the native tabbar whenever possible
I’d love to use a custom tab bar, but none of the solutions I’ve seen so far have all the features of the stock one: pop to root, ScrollView bottom inset handling (so you don’t have to add bottom padding to every view to avoid content getting behind the bar when you scroll all the way down), large content viewer with drag gesture for accessibility, lazy loading, VoiceOver support...
Thanks George! You could use a drag gesture on the views and have it update the selected tab. I don't have a video on this specifically, but I have a video on Drag Gestures. There's also a PageTabViewStyle on the default tab view that has swipe gestures integrated.
Hi Nick, thanks for your amazing videos :) I have a question: Imagine that, for instance the home tab view have a navigation and you are in a deeper level of that, how do you implement the function to go back to the root/main view just making a click once on the home tab bar button? Also, how do you reset the navigation when you switch to every tab bar elements/views? Thanks a lot in advance ^^
Awesome Video...!! Thanks a lot for the great content. I followed all your videos and learned a lot from them. I just have one doubt here. With the default tab bar, we have a behavior where onAppear is called when we actually open a particular tab but in this case as we are adding the views when view builds we will not have that behavior, and onAppear of each view will be called at once as we are just hiding the views based on the selection. Do you have any workaround for it?
Malav! That's a great point, I should have checked that in the video. I think we can customize the ViewModifer to only draw the content when it's selected, which should trigger the .onAppear. Try this:
@@SwiftfulThinking I was going to switch to your custom bar but I need onAppear(), have you verified that your view modifier results in onAppear() being invoked? Thanks so much for these videos, I've looked all around at dozens of different youtube swiftui providers and you are clearly the best imo. Great work man, very thoughtful series.
I like this video, becasue you explain something that is professional, what is it? using original code pattern of the Apple code to developed and learn what we want to use
How to make a Custom Tab Bar without the original TabView with selection, but saving the state of a view? For example I am on the Home Tab, I have scrolled to the bottom, I switch now to Settings Tab and then back to Home. The scroll position should be at bottom now or better to say exactly on the position I left the Home Tab. How is it possible to do without TabView? You have any solution for that? Because really, all the Custom Tab Bars without the TabView as shell (but hiding it) are almost worthless, because you don’t have all the features! Okay, it’s not a problem to put it in the original TabView and hide it’s appearance, but sometimes there are use cases, where you want to avoid the original TabView, especially if you have to put the View where the Custom Tab Bars is as overlay in NavigationStack. And the TabView in a NavigationStack is a very bad idea. The solution would be only a 100% Custom, but but but…I have written about the problems.
believe me or not, the thing that you're looking for is happening on my app, i can go whatever view and still havving same words on the search or the state i left. btw i thought that wasn't should be like that, and now i'm wondering you're missing this thing here guys, but i think maybe embedding each page in NavStack might solve that.. i also have a problem of CustomTabView doesn't handle the padding of the content i mean the view to not stay hiding below the tabview i want it to appear above
Maybe its possible to also avoid binding in the modifier and use EnvironmentKey to pass selection in the other direction? Great and very useful videos by the way 🙂
not ios developer but this was so engaging tutorial. Don’t understand preference key much but i think i need to watch previous videos and subscribe 🙂 thank you!
I’m following the beginner SwiftUI course. Sir someone said that SwiftUI is easy as compare to storyboard but do not SwiftUI has some disadvantages which he told that most of the complex problems can’t be solved with SwiftUI. Sir Is it true?
Hi Jemmy, well it depends who you ask but I would say storyboard has many more disadvantages than SwiftUI. I don't think Apple would have released and started using SwiftUI in all of their apps if they didn't think it has some big benefits for the future of iOS development :)
@@SwiftfulThinkingThank you Sir! Lemme continue on your Beginner Bootcamp. It’s really interesting. I love the way you teach. Stay healthy and blessed!
Yes, if the compiler KNOWS that is 100% will be a Color, then you can pass .red. But if it can be Color OR other types, you need to explicitly state Color.red
@@SwiftfulThinking Sure, but in this case, your parameter is explicitly a Color, correct? if so, .red would work for your TabBarItem model (I guess I should have been more explicit about what _I_ was referring to heh)
Absolutely amazing tutorial. I'm new to SwiftUI (experienced programmer though) and hated the lack of customizability on elements like the tabview. Other tutorials haven't provided this much detail and functionality in such simple terms. Thank you!!!!
Great tutorial!! Why don't define the var content as `@ViewBuilder var content: Content` and the we don't need to define the init, `public init(selection: Binding, @ViewBuilder content: () -> Content)`
Great solution to build a custom tab bar! 👏👏👏 However, I would point out that, although it apparently replicate the original behaviour, it doesn't do it in the correct way: using a ZStack with the .opacity() modifier to show the different tab contents, causes all the contents to appear all at once and never disappear/re-appear again when switching tab, which is what happen with the original TabView component. The only solution I found to replicate the original behaviour is to use a UITabBarController with the tabBar hidden, instead of a custom container. Anyway, I appreciated a lot this video! 🙂
Niccolo - does that mean that onAppear() doesn't get invoked when you switch to a tab? I really like what he's done w/the custom tab bar but I am highly dependent on onAppear...
@@nic_fontana Cool - I cloned your repo and I'm walking through it - at first glance it looks like you incorporated the onAppear feedback (et al) into your repo - which is awesome.
Yes, this is a very good video to start, but presenting the views with the .opacity() modifier causes any kind of unexpected behaviours when trying to use other views which are not simple colors. Do you have any workaround?
Hey Nick, nice content, only thing that comes to my mind and I wonder: The views (TabItem) that are rendered inside the custom tab bar are not loaded in a Lazy way, so if I had in each tabItem views with data inside that are loaded asynchronously by Rest-Api calls, these calls are made all at the same time, even if they are inside the TabItem in .onAppear
Love your tutorials 😍 I'm having some issues in @ViewBuilder can you please help I get this error whenever I use @ViewBuilder -> Struct 'ViewBuilder' cannot be used as an attribute and cannot build...
This taskbar should be in every utility library, congratulations!
Swiftful Thinking indeed. I just stumbled across your channel on my app development journey and your tutorials are showing me how to leverage extensions, conditionals, enums, and a lot of that other great Swift in a way that no one else has. I feel like it's really changing my approach to the language and this app that I'm working on. Really appreciate the work you're doing, not to mention that you're putting such comprehensive tutorials out for free for broke plebeians like myself.
Great moves, keep it up!
You're a one-in-million SwiftUI TH-camr. Step by step about Matched Geometry, ViewBuilder, Generics, PreferenceKey, and then come to Custom Tabbar. Anyone can understand when you do your tutorials in this strategy. Thanks, Nick. You deserve the "SwiftUI Angel" Trophy. 🏆❤🔥
KD the 🐐
Wow! Indeed, this was a very long tutorial but worth the time and your effort is really appreciated.
Honestly, I got lost a couple of times and had to rewatch your other videos and this one.
Thanks for making all these videos, I cant than k enough
Awesome. Your literally so clever, they way you design, and put stuff together so we understand is really well done. the second you typed ".home" after showing us how the Enum could replace a model was something else indeed!
😅 Thanks Daniel. I generally try to design these custom components as close to Apple's APIs as possible. This way they are more easily supported for future updates 😎
Amazing video-thanks for making this. I wanted to build a custom tab bar for a while but didn't know how.
One subtle/buggy thing: Around minute 44:06 (th-cam.com/video/FxW9Dxt896U/w-d-xo.htmlsi=sYKxr0zkNRMAto50&t=2646), you set up a ZStack with alignment bottom and put the content there and then the tabbar below it. This leads the content to render (intentionally) below the tab bar. However, if you're building a tab bar that looks similar to the typical iOS tab bar (i.e., not floating), then the content will still render below the tab bar even though that might no longer be the intention. I had fixed mine by:
- replacing the ZStack with a VStack (with spacing of 0)
- removing the ignoreSafeAreas() (to be noted: one can set this individually on each tab view so it makes it somewhat not needed)
- placing the content inside a ZStack (needed otherwise each view will render on top of each other)
- adding a frame(maxHeight: .infinity) to this ZStack
- and then finally putting my tab bar below that
I realize this was a problem not in your set up but more specific to how I wanted my tab bar to render, but I thought I might comment in case someone else runs into this. Otherwise again awesome video.
I have no words. I've been following the whole tutorial so far and I have to say that you were born for it.
You explain every topic very well, you have structured the training to make it easy and step by step.
You have helped me by giving me many ideas on how to do things!
I saw you have a something on Udemy and I'm going for it!
Big hug from the Basque Country and thank you very much for the tutorial!
Thank you so much Nick. Your videos are awesome. So progressive, comprehensive and very useable. I really appreciate the hard work of compiling all this knowledge into learning material. I followed you on several playlists since I started with Swift and SwiftUI and it starts to pay now. Thanks again.
Wow! This was absolutely amazing. Easy to follow and looks great! Subscribed and notifications turned on!
That is so nice compared to how I have seen other solutions! Lots to absorb but the pre-requisite videos got us somewhat ready for your final solution (Evil Nick!) Great stuff - keep these videos coming sir!
Haha I'm very glad you noticed that. We really needed to build up to this. I keep telling people don't watch the videos in order for a reason 😅
Thank you, Nick excellent tutorial; I enjoyed your teaching style; well done. I have learned so much from your classes. You explain Swift's concepts in laymen's terms. I look forward to learning more!
@ 13:07 "you said connect to a higher level selection" that part might be what is bringing about the confusion for me. where is the higher level "selection"? is it already built into swiftUi? I didn't see you create a @state var selection on any other page. I see the @state var selection: string on the Apptabbar page but I'm just not sure if that is the higher level selection you are referring to. nonetheless, when I do this and change it to a binding var, all hell breaks loose. the tabs don't get selected when I tap on them. really hoping you can help me out with this one
i loved this channel, just one thing about this custom tab bar... i dont know if anyone had the same issue, but when creating a testing environment i found out that the views are being initiated when calling them on the Tab Bar... and when you try to automate UI test.... the last view that is in the Tab Bar is the one that is going to be on front and view will take all the tap gestures that you simulate... also you can inspect that on the view hierarchy.
I found an issue with the content being larger than the screen size.
For example, a list that scrolls off screen fetched from an API. The ZStack in the container view doesn't seem to handle that case as the entire list is printed and then the tab bar sits at the bottom.
Great tutorial! just wondering if there's a way to auto-extend the page if there is a scrollview like how the official tabview does when it reaches the bottom of a page?
Thanks a lot, Nick. I would like to know your suggestion about using a custom tab or nav bar instead of using default one for my production app.
If you / you’re client is ok with the default tab tab’s design, I recommend using the default tab bar. The native components don’t require any maintenance. However, if you want a custom design (most clients do) then go with a custom one. I have a packaged implementation of this on my GitHub if you’re interested: github.com/SwiftfulThinking/SwiftfulUI/wiki/TabBar
excellent tutorial thank you. However, this setup will init all views together at launch, is there a way to init each view only upon tap on the view ?
Great video! Very explanatory and complete. Before realizing my error, I had built my TabView inside the NavigationView. Change the setup has been problematic. The only workaround was building a custom tab view.
Thank you, Nick - this is an amazing tutorial. May I ask you whether it is possible to add a scroll to the top feature if the tab icon of the selected view is tapped? Thank you in advance!
The bottom of the a list and scrollview are cut off by the tabbar how to compensate for this?
Are you basically rendering all the screens at the same time and setting the opacity 1.0 for the selected tab? Doesnt this leave the other views active? lets say there is a video playing in another view.. wouldn't it still be active, just opacity 0?
Yes, you can easily make it lazy by changing the behavior of that modifier if you prefer (example is I the repo on github). Otherwise, I recommend using the native tabbar
This is a really cool video. I like the clever use of preference key to generate the tabs dynamically.
Just one question, would this not load the content of all the views into memory at the same time? 🤔
Hey Nick, i'm really stuck where content is hidden by the CustomTabBar, i don't know which approach would be better to make the content scrolling below TabBar with respecting the spacing between TabBar and content. i used geometry reader but everything goes up after keyboard triggered. btw thanks a lot for your tutorials, i had started the bootcamp last year, it's been 439days now, i have a counter widget for my learning. thanks a lot.
Awesome video I learned a lot. I have a question... I have a NavigationLink and I want to dismiss it in the secondView, How can I dismiss it?
That's a great question ...maybe he'll come back to this comment and answer it for us!
Wow! very nice learning, I was looking for the same learning content to maintain or preserver the navigation with custom tabbar.
how hides the tabbar when need push a new view with navigation link ant shows when back to previous view?
Thank you so much for this helpful video! For the native TabView, the view does not redraw when you switch tabs, but it will redraw on your code, which will lost the previous state, such as scrolled position..etc. So do you happen to know how to not let the view redraw?
You can add a local @State within the view modifier of each tab to determine if the view appeared already
@@SwiftfulThinking
I know you have 2 kind of version of the viewBuilder on your repo, one is no redraw no onAppear, another one has redraw and onAppear... I think the the expected behavior for TabView should be no redraw but with on Appear, but adding the local @State on each tab will disable both redraw and onAppear, right?
When I was playing around your code, I found a really odd behavior, I thought those 2 code should behave the exactly same, but they are not, the 1st will redraw the view, but the 2ed will not, any idea why?
1.
if selection == tab {
content
.opacity(1.0)
.preference(key: TabBarItemsPreferenceKey.self, value: [tab])
} else {
content
.opacity(0.0)
.preference(key: TabBarItemsPreferenceKey.self, value: [tab])
}
2.
content
.opacity(selection == tab ? 1.0 : 0.0)
.preference(key: TabBarItemsPreferenceKey.self, value: [tab])
OnAppear is called when the view appears on the screen.. which is the same as when it draws on the screen. If you want to run a function every time the tab is clicked, just add a function onTabClick or similar
This is really neat, but doesn’t this limit you to a single tab ui per view hierarchy since the array of tabs are stored in a single global preference key?
Please how can control the appearance of this nav bar from the whole app ?
Hi Nick! Great tutorial! But what should we do with NavBars of views? I faced case where Navigation bar of first view is shown for all views. Thanks!
How to hide the tabbar on push similar to default tabbar + accessibility support?
Amazing tutorial, Nick!
A nice content, the only thing I wonder and I'm not able to understand, because when I'm going to create a TabBar following this tutorial, when you go to insert text in a TextField present in a View of a tabBarItem then opens the keyboard, the whole tabBar moves over, and is not covered by the keyboard as I normally expect to happen with a native tabbar.
Great catch Jonas. You should be able to make the TabBar ignore the Keyboard. Try adding ".ignoresSafeArea(.keyboard, edges: .bottom)" modifier onto the CustomTabBarContainerView! You might also need to add "ignoresSafeArea(.keyboard" in a few other places depending on your screens.
@@SwiftfulThinking Thanks, true your solution works, unfortunately though I have to look for another solution because .ignoresSafeArea(.keyboard, edges: .bottom) is available since iOS 14.0, and I'm working on iOS 13
If I understand this correctly, we set a page to "inactive" by setting its opacity to 0?
how does code know which content must show after selection the tab???? I know it is related to @viewBuilder but I don't know what happened
Have you watched this playlist in order? I’ve covered the topics previously.
Yes, Thank you for being the best tutor, your videos are only my hope these days , I solved my question, In TabBarItemViewModifier you change the opacity of other views and show them in Zstack, I am searching another way for switching views@@SwiftfulThinking
followed all this step but for some reason when I update the state var to a binding var section on the customTabBarView, the tabs don't change when tapped on. before the change from state to binding it does but now, it doesn't
selection
for some reason, after changing the state selection variable to a binding variable in the customTabBarView, the buttons don't get selected on taps. I've been trying to figure this out for 2 weeks now.
Hey Rasheed, hope you got this figured out already since this was posted 5 months ago.
If you're following the tutorial exactly, I think this is just an issue with the preview since we pass the .constant(tabs.first!) in as the bound "selection" parameter. The selection changing should work in a different, broader context where we have a variable rather than a constant.
Good luck!
I have a question regarding using ZStack in CustomTabBarContainerView... in that ZStack you put all tabbar item views (actuall screens that change opacity upon change of tab) does that mean it will imidiatelly load all views upon launch? Or it will be same behavior as with TabView where it loads content when you go to that screen? Great video btw!
Yes but you can easily modify the view modifiers to avoid this. There is an example in the repo in github.
Note: I still recommend using the native tabbar whenever possible
how to hide this tab bar when i push new view ?
I’d love to use a custom tab bar, but none of the solutions I’ve seen so far have all the features of the stock one: pop to root, ScrollView bottom inset handling (so you don’t have to add bottom padding to every view to avoid content getting behind the bar when you scroll all the way down), large content viewer with drag gesture for accessibility, lazy loading, VoiceOver support...
What a great lesson!....in fact this helped me out with the previous question I had a couple videos back. Thanks
Hey David! Glad to see you're still following along :)
How to resolve that issue
Great content Nick. How would you go about adding swipe to move between the content views in addition to tapping the CustomTabBarView?
Thanks George! You could use a drag gesture on the views and have it update the selected tab. I don't have a video on this specifically, but I have a video on Drag Gestures. There's also a PageTabViewStyle on the default tab view that has swipe gestures integrated.
Hi Nick, thanks for your amazing videos :)
I have a question: Imagine that, for instance the home tab view have a navigation and you are in a deeper level of that, how do you implement the function to go back to the root/main view just making a click once on the home tab bar button?
Also, how do you reset the navigation when you switch to every tab bar elements/views?
Thanks a lot in advance ^^
Hi Juan! Did you find a way how to implement it ?
Awesome Video...!!
Thanks a lot for the great content.
I followed all your videos and learned a lot from them.
I just have one doubt here. With the default tab bar, we have a behavior where onAppear is called when we actually open a particular tab but in this case as we are adding the views when view builds we will not have that behavior, and onAppear of each view will be called at once as we are just hiding the views based on the selection.
Do you have any workaround for it?
Malav! That's a great point, I should have checked that in the video. I think we can customize the ViewModifer to only draw the content when it's selected, which should trigger the .onAppear. Try this:
struct TabBarItemViewModiferWithOnAppear: ViewModifier {
let tab: TabBarItem
@Binding var selection: TabBarItem
@ViewBuilder func body(content: Content) -> some View {
if selection == tab {
content
.opacity(1)
.preference(key: TabBarItemsPreferenceKey.self, value: [tab])
} else {
Text("")
.opacity(0)
.preference(key: TabBarItemsPreferenceKey.self, value: [tab])
}
}
}
@@SwiftfulThinking Thanks for reply.
I was not aware that with opacity(0) will not call the onAppear of particular view.
@@malavsoni6814 no problem! It’s really the @ViewBuilder that does that magic here. Opacity of 0 is just to hide the Text 🙃
@@SwiftfulThinking I was going to switch to your custom bar but I need onAppear(), have you verified that your view modifier results in onAppear() being invoked? Thanks so much for these videos, I've looked all around at dozens of different youtube swiftui providers and you are clearly the best imo. Great work man, very thoughtful series.
I like this video, becasue you explain something that is professional, what is it? using original code pattern of the Apple code to developed and learn what we want to use
How to make a Custom Tab Bar without the original TabView with selection, but saving the state of a view? For example I am on the Home Tab, I have scrolled to the bottom, I switch now to Settings Tab and then back to Home. The scroll position should be at bottom now or better to say exactly on the position I left the Home Tab. How is it possible to do without TabView? You have any solution for that? Because really, all the Custom Tab Bars without the TabView as shell (but hiding it) are almost worthless, because you don’t have all the features! Okay, it’s not a problem to put it in the original TabView and hide it’s appearance, but sometimes there are use cases, where you want to avoid the original TabView, especially if you have to put the View where the Custom Tab Bars is as overlay in NavigationStack. And the TabView in a NavigationStack is a very bad idea. The solution would be only a 100% Custom, but but but…I have written about the problems.
same issue, the last position not persisting when switching tabs
believe me or not, the thing that you're looking for is happening on my app, i can go whatever view and still havving same words on the search or the state i left. btw i thought that wasn't should be like that, and now i'm wondering you're missing this thing here guys, but i think maybe embedding each page in NavStack might solve that.. i also have a problem of CustomTabView doesn't handle the padding of the content i mean the view to not stay hiding below the tabview i want it to appear above
Very good Nick... excellent. Thank you
Andrej!!! Happy to see you're still around 🙃
@@SwiftfulThinking keep working Nick... SwiftUi will always arises
One issue is there bro, it will load all the screens we gave in the tab bar, what about that memory managaement
The repo is on github and has an implementation to solve this. You can tweak the ViewModifier pretty easily
Maybe its possible to also avoid binding in the modifier and use EnvironmentKey to pass selection in the other direction? Great and very useful videos by the way 🙂
I implemented a solution with `EnvironmentKey` worked perfect, txs!!
not ios developer but this was so engaging tutorial. Don’t understand preference key much but i think i need to watch previous videos and subscribe 🙂 thank you!
Love to hear this! Thanks for the sub. I have a video on Preference Key here: studio.th-cam.com/users/videoOnbBc00lqWU/edit
This was really clear and helpful, thank you!
I’m following the beginner SwiftUI course. Sir someone said that SwiftUI is easy as compare to storyboard but do not SwiftUI has some disadvantages which he told that most of the complex problems can’t be solved with SwiftUI. Sir Is it true?
Hi Jemmy, well it depends who you ask but I would say storyboard has many more disadvantages than SwiftUI. I don't think Apple would have released and started using SwiftUI in all of their apps if they didn't think it has some big benefits for the future of iOS development :)
@@SwiftfulThinkingThank you Sir! Lemme continue on your Beginner Bootcamp. It’s really interesting. I love the way you teach.
Stay healthy and blessed!
Thanks a lot nick , you are perfect in explanation
45:27 matchedGeometryEffect
I love this guy! thank you!
Thank you very much for the video 🙏, pls do more and more....
Again another awesome video, but one question, can you not just pass ".red" ".green" and ".blue" to the color param? Swift infers types.
Yes, if the compiler KNOWS that is 100% will be a Color, then you can pass .red. But if it can be Color OR other types, you need to explicitly state Color.red
@@SwiftfulThinking Sure, but in this case, your parameter is explicitly a Color, correct? if so, .red would work for your TabBarItem model (I guess I should have been more explicit about what _I_ was referring to heh)
Great video! Thank you!
Thanks for watching abdou!!
next level, amazing
Absolutely amazing tutorial. I'm new to SwiftUI (experienced programmer though) and hated the lack of customizability on elements like the tabview. Other tutorials haven't provided this much detail and functionality in such simple terms. Thank you!!!!
You’re welcome 😁 thanks for the comment
How to hide TabBar when Child Page is Open?
Can you share the link to the source code?
github.com/swiftfulthinking
This is awesome!!!. Thank you so much!!!
Great... thats what i am looking for custom tabbar. Other custom tabbar videos not cover the that part.
great content but it reload view every time on tab changes
Thank you! very useful tutorials!☺
Thanks Steve!!
@@SwiftfulThinking In fact I almost can't catch up with you now hahahaha🤣
Amazing Content!
Thanks Omeir!
great content. Thanks
Thanks shashwat!
source code please?
Great tutorial!!
Why don't define the var content as `@ViewBuilder var content: Content` and the we don't need to define the init, `public init(selection: Binding, @ViewBuilder content: () -> Content)`
Great solution to build a custom tab bar! 👏👏👏
However, I would point out that, although it apparently replicate the original behaviour, it doesn't do it in the correct way: using a ZStack with the .opacity() modifier to show the different tab contents, causes all the contents to appear all at once and never disappear/re-appear again when switching tab, which is what happen with the original TabView component.
The only solution I found to replicate the original behaviour is to use a UITabBarController with the tabBar hidden, instead of a custom container.
Anyway, I appreciated a lot this video! 🙂
Niccolo - does that mean that onAppear() doesn't get invoked when you switch to a tab? I really like what he's done w/the custom tab bar but I am highly dependent on onAppear...
@@ShaneClaussen Exactly. If you need the onAppear/onDisappear behaviour to works as expected, you must use the UITabBarController
@@nic_fontana Cool - I cloned your repo and I'm walking through it - at first glance it looks like you incorporated the onAppear feedback (et al) into your repo - which is awesome.
@@ShaneClaussen what repo are you talking about? :)
Yes, this is a very good video to start, but presenting the views with the .opacity() modifier causes any kind of unexpected behaviours when trying to use other views which are not simple colors. Do you have any workaround?
Thank You nick
You're smart )
Hey Nick, nice content, only thing that comes to my mind and I wonder: The views (TabItem) that are rendered inside the custom tab bar are not loaded in a Lazy way, so if I had in each tabItem views with data inside that are loaded asynchronously by Rest-Api calls, these calls are made all at the same time, even if they are inside the TabItem in .onAppear
There’s updated code on my GitHub that supports this with lazy loading (github.com/SwiftfulThinking/SwiftfulUI/wiki/TabBar)
...hello I'm back!
Love your tutorials 😍 I'm having some issues in @ViewBuilder can you please help I get this error whenever I use @ViewBuilder -> Struct 'ViewBuilder' cannot be used as an attribute and cannot build...