0
1
00:00:00,360 --> 00:00:07,680
Hey, guys. In this lesson, I've got three goals that I want to achieve before the lesson ends. And they're
1

2
00:00:07,770 --> 00:00:14,580
all to do with creating a better user experience and also creating a better user interface.
2

3
00:00:15,300 --> 00:00:21,780
Let me show you what we can achieve. On the left is the current version of our app where everything goes
3

4
00:00:21,780 --> 00:00:28,140
in looking exactly the same because we're using the same reusable cell. And it looks like as if I'm just
4

5
00:00:28,140 --> 00:00:33,020
being ghosted because I'm just sending lots of messages as myself, never getting a reply.
5

6
00:00:33,420 --> 00:00:39,570
But on the right here in the final version of the app, I should be able to see a difference between the
6

7
00:00:39,570 --> 00:00:45,960
messages that I've sent which are marked as Me, and the messages that my recipient has sent which is
7

8
00:00:45,960 --> 00:00:47,120
marked as You.
8

9
00:00:47,670 --> 00:00:55,790
So, now I'm logged in as a different user. And if I was to write and hit send,
9

10
00:00:55,800 --> 00:01:00,630
you can see that this comes out completely different from this one.
10

11
00:01:00,660 --> 00:01:07,740
The second thing I want to show you how to do is to be able to scroll to the very bottom of the table
11

12
00:01:07,740 --> 00:01:09,510
view. So that way
12

13
00:01:09,510 --> 00:01:15,420
If we had a whole bunch of messages, let's just go ahead and add a few more--not sure why Sheffield 
13

14
00:01:15,420 --> 00:01:21,540
came up right now, but let's just go ahead and add some more messages, and you can see already the messages
14

15
00:01:21,540 --> 00:01:28,720
are no longer showing up in the current window of my table view. And if I scroll down, I'll be able to
15

16
00:01:28,720 --> 00:01:29,490
see them,
16

17
00:01:29,490 --> 00:01:33,140
but every time I send a new message, I have to scroll down some more.
17

18
00:01:33,300 --> 00:01:35,640
So this is not a great user experience
18

19
00:01:35,730 --> 00:01:41,790
if I have to scroll down every time to see my latest message. And it also means that when I log in to
19

20
00:01:41,790 --> 00:01:47,370
my app, if there's more messages, then there are in the table view, it shouldn't really show the top one,
20

21
00:01:47,370 --> 00:01:47,610
right?
21

22
00:01:47,610 --> 00:01:51,690
It should show the one right at the bottom which is what happened most recently.
22

23
00:01:51,840 --> 00:01:55,280
So that's the second thing that we're going to be tackling here,
23

24
00:01:55,350 --> 00:02:02,760
this way of automatically scrolling to the very bottom of the table view. And the last thing I want to
24

25
00:02:02,760 --> 00:02:09,210
show you how to do is to customize the navigation bar, so that we have a different background color,
25

26
00:02:09,210 --> 00:02:14,700
a different font size for our title, a different color for the logout button
26

27
00:02:14,730 --> 00:02:20,880
and the title text, as well as removing the navigation bar from the welcome screen, because it looks a
27

28
00:02:20,880 --> 00:02:22,160
bit unnecessary here,
28

29
00:02:22,170 --> 00:02:23,070
right?
29

30
00:02:23,070 --> 00:02:25,310
Those are the three things that we're going to be tackling.
30

31
00:02:25,310 --> 00:02:27,610
So let's get on with the first one.
31

32
00:02:27,810 --> 00:02:32,460
How can we differentiate our sender from our recipient?
32

33
00:02:32,460 --> 00:02:38,160
Effectively, what we're going to do is in our ChatViewController at the place where we load up our
33

34
00:02:38,160 --> 00:02:47,040
cells for the tableView, we're going to check to see if the sender of the message that's going into
34

35
00:02:47,040 --> 00:02:51,640
the cell is the same as the user that's currently logged in.
35

36
00:02:51,810 --> 00:02:59,280
And if so, then that means this current message that's being loaded up, this current cell, belongs to the
36

37
00:02:59,430 --> 00:03:05,520
current user, in which case it will show this particular style of cell.
37

38
00:03:05,670 --> 00:03:14,850
But if the user of the message is not the same as the current user, then we're going to show this style
38

