1
00:00:04,870 --> 00:00:08,460
Everyone welcome back Johnny be here with Dev slopes dot com.

2
00:00:08,620 --> 00:00:14,300
And in this lesson we are going to start working on our UI for our app crisis the user interface.

3
00:00:14,680 --> 00:00:20,290
Now in the last lesson we went over all about the basics of fires or how to use it when to use it.

4
00:00:20,470 --> 00:00:24,030
What makes it so awesome and everything and so yeah.

5
00:00:24,040 --> 00:00:29,670
But before we can get into that we need to have a place where we can actually enter data and save it.

6
00:00:29,680 --> 00:00:30,080
All right.

7
00:00:30,220 --> 00:00:36,670
So here is on the left we have our finished app game and we're going to be working on today is when

8
00:00:36,670 --> 00:00:42,430
we click on this lightbulb with the plus sign to add a random thought screen can click on it.

9
00:00:42,850 --> 00:00:44,930
And this is what we're going to be working on.

10
00:00:44,950 --> 00:00:51,670
And this lesson is setting up this UI OK that way in the next lesson we can actually type in a random

11
00:00:51,670 --> 00:00:56,230
thought process post and do the work to save it to our database.

12
00:00:56,230 --> 00:00:56,670
OK.

13
00:00:56,860 --> 00:00:58,470
So let's get to it.

14
00:00:58,480 --> 00:01:04,630
All right so I'm going to come over here to our project and we're going to be working in the main storyboard.

15
00:01:05,350 --> 00:01:12,260
And if you open up your assets folder you'll see that we have a image file here called the random mockup

16
00:01:12,310 --> 00:01:14,000
in case we go ahead and open that.

17
00:01:14,050 --> 00:01:20,110
And here we have a mockup so that we can reference it while we're designing out our UI OK.

18
00:01:20,320 --> 00:01:25,950
So like I said we're going to be focusing here on the right and down here in the bottom right corner.

19
00:01:25,990 --> 00:01:31,480
We have a couple of hex values and these correspond to the Gray and the orange color schemes that we're

20
00:01:31,480 --> 00:01:34,090
going to be using here in our app Okay.

21
00:01:34,360 --> 00:01:36,740
So you can reference those as needed.

22
00:01:36,940 --> 00:01:37,210
OK.

23
00:01:37,240 --> 00:01:38,760
Let's get to it.

24
00:01:38,770 --> 00:01:43,120
First off we are going to be working in the navigation controller so I'm going to select our first view

25
00:01:43,210 --> 00:01:49,330
controller here and I'm going to go to editor and we're to say embed in the open I don't have it selected

26
00:01:49,330 --> 00:01:49,630
here.

27
00:01:49,630 --> 00:01:55,810
So if your controller editor embed in and we're going embedded in the navigation controller what this

28
00:01:55,810 --> 00:01:59,920
does is this just simplifies some of the navigation for us.

29
00:01:59,920 --> 00:02:05,000
We are able to easily navigate back and forth between the two controllers.

30
00:02:05,000 --> 00:02:05,640
All right.

31
00:02:05,650 --> 00:02:10,810
So let's go ahead and I'm going to zoom in here a little bit and close the bottom pane here.

32
00:02:11,020 --> 00:02:15,610
And first thing we're going to do is we're going to customize our navigation bar a little bit.

33
00:02:15,670 --> 00:02:21,790
All right so here under the navigation controller seeing select your navigation bar and then select

34
00:02:21,790 --> 00:02:24,530
your attributes Inspector go over here.

35
00:02:24,780 --> 00:02:27,930
And what we're going to do is we're going to change the bartend.

36
00:02:28,210 --> 00:02:34,990
You just go ahead and click on that and then go to other and then the x value that we want is the one

37
00:02:34,990 --> 00:02:39,320
that we had in our preview here which is 3 6 3 6 3 6.

38
00:02:39,330 --> 00:02:45,060
Ok so this is that dark gray 3 6 3 6 3 6 press enter and there we go.

39
00:02:45,070 --> 00:02:47,820
And now we have changed the bartend color.

40
00:02:48,010 --> 00:02:49,000
Very nice.

41
00:02:49,000 --> 00:02:49,210
All right.

42
00:02:49,210 --> 00:02:55,270
So next thing we're gonna do is down here under the title text attributes we are going to change the

