Create a custom tab bar in SwiftUI | Advanced Learning #11
HTML-код
- Опубликовано: 13 окт 2024
- As you probably know, the default TabView in SwiftUI is not very customizable. In this video, we will learn how to build a totally custom TabBar (and TabView) in SwiftUI. We will look at the documentation and try to mimic Apple's API of the TabView as much as possible, so that ours is just as easy to use!
I haven't created many custom SwiftUI components in my bootcamp playlists because I firmly believe anyone learning to code should spend their time focusing on reusable material - things that you will use in every applications. Too many SwiftUI courses focus on building "cool UI" and don't focus enough on the core fundamentals of building apps. However, the TabBar deserves an exception because so many apps that you'll build will have some version of a TabView.
I highly recommend watching my previous 3 videos in this series before watching this one, because we will use what we've learned in those:
How to use PreferenceKeys: • Video
How to use ViewBuilder: • How to use @ViewBuilde...
How to use Generics: • How to use Generics in...
🤙 WELCOME BACK 🤙
WEBSITE: www.swiftful-t...
DISCORD: / discord
GITHUB: github.com/Swi...
SAY THANKS: www.buymeacoff...
This taskbar should be in every utility library, congratulations!
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
You're a one-in-million SwiftUI RUclipsr. 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 🐐
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!
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 (ruclips.net/video/FxW9Dxt896U/видео.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.
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? 🤔
Wow! This was absolutely amazing. Easy to follow and looks great! Subscribed and notifications turned on!
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...
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
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 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!
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?
Wow! very nice learning, I was looking for the same learning content to maintain or preserver the navigation with custom tabbar.
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?
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 - 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!
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!!
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
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.
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 :)
Very good Nick... excellent. Thank you
Andrej!!! Happy to see you're still around 🙃
@@SwiftfulThinking keep working Nick... SwiftUi will always arises
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.
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 ?
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.
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.
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!
I love this guy! thank you!
Amazing tutorial, Nick!
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
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
Thank you very much for the video 🙏, pls do more and more....
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!
Thanks a lot nick , you are perfect in explanation
This was really clear and helpful, thank you!
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 ?
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.ruclips.net/user/videoOnbBc00lqWU/edit
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
Great... thats what i am looking for custom tabbar. Other custom tabbar videos not cover the that part.
@ 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
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
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)
How to hide the tabbar on push similar to default tabbar + accessibility support?
The bottom of the a list and scrollview are cut off by the tabbar how to compensate for this?
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!
Great video! Thank you!
Thanks for watching abdou!!
If I understand this correctly, we set a page to "inactive" by setting its opacity to 0?
Please how can control the appearance of this nav bar from the whole app ?
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)
next level, amazing
Thank You nick
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)`
Thank you! very useful tutorials!☺
Thanks Steve!!
@@SwiftfulThinking In fact I almost can't catch up with you now hahahaha🤣
how hides the tabbar when need push a new view with navigation link ant shows when back to previous view?
This is awesome!!!. Thank you so much!!!
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
great content. Thanks
Thanks shashwat!
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
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!
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
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?
Amazing Content!
Thanks Omeir!
great content but it reload view every time on tab changes
how to hide this tab bar when i push new view ?
45:27 matchedGeometryEffect
How to hide TabBar when Child Page is Open?
You're smart )
Can you share the link to the source code?
github.com/swiftfulthinking
...hello I'm back!
source code please?
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...
.ignoresSafeArea(.keyboard)
For anyone having issues with the tabbar being pushed up when the keyboard is displayed.