39
00:03:15,000 --> 00:03:15,840
of message.
39

40
00:03:16,830 --> 00:03:19,010
So how can we achieve this?
40

41
00:03:19,020 --> 00:03:26,250
Well, one way would be to have two different message cells, but we can also work with a single message
41

42
00:03:26,250 --> 00:03:29,630
cell and just style it differently depending on the sender.
42

43
00:03:29,880 --> 00:03:31,140
And that's the way we're going to do it.
43

44
00:03:31,560 --> 00:03:37,350
Let's go into our MessageCell.xib file, and make some small modifications.
44

45
00:03:37,350 --> 00:03:45,180
I'm going to go ahead and copy this right imagery, and go ahead and paste it inside here.
45

46
00:03:45,300 --> 00:03:52,830
Now, as soon as I hit paste or command V, it usually paste it right next to the previous one. But what I
46

47
00:03:52,830 --> 00:04:01,250
want to do is I want to actually drag it, so that it comes to the very front of our horizontal stack.
47

48
00:04:01,290 --> 00:04:06,900
So you should see a line right at the beginning which means that it's being put at the very left part
48

49
00:04:07,080 --> 00:04:08,040
of the stack view.
49

50
00:04:08,700 --> 00:04:14,790
And in terms of the hierarchy in the document outline, this is what you should see, the MeAvatar, the Message
50

51
00:04:14,790 --> 00:04:16,980
Bubble, and the Right Image View.
51

52
00:04:16,980 --> 00:04:20,310
So this left one shouldn't have the Me image.
52

53
00:04:20,310 --> 00:04:27,390
Instead, if we click on the Image property, we're going to change it to the YouAvatar which is another
53

54
00:04:27,390 --> 00:04:29,920
image that we included in the 
54

55
00:04:29,940 --> 00:04:32,910
Assets.xcassets right here.
55

56
00:04:32,970 --> 00:04:40,470
So, now that we've got two different types of bubbles. What we want to be able to do is to hide one of
56

57
00:04:40,470 --> 00:04:41,090
these,
57

58
00:04:41,250 --> 00:04:48,660
if the message came from myself or if the message came from my recipient. Let's go ahead and link up
58

59
00:04:48,690 --> 00:04:54,210
that image view by opening up our assistance. And we've really got our Right Image View,
59

60
00:04:54,210 --> 00:05:01,590
so let's go ahead and just call this one the leftImageView, and hit connect.
60

61
00:05:02,310 --> 00:05:07,010
So, now we've got both of these image views linked up to our MessageCell class,
61

62
00:05:07,050 --> 00:05:10,950
we'll be able to manipulate the MessageCell inside our 
62

63
00:05:10,950 --> 00:05:11,670
ChatViewController.
63

64
00:05:12,300 --> 00:05:20,580
So now let's head into our ChatViewController and inside our TableView cellForRowAt indexPath
64

65
00:05:20,580 --> 00:05:21,360
method,
65

66
00:05:21,360 --> 00:05:28,650
let's go ahead and modify our cell depending on whether if the current message that is being displayed
66

67
00:05:28,680 --> 00:05:34,430
into the cell is from the current logged in user or from somebody else.
67

68
00:05:34,620 --> 00:05:40,680
And to do that let's go ahead and create a new constant code message, and we're gonna set that to the
68

69
00:05:40,710 --> 00:05:44,790
current message at indexPath row from the messages array.
69

70
00:05:44,820 --> 00:05:47,420
So this first part before the .body.
70

71
00:05:53,280 --> 00:06:00,510
Just as a quick reminder, this method tableView cellForRoawAt gets called as many times as there are
71

72
00:06:00,510 --> 00:06:01,590
cells.
72

73
00:06:01,590 --> 00:06:08,190
So in our case, we're saying create the number of cells that match the number of messages, and for each
73

74
00:06:08,190 --> 00:06:13,380
of those cells, call this method to figure out what needs to be displayed in it.
74

75
00:06:13,650 --> 00:06:20,340
In our case, we're going to be using a message object to populate the cell. So we can now change
75

76
00:06:20,340 --> 00:06:24,700
the cell.label.text to message.body.
76