43
00:02:55,270 --> 00:03:04,650
title color and this one is going to be the orange color so we reference our mockup is f 5 8 2 0 C in

44
00:03:04,720 --> 00:03:09,920
case again that is 5 8 2 0 see.

45
00:03:10,090 --> 00:03:12,220
There we go and that gives that nice orange color.

46
00:03:12,400 --> 00:03:18,340
And lastly here under view we are going to change the tent to that same orange so now it should be in

47
00:03:18,340 --> 00:03:19,480
your recently used colors.

48
00:03:19,480 --> 00:03:26,550
Go ahead and select their and then go ahead and select our initial view controller over here and select

49
00:03:26,550 --> 00:03:28,910
the navigation item.

50
00:03:29,340 --> 00:03:33,360
And over here in the navigation item set the title to R and D.

51
00:03:33,540 --> 00:03:35,260
And there we go.

52
00:03:35,260 --> 00:03:37,680
So now we can see the title of our app right here.

53
00:03:37,680 --> 00:03:39,370
Random pertness.

54
00:03:39,420 --> 00:03:42,930
Next we're going to need a button to navigate to our new View Controller.

55
00:03:42,930 --> 00:03:49,080
So let's go ahead and add that just search for bar and you'll get to bar button item you can drag that

56
00:03:49,080 --> 00:03:52,060
Barbin item up into our navigation bar.

57
00:03:52,260 --> 00:03:59,430
Now we're meant to delete the item title and set an image and the image we want is the ADD thought icon.

58
00:03:59,760 --> 00:04:01,500
There we go.

59
00:04:01,530 --> 00:04:05,490
So now that we have our button to navigate to our new view control let's go ahead and add that view

60
00:04:05,490 --> 00:04:06,270
controller.

61
00:04:06,540 --> 00:04:12,740
So here I'm going to just search for a view controller that'll be up at the top and just drag that in

62
00:04:12,900 --> 00:04:13,170
there.

63
00:04:13,230 --> 00:04:14,090
Very nice.

64
00:04:15,110 --> 00:04:18,180
And then all we need to do is select our.

65
00:04:19,370 --> 00:04:25,960
And now all we need to do is select our button and control drag to our view controller and select show.

66
00:04:26,130 --> 00:04:27,720
All right very nice.

67
00:04:27,720 --> 00:04:30,480
Just go ahead and run this just to make sure it's working so far.

68
00:04:31,240 --> 00:04:32,170
All right looking good.

69
00:04:32,170 --> 00:04:35,400
So if I click on this we should navigate to our new view controller.

70
00:04:35,620 --> 00:04:41,620
Very nice and you'll see that with the navigation controller we get for free this back button that takes

71
00:04:41,620 --> 00:04:43,610
care of the navigation for us.

72
00:04:43,970 --> 00:04:45,190
So this is looking good.

73
00:04:45,190 --> 00:04:48,970
Just go ahead and reference our mockup again and see what we need.

74
00:04:48,970 --> 00:04:49,590
All right.

75
00:04:49,600 --> 00:04:54,370
Looks like we're going to need a segment control right here text to view here.

76
00:04:54,400 --> 00:04:59,480
And then another text view here and a subsequent add those elements.

77
00:04:59,610 --> 00:05:03,670
So I'm going to search for segment segment and control.

78
00:05:03,730 --> 00:05:05,800
It's going to drag that up here.

79
00:05:05,950 --> 00:05:13,480
Very good then we're going to search for text and we're going to use a text field for this one and then

80
00:05:13,510 --> 00:05:17,100
a text to you for the for the longer one.

81
00:05:17,320 --> 00:05:17,560
OK.

82
00:05:17,560 --> 00:05:20,830
And then lastly we're going to need a bun.

83
00:05:20,890 --> 00:05:21,830
Never give up.

84
00:05:22,390 --> 00:05:28,190
So I like to just kind of throw all of the elements on and then start to work with them as we go along.

85
00:05:28,480 --> 00:05:28,690
All right.

86
00:05:28,710 --> 00:05:34,180
So let's start up from the top and go down with our segmented control and go ahead and pull that up

87
00:05:34,180 --> 00:05:39,860
here and we're going to need to add some segments so with the segment control selected I mean the attributes

