SwiftUI How to create Custom Tab View with Tab Bar

hey hello what's up everybody uh welcome back to the best swift ui channel on youtube.com i hope you guys are doing well and hopefully everyone has had a pretty decent start to their year of 2021 lately i've been writing a lot of swift ui code so today i was thinking maybe i'll teach you guys how to do something very simple and very easy using the swift ui and so the question is what exactly are we going to learn to build in today's lesson right well on the left side of the screen right here uh you can see this application right i want to show you guys how to build out a custom tab bar that's at the very bottom of our application here and if you guys have been working with swift ui for quite some time you'll notice that you can't really build out a custom tab bar using the native swift ui toolset so today's video i'll show you guys exactly how to do this and the nice thing about having a custom kind of a toolbar at the very bottom this tab bar is that you can pretty much do whatever you want so you know i've been working on an instagram style course for you guys and the thing that i really need it is a center button that allows me to present a full screen model that looks like this right and you know click on a photo and that modal will be dismissed so i'll show you guys exactly how to do this in today's lesson inside of these views you can pretty much add anything that you want uh this is just a standard navigation view and if you click on the right couple of tabs you'll get you know pretty self-explanatory action all right so this is what we will hopefully build out for today's lesson and uh you know without further ado let's get started with our xcode tutorial right now alright guys before we begin today's coding lesson i just wanted to let you know that we have a brand new swift ui course available link in the description below inside of this course i'm going to show you how to master the art of swift ui to build out this application that you're seeing on the left and right side simulator and so let me just show you a couple of screens inside of our application here left side is light mode and right side is dark mode so here you can see it light looks like that and here we have the dark mode looking like so we have a map below as well and instead of these restaurants we have a bunch of different screens here's a grid we can launch a full screen modal and swipe through like so and if you guys are interested in learning how to build out such an application like this please go ahead and check it out using the link in the description below alright so without further ado let's jump back into our coding lesson right now alrighty everybody welcome back to the coding session for today's video here uh hopefully you guys can see what's on my screen basically i have a brand new xcode project created which is right over here currently i'm using xcode 12.3 which is relatively new and should be pretty similar to what you're using right now the first thing i'm going to do is i'm going to close out of the left panel and i'm basically just going to work on content view here my preview is already up and running on the right side and basically i'm going to transform this view into this in the right side simulator so again the thing i want to focus on mostly here is the custom nav bar that i have all the way at the very bottom there so the first thing i'm going to do is to kind of show you guys uh what a regular native toolbar looks like or a tab bar inside of switch ui so the first thing i'm going to do is i'm going to replace this with a tab view and instead of a tab view you can declare things like first right here and down over here you can say uh tab item and inside of this item label thing you can just create something so uh just create a text inside of your tab item and on the right side you can see you're first showing up at the very bottom here some of you guys might be asking why the toolbar or tab bar is appearing in this yellow color but there's a bug in xcode 12.3 where i don't know why but the nav bar and the tab bar is just coming out as yellow so to fix that you can just use tab bar appearance and use bar tint color equals dot maybe system background or white whatever you want should be okay so i'll set it to system background and uh it'll kind of fix that yellow color all right so this is pretty much what i have so far i'm going to use uh the image of system name and as you can see the tab bar is filling up with this stuff over here and you know you can continue this a few more times so i'll just copy and paste and you'll see this guy showing up in the second slot on the right side and let me just change this right here and maybe use a gear icon all right so here's my second tab and here is my first tab and again i think i mentioned this earlier but when you're using the native tab view like what we're doing right now you can't build out this you know custom behavior that you want and again the most important thing is to kind of control what happens when you click on this plus button so the question now is how exactly do we replicate this behavior down here right well i'm going to wipe out this code here so i'm just going to cut that and if you guys want to see this you guys can download this source code later but inside of the body right now i'm going to create a z-stack so the idea is i'm going to replicate the tab view behavior using this z-stack component here and so what i'm going to do is i'm going to go ahead and create a state variable and this is going to help me control what's currently on the screen so this state variable is going to be selected index and i'll kind of default it to zero and you'll see why in just a moment i'm going to do this here i'm going to use a switch and let's see switch on the selected index like so and if the selected index is zero i'm going to do this right here so there's my first tab and then for the remaining options i'm just going to use default so let me just do this right here or near remaining tabs and this looks pretty good i'm going to hit resume now on the right side and you'll see nothing has really changed i have first here but you know the nice thing is that i can go ahead and modify selected index to be 1 now you guys can probably guess what's going to happen and now my z stack is going to show the default down here okay so that's pretty good and now that we have you know this mechanism to control what's on the screen here next thing i'm going to move down to is the at the bottom tab bar here so how do we create a custom horizontal looking tab bar well you can just use a h stack so h stack here and text and you know first tab button and here we go so you can kind of see it's overlapping over the content in your z-stack here and that's not exactly what you want so what i'm going to do is i'm going to align everything in a v stack so i'm going to create a v stack up here i'm going to take this right here and put that over here and then i'll take my z stack and put it above my h stack like so and then in between all these items i'm going to use a spacer so as you can see all of the empty space in the middle here is now being taken over by the spacer there uh hopefully that's pretty self-explanatory i'm going to go ahead and modify selected index to be zero and everything should be kind of okay looking so here's my first if you guys want to modify this to be a navigation view and create something that looks a little bit nicer you guys can do this here so i'm going to say navigation title and the first tab and here we go so this looks a little bit better and the next thing we are going to do now is we are going to start you know implementing the custom tab bar down at the very bottom and the way i'm going to do this is to just simply use a for each loop so how do i want to do this i'm going to say for each right here and i'm going to use a range of let's just say zero to five and let's say num is right here uh hopefully i can type this stuff out correctly i'm going to put this over here all right so here is what i get and i think i want to move that up here and this looks okay so ctrl i to get the spacing correct and now you'll see that i have roughly five buttons at the very bottom uh instead of using this text right there right i'm going to go ahead and use the image of system name and i think person.fill that's what i'll use for now i'll wipe out the first tab button and you now see that i have five of these people icons below last thing i'll do is i'm going to use a spacer here and a spacer there and that's just going to kind of space things out equally between all of the items like that all right so so far i think we've gotten pretty far uh next thing i will do is you know maybe i'll give this a font uh systems size and what do i want to use here uh weight and bold okay uh the code looks fine things are showing up on the right side okay so as you can see all of these icons right here in the finished version of the app right it looks a little bit different because the icons are actually coming from different string names for this guy here so uh off screen i'm going to copy in uh this string so tab bar image names person gear plus app fill and so on and so forth all these icons they actually come from sf symbols and i'll open up real quick right here so here is sf symbols you can search for all these icons so plus app fill you can click on that and plus app does that come up so somewhere down here you shouldn't get plus app fill so maybe one of these guys down here or this guy or you know further down below you'll eventually find something that looks like what you need all right so you can download this on the apple website just google it and you should find it okay so going back here tab our image names instead of using the hard-coded value of person.fill right just say tab bar image names and use the index of num like that okay i think uh things are looking pretty good with what we have now okay so let's the last thing we have to do is whenever we tap on these h stack buttons down here right we want to change what's inside of our z stack right here and for example if we're you know index zero we see the first one and then you know maybe index of one we see this remaining tabs instead so the way i'm going to do that is i'm going to head down to my for each loop here right and i'm going to use a button with an action next thing i'm going to grab this and replace the button down here you see all of my buttons are appearing blue you don't exactly want to do that so either use the foreground color of black i think we can do that or use the foreground color of label so this might be better so just use label like that it should be okay all right uh once you have that you can now click on your icons right and obviously nothing's happening with your tab bar or the actual tab view right here just yet thing that you have to do and some of you guys might be able to guess is whenever you tap on these buttons just go ahead and change the selected index like that and change it to the value of num uh so this guy will be zero there's gotta be one this guy will be two three and four uh you guys can see this a little bit better if you use case one and just say uh a scroll view right here and text like that so texas test and i'm going to click on one you'll see a test right here i click on that and now you see remaining tabs so test and back to the first tab like that okay so pretty much we are there with the actual behavior of our custom tab view a couple of things that we are missing however is you see how we have the highlighted state for all these buttons right here we also have a red button with a plus in the middle so how do we do all of that right well the thing i'm going to first add is the highlighted state for these buttons below the way i'm going to do that is to modify the foreground color and i just type out the code this is pretty self-explanatory if the selected index is the number that we are using from zero to five up here then we'll use the color of black or the label and this might be easier to understand i'll use the color of black right here and i'll simply use the gray otherwise you can see things are appearing darker if we are selected in the index instead of using gray maybe i'll use the color of white like that and let's just use the value of 0.8 it's a lot more faded out giving you a better appearance like that all right so so far so good last thing that you might want to add here is you see how we have this red button right here right every time you click into it it's going to present a modal fully to the top of the screen and how do you want to do that well first thing you might want to figure out here is you want to change the plus button here to be kind of a special button and it's going to be a red button that's much larger compared to the rest of these icons right here and the way i'm going to actually do that is i'm going to go inside of my for each loop right and if i just check if the number is equal the third slot which is 0 1 and two right here so this is the third slot indicated by uh the index of two i'm going to do this here so i'll just copy that paste that here and else that and just do this right here you know there's probably a much better way of doing this but for today's video copying and pasting is the easiest thing to do so i'll just do that all right so with this right here instead of using the foreground color of all this you know logic i'm going to use the foreground color of red you'll see it appear red like that so that's pretty good if you want to increase the size you can change it to 44 or you know whatever size you want for your application next thing i will do is you know whenever you click on the plus button you want to present a full screen model and how do we do that in swift ui 2.0 well inside of switch ui right you can actually use a kind of a full screen cover this might be a little confusing but i will show you how to do that somewhere here so i'm going to i go to my z stack right here and just use a spacer and i'll use a full screen cover like that so what exactly is a full screen cover well you see the placeholder showing right here because of this content so a full screen so full screen cover like that so here's my full screen cover it's being presented because the actual uh bindable right here is a true value and we have our full screen coverage so if it's space right here you'll see it kind of show up because this true value so in order for us to click on this guy and then show a modal all we have to do is to create a state variable for the is presented bindable here this is very easy just go somewhere up above and say private var and you know maybe should show modal equals to false like that uh you can paste that in here it's not going to work because you actually need the bindable version of that variable which is the dollar sign okay if you guys don't understand what bindables are just use the dollar sign you should be okay all right next up we are going to hit the resume uh once it resumes you can see if i click on that we see your remaining tabs like so and some of you guys can guess how to get this effect here the easiest way of doing that is to simply go inside of the action for your buttons right if i am the see if the number is equal the third slot which again is two i am going to say should show modal and either set it to true or just toggle and return like that okay i think most of the code should work hit the plus and you see the full screen cover like that all right uh for the most part this is the behavior that i need for my app if you want to dismiss this modal you can simply do this right here so full screen cover just say button and action and then do that that i'll replace that over here and you know just do this and say should show modal dot toggle that's going to reverse the boolean back to a false like that i click on that we can dismiss that click on that and yeah for the most part things are looking quite nice okay uh i think that's mostly what i want to do there are a couple of things that you have to watch out for in terms of this kind of tab behavior that we built out so first thing i will kind of add to show a couple of bugs is i'm going to go to this navigation view here which is our first tab i'm going to replace all this with a scroll view just to show a quick bug uh you know this way you guys can use this code and you know not break in your applications i'm going to go ahead and say for each and zero and let's use the value of 100 uh num invert here text and let's say like that and so hopefully my computer is still working you guys can see that if i drag this up and down this guy is appearing yellow again you might want to do this i'm going to copy that and replace this with ui navigation bar and that should get this top thing to be white okay so that looks good and pretty much what i expect all right again things are looking nice and the reason why i'm showing you this is because you see at the very bottom right i actually want to add something i want to add this divider line which creates a separation between the content and the tab bar the way i'm going to do that is i'm going to go right above the h stack of buttons and just add a divider the moment that i do that you'll see the line appear like so and here is the first bug that i want to talk about so you see there's a small gap right here beneath the 36 and you see the line kind of under it right and the reason why that gap appears is because of the v stack so the v stack by default is going to have some space between each of the elements and the way i'm going to fix that is to specify the spacing of zero and the moment that you do that you should have something that shows up correctly so i'm going to stop and play again and hopefully that will fix the problem that i have right now so that looks okay i think i'm going to remove this spacer and the moment that i do that you'll see that the spacing between the divider that goes away kind of like that if you want to add some let's see padding bottom of i don't know 12 and that should give some spacing for the actual tab bar buttons right here all right the next thing that you'll find out is if you click on let's bring this down to maybe eight that looks a little better if you click on this tab right here right here it gets a little bit funky because um just by default if you have this kind of remaining tabs being represented by just this text component here this doesn't actually take up any vertical space inside of this uh this overall z stack here so the problem is you really want to put some things inside of your content view down here um you know the easiest way is to just use a scroll view or use a navigation view like so either way it's going to work i believe this is going to look like that so uh all your content appears right in the middle because navigation views by default will take up the entire span of the actual screen space okay i think now our application is finished uh if you guys want to uh you know maybe look at how this view is built on the right side i'll include the source code for this project down below in the description uh this component is actually just the image picker controller i think i'm using the swift ui x the kind of the library for swift ui doesn't make things a little bit easier but yeah hopefully you guys were able to learn a few things from today's video if you guys have any questions or thoughts about any of the content uh you know make sure to leave a question down below if you guys have any ideas for what you want to see in the next video make sure to let me know as well uh that's going to be it for today's video you know hit the like subscribe and all that good stuff i'll see you guys next time maybe uh sooner than you know a couple of months in between videos and that's it bye

Channel: Lets Build That App

Views: 25,142

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code

Id: 9lVLFlyaiq4

Length: 24min 39sec (1479 seconds)

Published: Fri Jan 08 2021