77
00:06:24,710 --> 00:06:30,930
And if we want to get a hold of the sender property of the message, then we can just happen to message.sender,
77

78
00:06:31,170 --> 00:06:39,420
and we can use an "if" statement to check if this is equal to, so two equals, the current logged
78

79
00:06:39,420 --> 00:06:40,510
in user.
79

80
00:06:40,620 --> 00:06:48,260
So we'll use the Auth module, Auth.auth() currentUser.email.
80

81
00:06:48,300 --> 00:06:54,170
So remember, this is the same thing that we used when we created each of the messages.
81

82
00:06:54,240 --> 00:07:02,460
So when we said, "let message.sender equals the current user?.email, and then put that messageSender into
82

83
00:07:02,460 --> 00:07:09,900
the senderField of our new document which gets saved in our messages collection. And that messages collection
83

84
00:07:09,990 --> 00:07:16,530
is what we're retrieving and putting into the messages array. And then for each of the rows in our table,
84

85
00:07:16,530 --> 00:07:22,950
we're getting hold of the message and we're checking to see if its sender is the same as the current
85

86
00:07:22,950 --> 00:07:24,550
logged in user.
86

87
00:07:24,630 --> 00:07:30,450
So that means that all of these messages that match this criteria are the ones that the current logged
87

88
00:07:30,450 --> 00:07:31,470
in user sent.
88

89
00:07:31,950 --> 00:07:38,440
So that means that the cell that they should see is the MeAvatar and this particular message,
89

90
00:07:38,550 --> 00:07:40,220
and then we have to hide this
90

91
00:07:40,260 --> 00:07:46,430
YouAvatar, so the one on the left, the one that's linked to the leftImageView.
91

92
00:07:46,500 --> 00:07:50,550
Let's go back to our ChatViewController and inside this "if" statement,
92

93
00:07:50,550 --> 00:08:00,600
so this means "This is a message from the current user," and in this case, we're still gonna be creating
93

94
00:08:00,630 --> 00:08:07,470
a MessageCell from the messageCell class and the MessageCell.xib, but we're going to modify it slightly
94

95
00:08:07,470 --> 00:08:08,330
differently.
95

96
00:08:08,400 --> 00:08:14,910
So let's go ahead and move these two lines of code to above where we actually make the adjustments.
96

97
00:08:14,940 --> 00:08:15,750
So right here.
97

98
00:08:16,200 --> 00:08:22,740
So, now that we've added the message into the cell, we're ready to go ahead and customize it.
98

99
00:08:22,770 --> 00:08:31,530
So the first thing we gonna do is gonna say cell.lleftImageView.isHidden is set to true, and
99

100
00:08:31,530 --> 00:08:35,590
we're going to make sure that the rightImageView is not hidden,
100

101
00:08:35,610 --> 00:08:39,650
so let's change that property to false.
101

102
00:08:39,660 --> 00:08:45,570
So, now we're displaying the rightImageView, but we're hiding the leftImageView, and we're also going
102

103
00:08:45,570 --> 00:08:50,370
to set the cell's background color to make it look a little bit different from the messages that we're
103

104
00:08:50,370 --> 00:08:52,680
getting from other senders.
104

105
00:08:52,680 --> 00:09:01,200
So, we're gonna say, cell.messageBubble which is that UI View that is this purple one right here. 
105

106
00:09:01,200 --> 00:09:10,180
We're going to set it to have a different background color which is going to be equal to a UIColor that is
106

107
00:09:10,210 --> 00:09:13,860
named based on one of our constants.
107

108
00:09:13,930 --> 00:09:20,200
So remember that in order to use our custom colors that we create in our Assets.xcassets like
108

109
00:09:20,200 --> 00:09:27,430
this BrandLightPurple, we have to use that method UIColor named, and instead of using the 
109

110
00:09:27,700 --> 00:09:34,030
BrandLightPurple string in here, I'm gonna use the same one that I've already got in my constants right here.
110

111
00:09:34,090 --> 00:09:39,060
So it's gonna be under the structure K. Inside K,
111

112
00:09:39,070 --> 00:09:41,320
we've got a structure called BrandColors.
112

113
00:09:41,590 --> 00:09:45,200
And then inside that, we've got a property called lightPurple.
113

114
00:09:45,460 --> 00:09:52,000
So let's go back here and tap into the K constant and then we're going to go to brand colors, and then
114

