1
00:00:00,260 --> 00:00:06,400
Headline will come back again in business and I'm going to show you how to use a tab bar controller.

2
00:00:06,420 --> 00:00:12,040
Now with the tab bar controller it is essentially a bunch of buttons at the bottom of your screen that

3
00:00:12,090 --> 00:00:13,410
topping on any of them.

4
00:00:13,410 --> 00:00:16,730
He's going to navigate through to a different view controller.

5
00:00:16,770 --> 00:00:22,020
You see that on a lot of apps such as WhatsApp or Twitter or similar ones.

6
00:00:22,020 --> 00:00:25,180
So let's go ahead to score and get us started with this next school.

7
00:00:25,200 --> 00:00:31,040
I'm going to start a new application and unlike almost every time up until this point that I have is

8
00:00:31,040 --> 00:00:36,170
thought to be the single of you application I'm actually going to start with a tablet application.

9
00:00:36,270 --> 00:00:41,730
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

10
00:00:41,730 --> 00:00:45,850
show you how to make it within a single view application as well.

11
00:00:45,870 --> 00:00:53,520
Like I said earlier on maybe 10 sections ago all of these things in here are merely just templates of

12
00:00:53,520 --> 00:00:54,240
doing things.

13
00:00:54,240 --> 00:00:59,610
None of them is actually a different kind of application or a different type of a structure.

14
00:00:59,640 --> 00:01:03,180
They're just templates of things that are prepared for you.

15
00:01:03,180 --> 00:01:11,010
So let's go ahead and study the tablet application and I'm going to say tab the app tab the application

16
00:01:11,010 --> 00:01:16,650
by default has a storyboard that the Islamic world is pointing to to view controllers.

17
00:01:16,800 --> 00:01:23,490
True a tab bar controller and the very first thing I want to show you in here is how we could add any

18
00:01:23,490 --> 00:01:26,580
other view controllers in here before that door.

19
00:01:26,610 --> 00:01:32,100
Let me run the application and you could do the same thing on your computer just to get a sense of what

20
00:01:32,160 --> 00:01:35,290
a tab part essentially is and how it works.

21
00:01:35,430 --> 00:01:41,170
As you can see now at the bottom of my screen I have two tabs for a top on one of them.

22
00:01:41,190 --> 00:01:45,570
They just go from one view controller entirely to the other one.

23
00:01:45,570 --> 00:01:47,130
This is the first view controller.

24
00:01:47,130 --> 00:01:48,570
This is the next one.

25
00:01:48,570 --> 00:01:52,080
Now let's talk about these say grace and how they are designed.

26
00:01:52,140 --> 00:01:54,960
What could I do if I wanted to add one.

27
00:01:54,990 --> 00:02:02,580
So let's go in here and say I have a new view controller this new view controller I'm going to say it

28
00:02:02,580 --> 00:02:10,920
has a green background so it's more distinct and I want to add it as one of the view controllers for

29
00:02:10,920 --> 00:02:11,850
my top of the bar.

30
00:02:11,880 --> 00:02:18,280
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

31
00:02:18,460 --> 00:02:26,500
and say it is one of the view controllers if you remember in a navigation controller then you were dragging

32
00:02:26,500 --> 00:02:32,570
from your navigation controller to a view controller that would become the route to view controller.

33
00:02:32,710 --> 00:02:38,560
Here it becomes one of the many view controllers of the view controllers array.

34
00:02:38,920 --> 00:02:40,410
So here is that.

35
00:02:40,540 --> 00:02:48,460
And now I have my new view controller also connected to my top controller and it is now showing up in

36
00:02:48,460 --> 00:02:57,220
here as that item and the item is coming from here from the fact pad now between my green view controller

37
00:02:57,280 --> 00:03:04,000
there is a little bar at the bottom and that is actually showing us the title being item for instance

38
00:03:04,360 --> 00:03:09,850
I could use that or I could essentially go in here and say let's use one of the system items let's say

39
00:03:09,850 --> 00:03:16,570
I want to have a favorites and now that one turns into favorites and then obviously it reflects in here

40
00:03:17,020 --> 00:03:24,730
and tapping on any of these buttons essentially loads that view controller for now the first and the

41
00:03:24,730 --> 00:03:27,730
second that there is a default view controllers.

42
00:03:27,850 --> 00:03:34,600
They also have a view controller class first and second I don't have that for my green but you can imagine

43
00:03:34,600 --> 00:03:40,750
that you can just added there and then everything is business as normal usually whatever you were doing

44
00:03:40,760 --> 00:03:46,090
with you know adding buttons or functions or anything that you could do in a view controller you could

45
00:03:46,090 --> 00:03:47,590
do it there as well.