88
00:05:39,870 --> 00:05:43,170
and Specter we're going to bump up the segments to three.

89
00:05:43,240 --> 00:05:43,580
OK.

90
00:05:43,630 --> 00:05:50,080
So we have three categories that you can post into and they are again referencing our mockup funny serious

91
00:05:50,080 --> 00:05:51,360
and crazy.

92
00:05:51,550 --> 00:05:56,630
All right so let's go ahead and let's first hasn't constraints on this to get it to the right size.

93
00:05:56,650 --> 00:06:01,960
So here I'm going to add constraints and we were going to go from the left we're going to constrain

94
00:06:01,960 --> 00:06:10,050
it to 20 that's 16 from the top and from the right 20 as well and then give it a height of 30 to just

95
00:06:10,060 --> 00:06:13,200
give it a little bit more presence here.

96
00:06:13,200 --> 00:06:14,460
All right that looks good.

97
00:06:14,740 --> 00:06:17,470
And then let's go ahead and here under the alignment.

98
00:06:17,470 --> 00:06:21,470
Go ahead and select this one right here for the centered vertically.

99
00:06:21,550 --> 00:06:22,490
That looks good.

100
00:06:22,660 --> 00:06:25,410
And now let's go ahead and change first let's change that.

101
00:06:25,450 --> 00:06:26,690
I do not like that Bluett.

102
00:06:26,700 --> 00:06:30,160
And so here we're going to change it to the orange color that we've been using.

103
00:06:30,160 --> 00:06:32,430
So that should be under your recently used colors.

104
00:06:32,440 --> 00:06:33,050
Very good.

105
00:06:33,040 --> 00:06:34,450
That looks much nicer.

106
00:06:34,480 --> 00:06:38,030
And then let's go ahead and start changing our titles here.

107
00:06:38,290 --> 00:06:42,820
So here under segment zero first change that too funny.

108
00:06:42,820 --> 00:06:43,480
There we go.

109
00:06:43,480 --> 00:06:44,270
Very nice.

110
00:06:44,290 --> 00:06:52,320
And then we're going to select our second segment or segment one and that title is going to be serious.

111
00:06:52,330 --> 00:06:53,670
There you go.

112
00:06:53,710 --> 00:06:59,860
And then our third segment segment two that is going to be crazy.

113
00:06:59,860 --> 00:07:00,980
There we go.

114
00:07:01,480 --> 00:07:06,480
And the line that keeps getting a little bit weird so you can just slip that again right there.

115
00:07:06,490 --> 00:07:09,840
All right so now we have our segment to control all set up so that's good.

116
00:07:09,850 --> 00:07:11,650
Let's move on to our textfield.

117
00:07:11,830 --> 00:07:15,050
And here let's go ahead and remove the border.

118
00:07:15,140 --> 00:07:16,520
So is not going to have a border.

119
00:07:16,570 --> 00:07:19,280
Let's give it some placeholder text and we'll say user name.

120
00:07:19,290 --> 00:07:19,870
OK.

121
00:07:19,870 --> 00:07:25,030
So this is the textfield where the user can set its username that will show up in the post that they

122
00:07:25,090 --> 00:07:25,580
send up.

123
00:07:25,580 --> 00:07:32,050
All right now we're going to change the text color to a dark graceless dark gray color right here.

124
00:07:32,350 --> 00:07:33,290
That's good.

125
00:07:33,520 --> 00:07:41,230
And we'll change the font to a custom font and set that to Avenir next.

126
00:07:41,230 --> 00:07:42,180
There we go.

127
00:07:42,220 --> 00:07:42,710
Looks good.

128
00:07:42,710 --> 00:07:46,030
And this decrease the font size to about 14.

129
00:07:46,030 --> 00:07:47,290
I think that's good.

130
00:07:47,300 --> 00:07:48,640
I just announced give us some constraints.

131
00:07:48,640 --> 00:07:58,420
We're going to constrain it 20 from the left eight from the top and 20 from the right.

132
00:07:58,510 --> 00:07:59,820
There we go.

133
00:07:59,990 --> 00:08:04,830
And I think there's a little bit too close to the segment control actually so coming back to our Cyzon

134
00:08:04,880 --> 00:08:11,290
Specter Let's go heading select this constraint and we can edit it and let's change that to 12 let's