115
00:09:52,000 --> 00:09:55,080
we're gonna go for light purple like that.
115

116
00:09:55,120 --> 00:10:00,580
That way we won't make any typos here and we'll be able to get the light purple set as the background
116

117
00:10:00,580 --> 00:10:02,200
color.
117

118
00:10:02,200 --> 00:10:09,220
Now, in addition to setting the selves' background color, we're going to also change the labels text color.
118

119
00:10:09,700 --> 00:10:14,330
So let's go ahead and change that property. And you guessed it, we're going to use the same method
119

120
00:10:14,440 --> 00:10:19,930
UIColor named, and in this case, though, it's going to be the purple color that we're going to use
120

121
00:10:19,990 --> 00:10:21,350
as the text color.
121

122
00:10:21,370 --> 00:10:31,490
So K.BrandColors.purple, so that way we have a light purple background with a purple text.
122

123
00:10:31,520 --> 00:10:39,780
And in the case where this is a message from another sender, well, in that case,
123

124
00:10:39,780 --> 00:10:50,360
so the "else" statement is going to have these cell's leftImageView.isHidden set as false,
124

125
00:10:50,360 --> 00:10:59,840
and the cell's rightImageView.is hidden set as true. And then we're going to basically switch up these two 
125

126
00:10:59,840 --> 00:11:05,120
things, so that instead of having a background color of light purple, it's going to have a background
126

127
00:11:05,120 --> 00:11:13,310
color purple and the text is going to be light purple instead. Let's go ahead and run our app and see what
127

128
00:11:13,400 --> 00:11:17,380
this actually gives us.
128

129
00:11:17,420 --> 00:11:24,050
Now, when we log in and we take a look at our table view, you can see that for all the messages that I've
129

130
00:11:24,050 --> 00:11:31,520
sent from the same username, so as myself, they have the same appearance. But if I go ahead and log out
130

131
00:11:31,940 --> 00:11:35,710
and log in with the other account that I've signed up for,
131

132
00:11:35,720 --> 00:11:39,360
so if you haven't got one, then go ahead and register a new account.
132

133
00:11:39,380 --> 00:11:41,470
So this is a@b.com
133

134
00:11:41,510 --> 00:11:46,770
We're now getting all the cells formatted as if the message came from somebody else.
134

135
00:11:46,790 --> 00:11:49,350
So let's say I go ahead and write a new message,
135

136
00:11:49,370 --> 00:11:54,380
"I am a@b.com," and hit send.
136

137
00:11:54,380 --> 00:12:01,610
Notice how we now have completely different formats for this type of message versus the message that sent
137

138
00:12:01,610 --> 00:12:07,410
from this user 1@2.com.
138

139
00:12:07,440 --> 00:12:10,050
So, now let's hit send and scroll to the bottom.
139

140
00:12:10,050 --> 00:12:15,300
You can see that we've now formatted ourselves to be able to differentiate between the messages that
140

141
00:12:15,300 --> 00:12:19,100
the user sent and the ones that they received.
141

142
00:12:19,110 --> 00:12:27,060
Now, this is a good point to mention that if you had formatted your cells to be rounded for the previous
142

143
00:12:27,060 --> 00:12:31,290
dimension, so previously in our MessageCell.xib,
143

144
00:12:31,530 --> 00:12:35,080
we only had this message bubble and the rightImageView.
144

145
00:12:35,190 --> 00:12:38,610
But now in addition to that, we've also got the leftImageView.
145

146
00:12:39,030 --> 00:12:47,730
So given that our Stack View has 20 points of space set between all the elements, we've now changed the
146

147
00:12:47,730 --> 00:12:49,370
dimensions of the cell.
147

148
00:12:49,380 --> 00:12:55,230
So if you're wondering why it is that your message bubbles no longer look right or the same way that
148

149
00:12:55,230 --> 00:12:56,440
you had before,
149

150
00:12:56,460 --> 00:12:58,650
well, it's because of this line of code.
150

151
00:12:58,710 --> 00:13:05,430
So if you've changed this to divided by 4 or, say, another number, you'll have to change it to divided
151

152
00:13:05,430 --> 00:13:06,230
by 5
152