46
00:03:47,590 --> 00:03:55,130
Let's see that again for a second So now once it's loaded on my simulator I could go on the first quarter

47
00:03:55,180 --> 00:04:00,000
the second or go to the favorite which takes me to the green view controller.

48
00:04:00,010 --> 00:04:07,510
Now while this might be useful I also want to show you how to add this tab bar the bar of it not the

49
00:04:07,510 --> 00:04:11,220
controller to any view controller essentially.

50
00:04:11,260 --> 00:04:17,710
So let's go ahead and start a new application this new application is going to be of the type single

51
00:04:17,710 --> 00:04:29,490
view application and yet I'm going to go ahead and say tab bar in single view up so once it loads up

52
00:04:30,720 --> 00:04:36,330
I'm going to head to my storyboard and the storyboard I'm going to go ahead and say I actually have

53
00:04:36,390 --> 00:04:38,450
a tab bar down there.

54
00:04:38,460 --> 00:04:47,440
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

55
00:04:47,440 --> 00:04:49,850
the design on iPhone access as well.

56
00:04:49,960 --> 00:04:55,630
And in here I'm going to go ahead and set this place up there OK.

57
00:04:55,670 --> 00:05:00,760
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

58
00:05:00,770 --> 00:05:07,660
we have in our favorites and more and I'm going to have to add this as an outlet to my view controller.

59
00:05:07,730 --> 00:05:10,290
I'm going to come in here and say

60
00:05:12,990 --> 00:05:20,880
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.

61
00:05:20,950 --> 00:05:25,690
I'm going to come back to a story I want after we simulate the application because I want to show you

62
00:05:25,690 --> 00:05:28,350
their constraints for a top bar.

63
00:05:28,360 --> 00:05:30,270
But for now that's all I have to do.

64
00:05:30,280 --> 00:05:32,260
I'm going to head back to my programming side.

65
00:05:32,830 --> 00:05:40,000
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

66
00:05:40,000 --> 00:05:45,760
on the event that the value changed simply because tab bar is they have a delegate for that.

67
00:05:45,760 --> 00:05:52,090
So because of that I'm going to go ahead and say at the delegate protocol you I type or delegate that

68
00:05:52,170 --> 00:05:58,450
format everything nice and tidy and since I'm using the delegate I should remember to add the delegate

69
00:05:58,450 --> 00:05:59,170
to here.

70
00:05:59,470 --> 00:06:05,240
So in my view did Lord I'm going to see my top box DOD delegate to self.

71
00:06:05,500 --> 00:06:09,390
This is of course something you can also do it in your storyboard.

72
00:06:09,430 --> 00:06:10,500
No they have that.

73
00:06:10,510 --> 00:06:14,020
I could actually use the tab for delegates methods.

74
00:06:14,020 --> 00:06:17,640
One of those methods the one that is useful for me is this.

75
00:06:17,800 --> 00:06:25,210
Let me reformat things to get myself a little bit more space is called did select and what it does is

76
00:06:25,210 --> 00:06:32,560
this it tells me when the tab bar gets selected and based on the item that we selected we could decide

77
00:06:32,560 --> 00:06:34,480
to do different things.

78
00:06:34,480 --> 00:06:41,220
For now I'm just going to save print tab bar changed so I know that it's actually working.

79
00:06:41,300 --> 00:06:44,890
Let me format this things once again and then we'll run the application.

80
00:06:44,890 --> 00:06:51,610
Now if it all works First we should be able to see the two buttons in our toolbar and tapping on any

81
00:06:51,610 --> 00:06:58,120
of them should essentially print that sentence tab bar changed tab bar changed.

82
00:06:58,120 --> 00:07:03,670
Now the important thing that I want to get to is knowing Veatch by then is the one that we actually

83
00:07:03,670 --> 00:07:10,780
tapped on which IDM is the one that we tapped on and to do that and let's go back to my storyboard and

84
00:07:10,870 --> 00:07:15,420
I'm going to select my two items and give each of them a tag.

85
00:07:15,550 --> 00:07:23,500
So I'm going to go ahead and say favorite is tag zero and more is tagged one and having the tags is

86
00:07:23,500 --> 00:07:29,800
a little bit better than having the titles because the titles might be driven from some other resource.

87
00:07:29,800 --> 00:07:36,160
So for this kind of thing is that if you stick with the tags as opposed to titles because in view controller

88
00:07:36,190 --> 00:07:45,670
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

89
00:07:45,670 --> 00:07:48,010
title is not the best idea in here.

90
00:07:48,010 --> 00:07:51,290
So I'm going to say if tag is zero.

91
00:07:51,340 --> 00:07:52,660
This is the favorite one.