135
00:08:11,290 --> 00:08:13,270
say OK I think that looks better.

136
00:08:13,270 --> 00:08:19,230
All right so now with our text to you here let's go ahead and remove this text.

137
00:08:19,510 --> 00:08:22,420
Let's change the text color to that dark gray.

138
00:08:22,570 --> 00:08:26,340
And then let's go ahead and change our font to custom.

139
00:08:26,590 --> 00:08:29,280
And family is Avenir next.

140
00:08:29,440 --> 00:08:36,070
And just change the font size to 14 as well and say done now looks good and then see here this change

141
00:08:36,070 --> 00:08:40,290
the background to a light gray color.

142
00:08:40,600 --> 00:08:41,180
OK.

143
00:08:41,350 --> 00:08:46,780
And then actually I'm going to select that and then we're just going to drop the opacity down to about

144
00:08:46,860 --> 00:08:48,040
oh 15 percent.

145
00:08:48,040 --> 00:08:49,340
That looks good.

146
00:08:49,870 --> 00:08:52,350
And then let's go ahead and give this some constraints.

147
00:08:52,360 --> 00:08:59,670
So I'm going to say 20 and 12 and 20 from the right.

148
00:08:59,740 --> 00:09:03,450
And then we'll give it a height of 100.

149
00:09:03,450 --> 00:09:04,340
There we go.

150
00:09:04,810 --> 00:09:06,000
Lastly we have the button.

151
00:09:06,020 --> 00:09:08,620
So let's go ahead and move that up here a little bit.

152
00:09:08,800 --> 00:09:16,860
And this is going to say post can change the font to custom and Avenir.

153
00:09:16,960 --> 00:09:17,470
Let's see here.

154
00:09:17,470 --> 00:09:22,120
Avenir next and the style is medium and we'll say.

155
00:09:22,120 --> 00:09:22,920
Done.

156
00:09:23,050 --> 00:09:31,170
And then the text color that's going to be white and the background color is going to be our orange

157
00:09:31,170 --> 00:09:35,010
color case Slichter right here and select our orange color.

158
00:09:35,160 --> 00:09:35,580
There we go.

159
00:09:35,580 --> 00:09:36,480
Very nice.

160
00:09:36,480 --> 00:09:38,460
Let's go ahead and make this a little bit bigger.

161
00:09:38,550 --> 00:09:46,020
So I'm going to set the white width to 60 and the height to about 35.

162
00:09:46,500 --> 00:09:53,970
And then we need to center it horizontally in the container and said it's constraint to the element

163
00:09:53,970 --> 00:09:57,800
above it to 8 and there we go that looks good.

164
00:09:58,080 --> 00:09:59,250
I suppose maybe a little bit wider.

165
00:09:59,280 --> 00:10:05,160
So when it's like the button come back to our size inspector and change the width to let's try 80.

166
00:10:05,190 --> 00:10:06,090
See how that looks.

167
00:10:06,120 --> 00:10:07,060
I think it's better.

168
00:10:07,060 --> 00:10:08,040
All right that's looking pretty good.

169
00:10:08,040 --> 00:10:11,580
Let's check out our mockup to make sure that we are on target.

170
00:10:11,580 --> 00:10:14,650
And yeah that looks pretty good.

171
00:10:14,730 --> 00:10:19,400
You'll see here that we are missing the placeholder for the text of view and some rounded corners.

172
00:10:19,410 --> 00:10:21,860
But that's stuff that we're going to actually have to do in code.

173
00:10:21,960 --> 00:10:22,370
OK.

174
00:10:22,470 --> 00:10:24,470
So let's let's get to that.

175
00:10:24,510 --> 00:10:29,100
First off we're going to need a new view controller adults who have to file for our view controller

176
00:10:29,250 --> 00:10:30,540
for our new view controller.

177
00:10:30,780 --> 00:10:36,180
And while we're at it I'm going to change the name of the initial default view controller.

178
00:10:36,180 --> 00:10:41,070
I don't like it just being called just the view controller with X cotinine we have an awesome new refactor

179
00:10:41,640 --> 00:10:46,230
tool so we can double click on your view controller right here and then right click and say refactor

180
00:10:46,260 --> 00:10:53,390
and rename K and then we can just rename this and it will change the name everywhere for us and he's

181
00:10:53,410 --> 00:10:55,530
going to say mean visi.