153
00:13:06,390 --> 00:13:11,010
if you want this perfectly rounded corner like I've got here.
153

154
00:13:11,010 --> 00:13:16,740
If you wanted to have it square or any other different shape, then feel free to keep it the way that
154

155
00:13:16,740 --> 00:13:17,670
you've got it.
155

156
00:13:17,670 --> 00:13:24,260
This is just the quick tip in case you're wondering why it is the shape has changed. So let's tackle
156

157
00:13:24,260 --> 00:13:25,900
the next problem.
157

158
00:13:25,910 --> 00:13:30,860
Notice how every time I send a new message, it gets put right at the bottom
158

159
00:13:30,920 --> 00:13:35,970
and we have to scroll manually to be able to see it which is quite painful,
159

160
00:13:35,990 --> 00:13:40,760
so let's try and change that. In our Chart View Controller,
160

161
00:13:40,760 --> 00:13:48,710
the point where we can do this is inside our loadMessages method because it's here where we have our
161

162
00:13:48,800 --> 00:13:51,360
Snapshot Listener added to our collection.
162

163
00:13:51,500 --> 00:13:58,340
And every time there's a change in our database, we trigger this closure which empties out our messages
163

164
00:13:58,340 --> 00:14:03,730
array and adds all of the new messages back in to that messages array.
164

165
00:14:03,740 --> 00:14:10,970
So at this time point is where we call reload data to trigger these two delegate methods and put the
165

166
00:14:10,970 --> 00:14:13,870
cells into our table view.
166

167
00:14:14,000 --> 00:14:20,360
Now, if we wanted to scroll to the very bottom of the table view every time there's a new message added,
167

168
00:14:20,750 --> 00:14:30,080
then all we have to do is to call a method which is self.tableView.scrollToRow.
168

169
00:14:30,080 --> 00:14:35,990
Now, this particular method expects a IndexPath provided,
169

170
00:14:35,990 --> 00:14:38,710
so we're going to have to create that as a constant as well.
170

171
00:14:38,720 --> 00:14:47,000
So let's call it indexPath and I'm going to initialize a IndexPath object, and I'm going to choose
171

172
00:14:47,000 --> 00:14:50,890
the initializer that asks for a row number.
172

173
00:14:51,020 --> 00:14:58,640
This is basically saying scrollToRow. And in this line we're creating which row we want to scroll to.
173

174
00:14:58,640 --> 00:15:07,860
We want to scroll to the very end of our messages array. So we can simply write messages.count.
174

175
00:15:08,040 --> 00:15:10,530
But this is not enough because let's do the math.
175

176
00:15:10,530 --> 00:15:15,030
Let's say that we had an array with two items, right, just "A" and "B."
176

177
00:15:15,170 --> 00:15:19,360
Well, in this case, the array.count is going to be equal to 2.
177

178
00:15:19,400 --> 00:15:21,060
There's just two items.
178

179
00:15:21,060 --> 00:15:29,940
But if we tried to get a hold of the last item in the array by tapping into the item at index 2, then that's
179

180
00:15:29,940 --> 00:15:32,100
going to be 0, 1, 2.
180

181
00:15:32,100 --> 00:15:33,890
So it's going to be out of bounds.
181

182
00:15:33,900 --> 00:15:42,150
So in addition to writing messages.count here, we have to subtract 1 to be able to get a hold of
182

183
00:15:42,150 --> 00:15:45,150
the last item in our messages array.
183

184
00:15:45,450 --> 00:15:52,230
And we also have to add the "self" keyword because we are inside a closure.
184

185
00:15:52,230 --> 00:15:58,920
The next thing it asked for is the section number and we're going to set that as 0 because we actually
185

186
00:15:58,980 --> 00:16:01,900
only have one section.
186

187
00:16:02,100 --> 00:16:09,660
Now, if we were inside, say, these settings page of our iPhone, then you'll notice that it has lots of different
187

188
00:16:09,660 --> 00:16:10,260
sections.
188

189
00:16:10,260 --> 00:16:13,470
Here's section zero, section 1, section 2.
189

190
00:16:13,830 --> 00:16:18,300
But we've only got one, so we can set that as the first section.
190

191
00:16:18,300 --> 00:16:25,560
So, now that we've created this IndexPath object, we can now use it inside here to specify which row
191

