Headline will come back again in business and I'm going to show you how to use a tab bar controller.
Now with the tab bar controller it is essentially a bunch of buttons at the bottom of your screen that
topping on any of them.
He's going to navigate through to a different view controller.
You see that on a lot of apps such as WhatsApp or Twitter or similar ones.
So let's go ahead to score and get us started with this next school.
I'm going to start a new application and unlike almost every time up until this point that I have is
thought to be the single of you application I'm actually going to start with a tablet application.
Of course this isn't the only way to make it but let's use the template for now and then I'm going to
show you how to make it within a single view application as well.
Like I said earlier on maybe 10 sections ago all of these things in here are merely just templates of
doing things.
None of them is actually a different kind of application or a different type of a structure.
They're just templates of things that are prepared for you.
So let's go ahead and study the tablet application and I'm going to say tab the app tab the application
by default has a storyboard that the Islamic world is pointing to to view controllers.
True a tab bar controller and the very first thing I want to show you in here is how we could add any
other view controllers in here before that door.
Let me run the application and you could do the same thing on your computer just to get a sense of what
a tab part essentially is and how it works.
As you can see now at the bottom of my screen I have two tabs for a top on one of them.
They just go from one view controller entirely to the other one.
This is the first view controller.
This is the next one.
Now let's talk about these say grace and how they are designed.
What could I do if I wanted to add one.
So let's go in here and say I have a new view controller this new view controller I'm going to say it
has a green background so it's more distinct and I want to add it as one of the view controllers for
my top of the bar.
So let's go ahead and yet I'm going to zoom into it and I'm going to control right from my top bar controller
and say it is one of the view controllers if you remember in a navigation controller then you were dragging
from your navigation controller to a view controller that would become the route to view controller.
Here it becomes one of the many view controllers of the view controllers array.
So here is that.
And now I have my new view controller also connected to my top controller and it is now showing up in
here as that item and the item is coming from here from the fact pad now between my green view controller
there is a little bar at the bottom and that is actually showing us the title being item for instance
I could use that or I could essentially go in here and say let's use one of the system items let's say
I want to have a favorites and now that one turns into favorites and then obviously it reflects in here
and tapping on any of these buttons essentially loads that view controller for now the first and the
second that there is a default view controllers.
They also have a view controller class first and second I don't have that for my green but you can imagine
that you can just added there and then everything is business as normal usually whatever you were doing
with you know adding buttons or functions or anything that you could do in a view controller you could
do it there as well.
Let's see that again for a second So now once it's loaded on my simulator I could go on the first quarter
the second or go to the favorite which takes me to the green view controller.
Now while this might be useful I also want to show you how to add this tab bar the bar of it not the
controller to any view controller essentially.
So let's go ahead and start a new application this new application is going to be of the type single
view application and yet I'm going to go ahead and say tab bar in single view up so once it loads up
I'm going to head to my storyboard and the storyboard I'm going to go ahead and say I actually have
a tab bar down there.
So I'm going to add a top point here and since I'm doing this for iPhone access let's go ahead and do
the design on iPhone access as well.
And in here I'm going to go ahead and set this place up there OK.
And then the next thing I'm going to do is I'm going to say let's have two buttons on it just like what
we have in our favorites and more and I'm going to have to add this as an outlet to my view controller.
I'm going to come in here and say
let's at this I'm going to call it my tab bar and that's all I have to do in my a storyboard.
I'm going to come back to a story I want after we simulate the application because I want to show you
their constraints for a top bar.
But for now that's all I have to do.
I'm going to head back to my programming side.
So now here we have our top or and we went at a function to this top bar and it is not going to be based
on the event that the value changed simply because tab bar is they have a delegate for that.
So because of that I'm going to go ahead and say at the delegate protocol you I type or delegate that
format everything nice and tidy and since I'm using the delegate I should remember to add the delegate
to here.
So in my view did Lord I'm going to see my top box DOD delegate to self.
This is of course something you can also do it in your storyboard.
No they have that.
I could actually use the tab for delegates methods.
One of those methods the one that is useful for me is this.
Let me reformat things to get myself a little bit more space is called did select and what it does is
this it tells me when the tab bar gets selected and based on the item that we selected we could decide
to do different things.
For now I'm just going to save print tab bar changed so I know that it's actually working.
Let me format this things once again and then we'll run the application.
Now if it all works First we should be able to see the two buttons in our toolbar and tapping on any
of them should essentially print that sentence tab bar changed tab bar changed.
Now the important thing that I want to get to is knowing Veatch by then is the one that we actually
tapped on which IDM is the one that we tapped on and to do that and let's go back to my storyboard and
I'm going to select my two items and give each of them a tag.
So I'm going to go ahead and say favorite is tag zero and more is tagged one and having the tags is
a little bit better than having the titles because the titles might be driven from some other resource.
So for this kind of thing is that if you stick with the tags as opposed to titles because in view controller
I could say this I could say if I them not tag it as you can't see there's wars tag and the title but
title is not the best idea in here.
So I'm going to say if tag is zero.
This is the favorite one.
So I'm going to say Prince Prince saying 5.
And also say self DOD view DOD Magna Carter becomes you eye color dart red.
And in the URL someone say in the ads to the other things Prince.
Now there's two which is more and make the background color green.
And now if I run the application I should be able to see most of these working on the same type or are
successfully
taught when I tap on the first one it becomes red.
Prints five and I top the other one becomes green and prints more.
And based on that you can't simply decide the bar.
I know what you want to do you probably want to navigate this view into a different you know view.
You want to make a Segway.
You are Lord in your view controller as a sub view or any other decision that you might make on that
basis.
So finally the last thing I want to show you is if you go to a storyboard or top what is now at the
bottom of the screen and it is showing in the right place simply because we are designing an iPhone
access and we are also simulating an iPhone access but that's not always the case.
So if you have to use auto layout and set the constraints so I'm going to go in here and say my top
bar against my view has a leading a space of zero has a trading a space of zero as van and then I'm
going to go ahead and say it has a bottom a spacing to the super view and that button is facing is also
zero.
So now I select my by them and it says my top are against safe area is 34 that is not something I want.
Well they do want to make it is like this.
I want to make it based on the super view and based on the super view I want it to be zero.
So the bottom of it is always stuck to the bottom of the screen.
And as you can see top was kind of designed in a small today.
So it's actually increasing its own height but maintaining the buttons in the right place.
So it covers the bottom of the screen has this little extra empty area which essentially is going to
be very is untouched but it is not the safe area.
So if we run the application now we should be able to see it working properly on our iPhone 10.
In this case or access which is doing that.
And if I go ahead and run it on a different simulator it would do the same thing as when we also saw
for use that to default by then is that they came without a tab bar.
But if you go to a storyboard you could simply go ahead and say between my tab what I want to have more
buttons that is going to be in here a tab bar by then item which is this one for instance drag it in
here and then this one could go ahead and say it has a system.
Items such as a feature one and then sexually about the color list choose a contact for instance.
And then based on that they could either take for you to say two now favorite is zero contact is two
and more is one if I come back to my view controller once again in year I could choose the tags to decide
about what they want to happen then that by then is being selected and that's just simply adding more
bar by then items into your top us.
So that's a brief introduction on how to use tab bars in both a tab application as well as using them
between a single view application using the delegate method and let's move on to our next lesson where
we use the tap bars vit navigation controllers.
So I'll see you there.