182
00:10:55,540 --> 00:10:56,010
There that.

183
00:10:56,150 --> 00:10:58,340
Is the main view controller for our app.

184
00:10:58,380 --> 00:10:58,790
All right.

185
00:10:58,900 --> 00:11:04,650
Go and create a new view control center right click and say new file and then we're going to be doing

186
00:11:04,660 --> 00:11:11,600
in iOS cocoa touch class and I'm going to name this and thought visi.

187
00:11:11,640 --> 00:11:19,470
There we go and select next and create are there we are going to drag this up here next to the other

188
00:11:19,470 --> 00:11:20,500
main visi.

189
00:11:20,700 --> 00:11:25,890
And at this point let's go ahead and create some organization in our in our project somewhere right

190
00:11:25,890 --> 00:11:31,260
click and say new group and this is going to be we're going to follow the model view controller architecture.

191
00:11:31,260 --> 00:11:36,990
So this is going to be controller and create a new group.

192
00:11:37,040 --> 00:11:44,300
This is going to be you create a new group and this is going to be model there you.

193
00:11:44,390 --> 00:11:50,360
I'm going to drag our two controllers into the controller folder and there we go.

194
00:11:50,430 --> 00:11:53,940
Know But the main VC on top and that looks good.

195
00:11:53,940 --> 00:11:59,640
All right so now let's jump back in the main story board and we need to set the class of our new controller

196
00:12:00,090 --> 00:12:03,620
to our ADD thought visi.

197
00:12:04,140 --> 00:12:08,900
So now we can actually hook up these IP outlets in our new controller files.

198
00:12:08,910 --> 00:12:09,840
Let's go and do that.

199
00:12:09,840 --> 00:12:15,630
So with option held I'm going to click on the ADD thought Visi that will open up our assistant editor

200
00:12:16,200 --> 00:12:19,290
and right here under the class declaration.

201
00:12:19,320 --> 00:12:24,700
I'm going to make a section for outlets with a comment and then we're going to create our outlets.

202
00:12:24,700 --> 00:12:31,650
So I'm going to control drag from our segment control and I'm just going to say category segment.

203
00:12:31,680 --> 00:12:32,540
There we go.

204
00:12:32,940 --> 00:12:41,000
And then for the user name and we're into control and drag and say user name text cx t.

205
00:12:41,200 --> 00:12:45,350
Let's connect then going to control and direct from our text view.

206
00:12:45,810 --> 00:12:53,370
And I'm going to say I thought text and connect that that then I'm going to control and direct from

207
00:12:53,370 --> 00:12:59,750
our post button and I'm going to save the post button and connect that up.

208
00:12:59,810 --> 00:13:03,080
Now we're going to need an action for our post.

209
00:13:03,540 --> 00:13:10,770
So down here with me I'm going to delete this comment and this did receive a memory warning and then

210
00:13:10,770 --> 00:13:15,710
I'm going to control and direct from our post button and we're going to change it to an action.

211
00:13:15,810 --> 00:13:23,640
And this is going to be post button tapped and King and say connect and then we are also going to need

212
00:13:23,640 --> 00:13:28,650
an action for segment control so that we know when these segments have been changed.

213
00:13:28,670 --> 00:13:36,000
Want to control drag and select action and say category changed.

214
00:13:36,340 --> 00:13:37,570
And there we go.

215
00:13:37,920 --> 00:13:42,450
All right so I think we have all of our outlets and actions hooked up so let's go ahead and close our

216
00:13:42,450 --> 00:13:47,780
assistant editor and go to our ADD thought Visi does have to file.

217
00:13:48,150 --> 00:13:52,320
And the last thing we're going to do is a little bit of styling on our some of our elements.

218
00:13:52,350 --> 00:13:57,060
And our main story board we want our text to you here and our button to have a little bit of rounded

219
00:13:57,060 --> 00:13:57,710
corners.

220
00:13:57,790 --> 00:13:59,130
Let's go ahead and do that.

221
00:13:59,130 --> 00:14:01,050
It's right here in the view did load.

222
00:14:01,050 --> 00:14:13,670
We're going to say post button dot layer dot corner radius is equal to 4 and thought text dot layer

223
00:14:13,760 --> 00:14:18,980
let's not lay manager we want the layer that corner radius is equal to 4 as well.