192
00:16:25,590 --> 00:16:28,080
we want our table view to scroll to.
192

193
00:16:28,620 --> 00:16:36,610
And then the position for the table view is to position that row at the top, and then the animated property,
193

194
00:16:36,630 --> 00:16:44,010
you can either set to true, which is going to give you an animation of that scrolling to this row,
194

195
00:16:44,010 --> 00:16:48,440
or you can set it to false if you just wanted to go straight there without the animation.
195

196
00:16:48,570 --> 00:16:56,480
Let me demonstrate so you can see what's the difference. Let's log in and you'll see that it scrolled,
196

197
00:16:56,540 --> 00:16:56,870
right?
197

198
00:16:56,870 --> 00:17:03,410
It just did that animation to go to the very bottom of our table view and show the latest message which
198

199
00:17:03,410 --> 00:17:05,020
is the effect that we wanted.
199

200
00:17:05,210 --> 00:17:11,440
If I change that to false, however, you'll see that once the screen loads up, it goes straight to the bottom
200

201
00:17:11,450 --> 00:17:12,470
of the table view
201

202
00:17:12,470 --> 00:17:14,690
without that animation.
202

203
00:17:14,690 --> 00:17:19,690
So I'm going to leave this up to you depending on whichever way you prefer your app to be,
203

204
00:17:19,790 --> 00:17:21,860
then you can set that property however you want,
204

205
00:17:21,860 --> 00:17:28,830
true or false. But we've now solved this problem because every time I write a new message now,
205

206
00:17:28,830 --> 00:17:30,660
if I hit send,
206

207
00:17:30,720 --> 00:17:33,010
you can see that it pops up right at the bottom,
207

208
00:17:33,030 --> 00:17:38,700
so I don't have to manually scroll to see it. But there is something that we can still improve here, though,
208

209
00:17:39,060 --> 00:17:45,450
because when I create a new message and I hit send, the old message doesn't disappear from my text field.
209

210
00:17:45,450 --> 00:17:50,590
So I have to manually delete it in order to write a new message which is a bit painful,
210

211
00:17:50,610 --> 00:17:51,690
right?
211

212
00:17:51,870 --> 00:17:57,180
And I want to pose this as a challenge to you. Can you modify the code, so that when the send button is
212

213
00:17:57,180 --> 00:17:59,880
pressed, the old text is deleted.
213

214
00:18:00,030 --> 00:18:03,420
I'll give you a few seconds to pause the video before I show you the solution
214

215
00:18:06,630 --> 00:18:07,380
Ready?
215

216
00:18:07,380 --> 00:18:08,770
Here's the solution.
216

217
00:18:08,790 --> 00:18:13,770
The key is locating the time point in our code when we send a new message.
217

218
00:18:13,980 --> 00:18:17,670
And that time point is the IBAction sendPressed.
218

219
00:18:17,670 --> 00:18:21,300
So all we need to do here is add a little bit of code.
219

220
00:18:21,300 --> 00:18:29,040
If the message was successfully saved, then we can go ahead and happen to our text field,
220

221
00:18:29,040 --> 00:18:34,380
our messageTextField and set its text property to an empty string.
221

222
00:18:34,380 --> 00:18:40,460
This way the text field will empty out whenever we're done with sending the message.
222

223
00:18:40,730 --> 00:18:46,720
And because we're inside a closure and we're trying to update the user interface, remember that we should
223

224
00:18:46,720 --> 00:18:56,100
tap into the DispatchQueue.main.async method so that this actually happens on the main
224

225
00:18:56,100 --> 00:19:03,270
thread, rather than on a background thread, which is where the code enclosures tend to take place.
225

226
00:19:03,270 --> 00:19:05,100
And that's the solution to the challenge.
226

227
00:19:05,100 --> 00:19:13,760
Now, let's run our app and see this behavior showing up. let's go ahead and write a message and hit send.
227

228
00:19:13,860 --> 00:19:17,410
And now that message goes in and our text field clears up.
228

229
00:19:17,580 --> 00:19:18,720
Perfect.
229

230
00:19:18,840 --> 00:19:25,190
Now all that's left to do is the last thing that we mentioned which is to format our navigation bar.
230