92
00:07:52,690 --> 00:07:57,810
So I'm going to say Prince Prince saying 5.

93
00:07:58,210 --> 00:08:07,150
And also say self DOD view DOD Magna Carter becomes you eye color dart red.

94
00:08:07,750 --> 00:08:12,450
And in the URL someone say in the ads to the other things Prince.

95
00:08:12,460 --> 00:08:18,190
Now there's two which is more and make the background color green.

96
00:08:18,190 --> 00:08:25,090
And now if I run the application I should be able to see most of these working on the same type or are

97
00:08:25,240 --> 00:08:25,960
successfully

98
00:08:28,770 --> 00:08:31,890
taught when I tap on the first one it becomes red.

99
00:08:31,950 --> 00:08:37,590
Prints five and I top the other one becomes green and prints more.

100
00:08:37,920 --> 00:08:40,440
And based on that you can't simply decide the bar.

101
00:08:40,470 --> 00:08:47,080
I know what you want to do you probably want to navigate this view into a different you know view.

102
00:08:47,220 --> 00:08:48,410
You want to make a Segway.

103
00:08:48,430 --> 00:08:54,300
You are Lord in your view controller as a sub view or any other decision that you might make on that

104
00:08:54,300 --> 00:08:54,990
basis.

105
00:08:54,990 --> 00:09:00,630
So finally the last thing I want to show you is if you go to a storyboard or top what is now at the

106
00:09:00,630 --> 00:09:06,360
bottom of the screen and it is showing in the right place simply because we are designing an iPhone

107
00:09:06,360 --> 00:09:11,510
access and we are also simulating an iPhone access but that's not always the case.

108
00:09:11,520 --> 00:09:17,290
So if you have to use auto layout and set the constraints so I'm going to go in here and say my top

109
00:09:17,290 --> 00:09:26,640
bar against my view has a leading a space of zero has a trading a space of zero as van and then I'm

110
00:09:26,640 --> 00:09:34,650
going to go ahead and say it has a bottom a spacing to the super view and that button is facing is also

111
00:09:34,890 --> 00:09:35,390
zero.

112
00:09:35,390 --> 00:09:43,520
So now I select my by them and it says my top are against safe area is 34 that is not something I want.

113
00:09:43,530 --> 00:09:45,390
Well they do want to make it is like this.

114
00:09:45,420 --> 00:09:51,030
I want to make it based on the super view and based on the super view I want it to be zero.

115
00:09:51,030 --> 00:09:54,430
So the bottom of it is always stuck to the bottom of the screen.

116
00:09:54,550 --> 00:09:58,260
And as you can see top was kind of designed in a small today.

117
00:09:58,260 --> 00:10:04,090
So it's actually increasing its own height but maintaining the buttons in the right place.

118
00:10:04,170 --> 00:10:11,040
So it covers the bottom of the screen has this little extra empty area which essentially is going to

119
00:10:11,040 --> 00:10:14,970
be very is untouched but it is not the safe area.

120
00:10:14,970 --> 00:10:20,730
So if we run the application now we should be able to see it working properly on our iPhone 10.

121
00:10:20,730 --> 00:10:24,640
In this case or access which is doing that.

122
00:10:24,880 --> 00:10:30,230
And if I go ahead and run it on a different simulator it would do the same thing as when we also saw

123
00:10:30,230 --> 00:10:33,970
for use that to default by then is that they came without a tab bar.

124
00:10:34,000 --> 00:10:39,430
But if you go to a storyboard you could simply go ahead and say between my tab what I want to have more

125
00:10:39,440 --> 00:10:45,790
buttons that is going to be in here a tab bar by then item which is this one for instance drag it in

126
00:10:45,790 --> 00:10:51,070
here and then this one could go ahead and say it has a system.

127
00:10:51,070 --> 00:10:59,760
Items such as a feature one and then sexually about the color list choose a contact for instance.

128
00:10:59,950 --> 00:11:05,920
And then based on that they could either take for you to say two now favorite is zero contact is two

129
00:11:05,920 --> 00:11:12,460
and more is one if I come back to my view controller once again in year I could choose the tags to decide

130
00:11:12,460 --> 00:11:18,580
about what they want to happen then that by then is being selected and that's just simply adding more

131
00:11:18,670 --> 00:11:22,270
bar by then items into your top us.

132
00:11:22,330 --> 00:11:30,130
So that's a brief introduction on how to use tab bars in both a tab application as well as using them

133
00:11:30,130 --> 00:11:36,460
between a single view application using the delegate method and let's move on to our next lesson where

134
00:11:36,470 --> 00:11:39,950
we use the tap bars vit navigation controllers.

135
00:11:39,970 --> 00:11:40,750
So I'll see you there.