224
00:14:19,380 --> 00:14:25,050
OK and the last thing we want to do is if we check out our mockup we see that the text view here has

225
00:14:25,050 --> 00:14:26,230
placeholder text.

226
00:14:26,370 --> 00:14:32,580
However the text view doesn't actually have a placeholder text property unfortunately.

227
00:14:32,660 --> 00:14:36,560
And so we're going to have to do is we're going have to do this manually a little bit of a hack here

228
00:14:36,560 --> 00:14:43,260
but we're going to do is we're going to set the text when we load it and then when we start to type

229
00:14:43,260 --> 00:14:47,190
into it we're going to delete that text and replace it with an empty string.

230
00:14:47,190 --> 00:14:47,830
OK.

231
00:14:48,030 --> 00:14:56,160
So we're going to say I thought text text is equal to manually put our placeholder text which is going

232
00:14:56,160 --> 00:15:07,190
to be my random thought dot dot dot and we'll change the font color to thought text not text color and

233
00:15:07,200 --> 00:15:14,400
we'll set that to a light gray colors and say you my color dot the light gray and let's run that and

234
00:15:14,400 --> 00:15:16,260
see how it's looking so far.

235
00:15:16,260 --> 00:15:20,700
All right let's go ahead and navigate to our second controller when that is looking good.

236
00:15:20,700 --> 00:15:26,420
We can change our segment control or we can type in here and our user name.

237
00:15:26,670 --> 00:15:33,070
But here if I start to type you see that it doesn't act like a placeholder text and delete itself.

238
00:15:33,090 --> 00:15:34,660
So we're gonna have to do that manually.

239
00:15:34,740 --> 00:15:38,940
OK so what we're going to have to need to do is we're going to need to know when someone clicks in this

240
00:15:38,940 --> 00:15:40,280
and starts to type.

241
00:15:40,410 --> 00:15:46,100
And for that we're going to need to use a protocol for the UI text you can delegate.

242
00:15:46,290 --> 00:15:51,900
So we're going to hear in our class we're going to extend and implement that so if you just type in

243
00:15:51,930 --> 00:15:59,280
you text you delegate and then we're going to set the delegate for our text view right here so we're

244
00:15:59,280 --> 00:16:03,430
going to see that text that delegate is equal to self.

245
00:16:04,110 --> 00:16:08,330
And then the method that we're going to need is text.

246
00:16:08,600 --> 00:16:11,310
You did begin editing.

247
00:16:11,430 --> 00:16:12,230
OK.

248
00:16:12,510 --> 00:16:18,150
So what this method does is anytime someone starts to type in that text to view this function will be

249
00:16:18,150 --> 00:16:25,290
called All right and so that's the functionality that we get by assigning the delegate and implementing

250
00:16:25,290 --> 00:16:28,490
the text view delegate we're able to get these methods.

251
00:16:28,510 --> 00:16:29,580
All right so what do we want to do.

252
00:16:29,580 --> 00:16:36,090
We want to remove the placeholder text and then we're going to change the text color to a darker gray

253
00:16:36,090 --> 00:16:36,560
color.

254
00:16:36,660 --> 00:16:37,830
OK that's what we're going to do.

255
00:16:37,830 --> 00:16:43,580
We're going to say text you that text is equal to an empty string.

256
00:16:43,830 --> 00:16:46,320
And then we're going to say text if you dot text.

257
00:16:46,410 --> 00:16:53,070
Color is equal to eye color dot dot dark gray.

258
00:16:53,100 --> 00:16:57,630
All right I'm going to remove this comment and everything else looks good.

259
00:16:57,630 --> 00:17:02,290
I think it's going to run it in case some way to navigate to our new controller.

260
00:17:02,360 --> 00:17:08,980
And if I start to type a random thought then delete the placeholder text and changes the text colors.

261
00:17:08,980 --> 00:17:11,010
So yeah this is looking really good guys.

262
00:17:11,010 --> 00:17:13,470
All right so we're making great progress.

263
00:17:13,470 --> 00:17:18,300
We have our UI all set up so that in the next lesson we can actually start working with fire store and

264
00:17:18,300 --> 00:17:20,540
saving data to our database.

265
00:17:20,560 --> 00:17:23,030
I hope you're excited for that and I'll see you in the next one.