231
00:19:25,470 --> 00:19:32,330
The first thing I said we wanted to do was to change its color and change some of the properties.
231

232
00:19:32,340 --> 00:19:34,510
Now, to change this particular nav bar,
232

233
00:19:34,530 --> 00:19:41,970
you don't actually change it in this view controller, you change it in the navigation controller. So selecting
233

234
00:19:41,970 --> 00:19:48,450
this navigation bar from the navigation controller, which controls all of these screens, then we can go
234

235
00:19:48,450 --> 00:19:54,090
into the attributes inspector and change the Bar Tint color.
235

236
00:19:54,240 --> 00:20:00,060
So let's go ahead and select our BrandBlue to go in there and you can see that that color now goes
236

237
00:20:00,060 --> 00:20:03,070
in all the screens where it's being displayed.
237

238
00:20:03,300 --> 00:20:11,340
And we're also going to change the Title Color. So that will change the text that's going into the navigation
238

239
00:20:11,340 --> 00:20:11,790
bars
239

240
00:20:11,880 --> 00:20:18,450
as the title. So at the moment, we're setting that title right here in our viewDidLoad where we said
240

241
00:20:18,480 --> 00:20:25,950
title = K.appName which, of course, corresponds to our constant app name which is this right here.
241

242
00:20:25,950 --> 00:20:32,580
An alternative way of setting the title is to click on this navigation item and put it right here
242

243
00:20:32,850 --> 00:20:33,990
where it'll show up.
243

244
00:20:34,020 --> 00:20:39,360
So depending on whichever one you want to use, you can set it either in the Interface Builder or as
244

245
00:20:39,360 --> 00:20:41,350
code inside the Chat View Controller.
245

246
00:20:41,940 --> 00:20:49,710
Now, let's go back to our navigation bar and change the title color to white and change the font size
246

247
00:20:49,770 --> 00:20:59,160
to System fonts. And Blacks are really, really bold, so much bolder than bold, and change the size to 25
247

248
00:20:59,190 --> 00:21:02,650
to make it a lot bigger, so that it shows up.
248

249
00:21:02,670 --> 00:21:11,310
So, now let's go ahead and give it a spin. And once we go to the Log In page, you can see that there is
249

250
00:21:11,310 --> 00:21:16,920
this clear difference between the navigation bar and this blue background screen.
250

251
00:21:16,920 --> 00:21:22,800
So if you want this to look identical, then the way to address that is by selecting the Navigation Bar
251

252
00:21:22,920 --> 00:21:29,160
on the Navigation Controller, and then changing that Translucent property to false.
252

253
00:21:29,160 --> 00:21:31,280
So, now let me run that app again.
253

254
00:21:33,210 --> 00:21:39,150
And on our Log In screen, you can see that those two colors now match perfectly.
254

255
00:21:39,150 --> 00:21:44,880
Now, the final thing I want to change is to make that Back button stand out a little bit more, because
255

256
00:21:44,880 --> 00:21:50,670
at the moment, it's blue on blue because we've changed the color of the navigation bar. So, again, selecting
256

257
00:21:50,670 --> 00:21:53,930
the navigation bar from the navigation controller.
257

258
00:21:53,940 --> 00:21:58,360
Let's go ahead and change the tint color to white.
258

259
00:21:58,590 --> 00:22:04,660
That way all of the bar buttons will turn into a white colored button item like so.
259

260
00:22:04,770 --> 00:22:12,960
Now, all that we have left to do is the last thing which is, how can we disable this navigation bar
260

261
00:22:13,350 --> 00:22:17,580
so that it doesn't show up on some of the screens?
261

262
00:22:17,580 --> 00:22:23,640
For example, it makes sense for it to be here because we might want to press back, but on the welcome screen, it looks
262

263
00:22:23,640 --> 00:22:26,790
kind of ugly just to have it hanging around not doing anything.
263

264
00:22:27,660 --> 00:22:29,990
Let's go into that WelcomeViewController.
264

265
00:22:30,540 --> 00:22:39,180
And in order to disable that navigation bar, the property that we can set is code "i is Navigation Bar Hidden."
265

266
00:22:39,180 --> 00:22:44,520
But the time point where we want to hide it is at the point where the viewWillAppear.
266

267
00:22:44,520 --> 00:22:50,610
So this is just before the view shows up on screen. And it's at this point in time where we're going
267

