hello and welcome to another swift and xcode tutorial my name's cal and in today's tutorial
we're going to be looking at how to create a tab bar for navigation in your ios app tab bars are
very common component and they're used throughout a lot of ios applications and therefore most users
already are pretty familiar with how to use them and to navigate your app the actual tab bar itself
is quite easy to implement it should only take us a couple of minutes to get one up and running with
just all the default settings in the second part of the tutorial we're just going to do
a little bit of styling so we're going to change the color and the tint and all that sort of thing
and then in the next part of the tutorial we will have a look at changing the default selected tab
item to be rather than just being the left one all the time we might want it to be the middle one
or the right one or so on and so forth and then finally we're going to have a look at
some tab bar badges so we're going to use a notification sort of style thing as an example
creating a new xcode project this is an ios app that we're building i'm just naming it tab bar
app tutorial our interface is storyboard and our programming language is swift first thing we're
doing is heading into main storyboard i'm going to drag in a tab bar controller and you can see
that's already given us two view controllers as well as our one that we already had by default
and i'm just going to drag over this arrow which is our storyboard entry point so that needs to be
pointing at our tab bar controller so the tab bar controller comes with two view controllers already
correctly linked and all we need to do to link our third one is just right click and drag from our
tab bar controller onto our new view controller selecting relationship segue view controllers
and now you can see that we've got that same little arrow thing and all three are linked
correctly currently all our tab bar items just say item and have that square image to modify this you
just want to select the tab bar item and then there's a few different system items i'm just
selecting history for this bottom one i'm just doing the same thing i'm selecting the tab bar
item and then i'm just going to choose a system item to create a custom item it's as simple as
changing the title here as well as selecting an image i'm going to choose this house fill image
next i'm going to change the background color of each of our view controllers just so that when
we're scrolling through the tab bar we can see that it's actually going to a new view controller
and then yeah that's as simple as that if we build and run this you've got a working tab bar
controller with all the default settings you can scroll through and it's taking you to the new view
controller next we're going to have a look at how we can customize the tab bar controller to have
some different colors as well as some different styles and that sort of thing so back in our main
view controller we just want to select our tab bar which is not our tab bar controller but the actual
tab bar and we're just going to change the id position to centered so you can see the difference
there all of the buttons have just sort of pushed in a little bit you could also change the style
to this black or dark theme but i'm going to change the bar tint color i'm going to choose
this dark gray color as well as you can toggle the translucency the next thing i'm going to modify is
this image tint which is actually essentially the bar tin so i'm going to select this yellow color
but really it doesn't matter what color you choose i'm just choosing this color as an example i don't
know if it's necessarily a good design let's have a quick look yep we can see that all the colors
and styles have come through on our tab bar so that's looking good next you can see that i've
actually made home the middle one and maybe to make a bit more sense if that was the default view
controller is our home the one in the middle so to do that i'm just going to create a new swift file
i'm going to call it custom tab bar controller i'm just going to delete everything that's inside
it i'm going to import the ui kit next we're going to define a class calling it custom tab bar
controller which is of type ui tab bar controller if you're just starting out swift programming
and you haven't had too much experience with inheritance basically all we're doing here is
saying our custom tab bar controller is a child of ui tab bar controller so everything that's
inside ui tab bar controller our custom tab bar controller is going to have plus whatever we add
in cool next we're going to add in an inspectable variable so i'm just saying ibinspectable variable
initial index is of type integer and it's equal to zero and then we're going to override the view did
load function as well as calling super view did load and then simply just say selected index is
equal to initial index cool and if we save that now and head back into our main storyboard we're
going to select our tab bar controller and give it our class of our custom tab bar controller now if
we head into the attributes inspector we can see that we've now got this initial index field that
we can populate and i'm just going to set that to 1 which is as we know in computer programming is
actually the second item so you can see now our home is now our default selected tab bar item
and we can also set that to 2 and you can see that the default selected tab bar item is now searched
we're going to have a look at some tab bar badges so i'm just going to set the initial index back
to 1 as well i'm going to change our tab bar item to downloads and then inside our view controller
i'm going to just do a little bit of tidying up because i'm going to copy and paste this file
into our other view controllers so then i'm going to create a couple of view controls i'm calling
this one downloads vc and then i'm going to modify this one to be home vc and then i'm going
to create one more swift file and we're going to call this one search now i'm just going to hit
command a copying the initializing code for review controller into all three of our view controller
swift files finally modifying the class names to match that of the swift files now heading back
into our main storyboard i'm just going to select on each of our view controllers and giving it the
appropriate class corresponding to our swift file next in our home i'm just going to drag
in a button i'm going to change our buttons text to new download and i'm going to change the font
make it a little bit bigger as well as bold next we're going to give it some constraints so just
top space to the area and center horizontally in the safe area not really important what the
constraints are i just want to have a button that we can click on next i'm going to open the
assistant editor i'm going to right click and drag from our button below our view did load
and just create an action calling it new download action next in our downloads i'm going to click on
our tab bar item and i'm going to create an outlet for this and i'm just naming it downloads tab item
next in our home vc in our new download action i'm going to declare our tab bar just saying
let tab bar equal to self tab bar controller tab bar and then we're going to say let download item
equal to tab bar items at the index of zero so our first tab bar item which we know is our downloads
then we're going to say download item badge color is equal to ui color red as well as download item
badge value is equal to one so obviously you can make that whatever you like but just for
this example i'm just putting in one and then inside our downloads vc swift file we're going
to override our view did appear function so just started typing view did appear and then hit enter
we're going to say downloads tab item badge value is equal to nil cool and if we build and run this
project one last time you can see we can hit on new download and it adds that little notification
above our downloads and then when we select on downloads the notification is taken away so
there you have it a few different customizations of a tab bar and how to use tab bar controllers
hopefully now after completing this tutorial you have a better understanding of how to use
tab bar controllers in swift and xcode i hope you learned something and i'll catch you in the next
tutorial you