268
00:22:50,610 --> 00:22:58,560
to tap into the navigationController.isNavigationBarHidden and we're going to set it to true,
268

269
00:22:58,980 --> 00:23:02,250
so that we hide it for our WelcomeViewController.
269

270
00:23:02,760 --> 00:23:09,960
But notice how if I run the app as it is right now while I've hidden the navigation bar for the welcome screen,
270

271
00:23:09,960 --> 00:23:17,010
if I go into the log in or the register screens, I've now lost my navigation bar. It's still hidden.
271

272
00:23:17,130 --> 00:23:21,360
So in addition to hiding it, I also have to unhide it.
272

273
00:23:21,650 --> 00:23:28,680
And the time point where I want to do that is when we're about to go onto the next screen. And we can
273

274
00:23:28,740 --> 00:23:33,230
override a method called viewWillDisappear.
274

275
00:23:33,270 --> 00:23:39,690
So just before the view disappears and the next screen shows up, we tap into a navigation controller
275

276
00:23:40,110 --> 00:23:48,480
and reset the isNavigationBarHidden property to false. This way just before the view shows up, 
276

277
00:23:48,480 --> 00:23:50,460
we set that navigation bar to hidden.
277

278
00:23:50,460 --> 00:23:57,360
But as soon as I press log in and my welcome view controller disappears, my navigation bar becomes visible
278

279
00:23:57,360 --> 00:23:57,860
again.
279

280
00:23:59,160 --> 00:24:04,150
So that way we only get it on the screen where we want it and we disable it for the screen
280

281
00:24:04,170 --> 00:24:07,990
when we don't. Now, the final thing to note is
281

282
00:24:08,010 --> 00:24:14,400
something that won't affect how it behaves. But whenever you're overriding one of these lifecycle methods
282

283
00:24:14,490 --> 00:24:21,060
from the view controller, such as viewWillAppear, viewWillDisappear, and viewDidLoad,
283

284
00:24:21,090 --> 00:24:26,840
you should always code the super method like how we have here with viewDidLoad.
284

285
00:24:26,910 --> 00:24:33,330
So this is something that it's best to get into the habit of doing because it's good practice. And in
285

286
00:24:33,330 --> 00:24:38,640
fact, when you read the documentation for one of these methods, let's take a look at the one
286

287
00:24:38,640 --> 00:24:39,780
for viewWillAppear,
287

288
00:24:39,780 --> 00:24:45,270
you can see that down here in the Discussion, it tells you that if you override this method, like what
288

289
00:24:45,270 --> 00:24:51,240
we have done here, and we're providing our own custom functionality, you must call super
289

290
00:24:51,240 --> 00:24:56,880
at some point in your implementation. So that just means that the parent, the UIViewController, which
290

291
00:24:56,940 --> 00:25:03,900
our class is inheriting from, gets an opportunity to run its own code inside its own viewWillAppear,
291

292
00:25:04,350 --> 00:25:09,750
and then afterwards, we can run our code which has our custom functionality.
292

293
00:25:09,750 --> 00:25:16,200
So in order to do this, we write super.viewWillAppear, and then we pass in the same value of animated,
293

294
00:25:16,530 --> 00:25:21,390
as we have here from our inputs. And we do the same thing for our viewWillDisappear.
294

295
00:25:25,440 --> 00:25:30,630
And this, even though you'll find that when you run the app, doesn't actually change anything at all.
295

296
00:25:30,630 --> 00:25:37,710
But it's really a good practice to get into the habit of always calling super whenever you override any
296

297
00:25:37,710 --> 00:25:41,950
function from the superclass. In the next lesson,
297

298
00:25:42,000 --> 00:25:48,150
we're gonna be looking in more detail at each of these lifecycle methods that come from the UIViewController
298

299
00:25:48,150 --> 00:25:54,120
and we're going to see when they get called, and how they allow us to tap into certain time
299

300
00:25:54,120 --> 00:25:59,670
points during the life of our view controller, and to be able to perform things, such as updating the
300

301
00:25:59,670 --> 00:26:04,260
UI or triggering animations, or starting timers, et cetera.
301

302
00:26:04,320 --> 00:26:06,630
So for all of that and more, I'll see you there.