1
00:00:08,080 --> 00:00:12,330
Hey everybody what's going on this is Caleb with Deb's Lopes dot com and in this video we're going to

2
00:00:12,330 --> 00:00:17,940
build some custom view subclasses to customize the appearance of several UI kit elements.

3
00:00:17,940 --> 00:00:21,540
Let me pull open the simulator to tell you what I'm talking about.

4
00:00:21,630 --> 00:00:22,470
Are you the button here.

5
00:00:22,470 --> 00:00:25,440
Has this really cool rounded border.

6
00:00:25,500 --> 00:00:30,720
We're going to create a custom subclass of UI button that's going to allow us to create buttons with

7
00:00:30,720 --> 00:00:32,150
that cool border.

8
00:00:32,160 --> 00:00:36,410
We're also going to create a cool subclass here for our search bar.

9
00:00:36,420 --> 00:00:40,580
It's going to be a subclass of UI textfield and we're going to create that as well.

10
00:00:40,660 --> 00:00:41,580
OK very cool.

11
00:00:41,580 --> 00:00:43,670
So let's dive right into it.

12
00:00:43,710 --> 00:00:50,610
Pull open your X code project and in the view folder we're going to right click new file and we're going

13
00:00:50,610 --> 00:00:52,530
to start with our button.

14
00:00:52,620 --> 00:00:53,120
OK.

15
00:00:53,310 --> 00:00:55,780
Now go ahead and select cocoa touch class.

16
00:00:55,800 --> 00:00:59,910
This is going to be a subclass of course of UI button like so.

17
00:00:59,910 --> 00:01:04,150
And we're going to call this a rounded border button.

18
00:01:04,410 --> 00:01:04,740
OK.

19
00:01:04,770 --> 00:01:07,770
Because it's a button that has a rounded border obviously.

20
00:01:07,980 --> 00:01:13,440
So go ahead and select next and create it into your project.

21
00:01:13,440 --> 00:01:14,030
There we go.

22
00:01:14,040 --> 00:01:16,100
So close the assistant editor.

23
00:01:16,290 --> 00:01:20,430
And what we're going to do is actually get rid of this comment to add boilerplate code and we're just

24
00:01:20,430 --> 00:01:22,420
going to call awake from NIB.

25
00:01:23,100 --> 00:01:29,700
And basically awake from NIB is well it says here prepares the receiver for service after it has been

26
00:01:29,700 --> 00:01:33,180
loaded from an interface builder archive or nib file.

27
00:01:33,180 --> 00:01:38,220
Basically this is like view to load for custom views.

28
00:01:38,250 --> 00:01:42,960
Can't think of it like that it's called after the view is loaded into the screen so we can customize

29
00:01:42,960 --> 00:01:46,290
the appearance of this UI button in this class.

30
00:01:46,290 --> 00:01:46,910
So go ahead.

31
00:01:46,950 --> 00:01:49,780
I'm just going to get rid of this extra space we don't need.

32
00:01:49,920 --> 00:01:51,460
And here we go.

33
00:01:51,480 --> 00:01:57,660
So we're going to go ahead and first call super awake from NIB and now we're going to go ahead and think

34
00:01:57,870 --> 00:02:00,170
we need to set a background color.

35
00:02:00,480 --> 00:02:05,850
We need to set a border color a border with and a corner radius for this button.

36
00:02:05,850 --> 00:02:07,470
Let's begin with the background color.

37
00:02:07,470 --> 00:02:13,250
So we're going to go ahead and call background color and set it equal to a color literal.

38
00:02:13,250 --> 00:02:18,750
This is one of my favorite things about X code 9 is that you can select a color literal and you can

39
00:02:18,750 --> 00:02:25,170
go in and you can choose a color and it's the same thing as typing you eye color dot blah blah blah.

40
00:02:25,230 --> 00:02:28,280
It works just like a normal color which is cool.

41
00:02:28,290 --> 00:02:30,840
Now I want the background of my button to be clear.

42
00:02:30,960 --> 00:02:35,580
So what I'm going to do actually is I'm going to go ahead and just choose like white and then go into

43
00:02:35,580 --> 00:02:38,940
my R.G. B slider's and set the opacity to zero.

44
00:02:38,940 --> 00:02:41,600
And now I have clear which is pretty neat.

45
00:02:41,820 --> 00:02:45,760
So background color is now set to clear beautiful.

46
00:02:45,780 --> 00:02:52,020
Next up we're going to go ahead and access the corner radius we're going to round our button and we're

47
00:02:52,020 --> 00:02:53,350
going to do it mathematically.

48
00:02:53,400 --> 00:02:57,120
So go ahead and type layer dot corner radius.

49
00:02:57,120 --> 00:02:59,070
And now we need to think we have a rectangle.

50
00:02:59,100 --> 00:03:01,370
If you can imagine a rectangle shape.

51
00:03:01,860 --> 00:03:08,520
We need to basically make it so that the edges are perfectly rounded and think about what it would take

52
00:03:08,700 --> 00:03:12,270
to turn a square into a circle.

53
00:03:12,300 --> 00:03:18,390
We could basically take each corner and round it a little bit more until each corner round perfectly

54
00:03:18,390 --> 00:03:19,360
to a circle.

55
00:03:19,440 --> 00:03:25,440
And if you were to segment it in half you would have a perfect arc going from one quarter of the circle

56
00:03:25,440 --> 00:03:26,230
to the other.

57
00:03:26,400 --> 00:03:31,560
And that's basically going to the midway point of the square right the height of the square and the

58
00:03:31,560 --> 00:03:37,860
width since since it's a square but with a rectangle shape what we can do is we can take whatever value

59
00:03:37,860 --> 00:03:40,640
the height is and we can divide it by two.

60
00:03:40,650 --> 00:03:43,980
So if we had a rectangle that was 10 high.

61
00:03:44,280 --> 00:03:46,720
It would only take five to get to the middle.

62
00:03:46,800 --> 00:03:52,950
And so that's the radius we want to round each corner so that it makes a nice perfectly rounded corner.

63
00:03:52,950 --> 00:04:01,860
So on the corner radius what we're going to call is frame height divided by two and that's going to

64
00:04:01,860 --> 00:04:03,480
take the frame of our button.

65
00:04:03,480 --> 00:04:08,950
Cut it in half and then that is the perfect corner radius to make the edges rounded.

66
00:04:09,030 --> 00:04:10,230
Pretty neat.

67
00:04:10,230 --> 00:04:16,400
Now we need to go ahead and give it a border So let's set a thickness for our border by typing layer

68
00:04:16,610 --> 00:04:20,960
up border with and we're going to set it to be equal to three.

69
00:04:21,070 --> 00:04:22,560
OK that's a nice thickness.

70
00:04:22,560 --> 00:04:25,780
That's the exact same thickness I used in the simulator here.

71
00:04:25,950 --> 00:04:30,930
So we're going to go ahead and use the same thickness and a border is not a border without a color so

72
00:04:30,930 --> 00:04:34,610
we need to go ahead and set layer border color.

73
00:04:34,620 --> 00:04:38,520
And again we can use a color literal of white.

74
00:04:38,520 --> 00:04:39,690
Pretty cool.

75
00:04:39,690 --> 00:04:43,660
So now our rounded border button is good to go.

76
00:04:43,680 --> 00:04:46,080
We're going to go ahead and enter main storyboard.

77
00:04:46,080 --> 00:04:51,790
Go ahead and select that button and we're going to give it a class of rounded border button.

78
00:04:51,790 --> 00:04:58,340
Ok press enter and as you can see the class is updated and we cannot yet see the actual view.

79
00:04:58,350 --> 00:05:02,550
Updating just yet because we have not set up our table view but just trust me.

80
00:05:02,550 --> 00:05:03,240
It's good to go.

81
00:05:03,240 --> 00:05:04,620
I promise.

82
00:05:04,620 --> 00:05:10,100
And now we're going to go ahead and set up the subclass for the rounded text field that I showed you

83
00:05:10,130 --> 00:05:13,920
in the search View Controller right here this one.

84
00:05:13,920 --> 00:05:14,640
All right.

85
00:05:14,720 --> 00:05:15,560
So let's do that.

86
00:05:15,560 --> 00:05:18,020
That's going to actually go into search.

87
00:05:18,020 --> 00:05:19,910
But let's create the subclass first.

88
00:05:19,910 --> 00:05:26,360
So go ahead and right click on View and let's go ahead and click new file Cocco touch class and the

89
00:05:26,360 --> 00:05:29,340
subclass is UI textfield.

90
00:05:29,810 --> 00:05:30,870
All right.

91
00:05:31,070 --> 00:05:40,460
Now let's go ahead and let's name this rounded border textfield and go ahead and create it just like

92
00:05:40,460 --> 00:05:42,440
so very cool.

93
00:05:42,620 --> 00:05:47,260
So now what we're gonna do is we're going to go ahead and set up a few different properties.

94
00:05:47,570 --> 00:05:52,790
The border for one we're going to set up the radius and we're also going to set up what's called an

95
00:05:52,790 --> 00:05:54,440
attributed placeholder.

96
00:05:54,440 --> 00:06:02,330
And that's going to allow us to customize the font and the text color of the placeholder which you cannot

97
00:06:02,330 --> 00:06:07,430
do by default unless you turn on attributed placeholder and I want to show you how to do it in code

98
00:06:07,430 --> 00:06:08,600
because it's pretty cool.

99
00:06:08,600 --> 00:06:13,620
So go ahead and call awake from NIB call super awake from NIB.

100
00:06:14,180 --> 00:06:18,790
And inside of a week from now I'm going to get rid of this white space.

101
00:06:18,920 --> 00:06:24,770
We're going to go ahead and just set the background color by typing background color and we're going

102
00:06:24,770 --> 00:06:32,480
to set that to be equal to white like so by typing color literal and there's white already good.

103
00:06:32,480 --> 00:06:38,270
Next we're going to go ahead and set the corner radius just like before by typing layer corner radius

104
00:06:38,630 --> 00:06:43,240
and we're going to set it to be equal to frame height divided by two.

105
00:06:43,250 --> 00:06:46,080
So we get a nice rounded corner radius.

106
00:06:46,370 --> 00:06:48,320
Then let's think what do we need to do.

107
00:06:48,320 --> 00:06:54,410
We need to set a border color so layer wups border color.

108
00:06:54,440 --> 00:07:00,440
Let's set that to also be a color literal but we want to use that nice blue color we've been using.

109
00:07:00,470 --> 00:07:01,670
So select that here.

110
00:07:01,790 --> 00:07:09,320
And again if you want to use that it is 4 7 7 6 E-6 and below that we're going to set a border with

111
00:07:09,590 --> 00:07:12,920
three just like we did with our rounded border button.

112
00:07:12,920 --> 00:07:18,340
So we have a consistent theme here so layer border with equals three.

113
00:07:18,550 --> 00:07:19,460
All right.

114
00:07:19,460 --> 00:07:23,480
So that's great and all but I said that we were going to set up an attributed placeholder and let's

115
00:07:23,480 --> 00:07:25,070
do that in code.

116
00:07:25,070 --> 00:07:31,930
So we're going to type let placeholder equals and s attributed string already.

117
00:07:32,150 --> 00:07:38,390
And if you go ahead and put it parentheses you can see there are tons of ways to initialize an attributed

118
00:07:38,570 --> 00:07:39,570
string.

119
00:07:39,590 --> 00:07:44,540
We want to select the one with a string of course and attributes.

120
00:07:44,540 --> 00:07:47,350
That way we can set up all the custom attributes we want.

121
00:07:47,360 --> 00:07:49,220
So go ahead and select that.

122
00:07:49,370 --> 00:07:55,020
We're going to pass it self dot placeholder K so whatever we have set as a placeholder.

123
00:07:55,040 --> 00:07:56,780
That's what's going to show up right.

124
00:07:56,780 --> 00:08:03,610
We can set the text but natively unless we explicitly choose an attributed placeholder we can not set

125
00:08:03,610 --> 00:08:04,700
up a custom placeholder.

126
00:08:04,700 --> 00:08:11,570
So as you can see there is a dictionary here with a key an s attributed string key and a type any or

127
00:08:11,570 --> 00:08:13,510
sorry a value of any.

128
00:08:13,640 --> 00:08:19,400
We're going to go ahead and pass it a dictionary here and we're going to actually access the NSA attributed

129
00:08:19,400 --> 00:08:25,950
string key property by typing s attributed string and going down to NSA attributed string T.

130
00:08:25,970 --> 00:08:28,050
Now this is an enumeration.

131
00:08:28,100 --> 00:08:33,770
And so it's going to allow us to go ahead and push dot and we can access all these properties which

132
00:08:33,770 --> 00:08:35,180
is really cool.

133
00:08:35,180 --> 00:08:40,490
So we're going to set the foreground color because that's going to allow us to actually set the text

134
00:08:40,490 --> 00:08:44,900
color which is exactly what we want but remember this is a dictionary.

135
00:08:44,900 --> 00:08:47,140
So foreground color is the key.

136
00:08:47,270 --> 00:08:52,540
And for the value we're going to go ahead and just call a color literal and set it to be blue.

137
00:08:52,710 --> 00:08:52,910
OK.

138
00:08:52,910 --> 00:08:59,150
Because look at my example here on the simulator if you take a look you can see the text is the same

139
00:08:59,150 --> 00:09:01,810
blue color as the border and the rest of the app.

140
00:09:01,820 --> 00:09:09,560
Now the textfield itself has what's called an attributed placeholder and it is of type and as attributed

141
00:09:09,560 --> 00:09:16,040
strings so to set the attributed placeholder in code all we have to do is set it to be equal to the

142
00:09:16,040 --> 00:09:17,900
placeholder we just created.

143
00:09:18,170 --> 00:09:23,390
And now we have a custom text field that we can use as our search bar.

144
00:09:23,390 --> 00:09:24,600
So let's go put it in.

145
00:09:24,710 --> 00:09:28,870
Let's set the class and then let's go ahead and see if it worked if what we did worked.

146
00:09:28,920 --> 00:09:33,200
We're going to actually build out the search AVC in it in a video to come.

147
00:09:33,200 --> 00:09:37,200
But let's go ahead and let's just set up the textfield now I'm just really excited to see it work.

148
00:09:37,280 --> 00:09:39,320
So a search for you I text field.

149
00:09:39,320 --> 00:09:41,030
Go ahead and dragged into place.

150
00:09:41,180 --> 00:09:46,900
And you know while we're here let's set the background color back to white that looks better.

151
00:09:47,360 --> 00:09:51,550
And let's go ahead and let's set this about here I think that looks pretty good.

152
00:09:51,920 --> 00:09:57,380
But if I remember correctly versey is also in the simulator screen.

153
00:09:57,380 --> 00:09:58,580
So we need to set that as well.

154
00:09:58,580 --> 00:10:04,850
So let's go ahead and copy this and then let's paste it into here and let's do our best to replicate

155
00:10:04,850 --> 00:10:06,070
the constraints.

156
00:10:06,080 --> 00:10:08,770
I believe it is eight and 10 and 10.

157
00:10:08,840 --> 00:10:09,430
OK.

158
00:10:09,770 --> 00:10:10,690
Very cool.

159
00:10:10,940 --> 00:10:13,970
So this is let me move this down.

160
00:10:14,010 --> 00:10:19,650
We're going to set this to be 8 from the top not 9 10 and 10.

161
00:10:19,790 --> 00:10:24,440
And let's give it a fixed height of 30 just so it's a nice even number.

162
00:10:24,650 --> 00:10:25,660
Beautiful.

163
00:10:25,880 --> 00:10:30,920
And now let's go ahead and set up our textfield here to stretch from left to right.

164
00:10:30,950 --> 00:10:37,730
So we're going to pin this 20 from the left 20 from the right and let's pin this 20 as well from the

165
00:10:37,730 --> 00:10:38,980
versey label.

166
00:10:38,990 --> 00:10:41,770
Let's give it a fixed height of 30.

167
00:10:41,810 --> 00:10:42,860
That's probably good.

168
00:10:43,160 --> 00:10:44,930
And let's set those constraints.

169
00:10:44,930 --> 00:10:46,180
Very cool.

170
00:10:46,200 --> 00:10:53,600
So now let's go ahead and let's set up the font so we're going to go ahead and set custom Avenir next.

171
00:10:53,630 --> 00:10:55,370
And let's set it just to be regular.

172
00:10:55,370 --> 00:10:56,120
That's fine.

173
00:10:56,330 --> 00:10:58,210
Size 16 is probably good.

174
00:10:58,220 --> 00:11:03,180
And let's set the placeholder to say enter a search query.

175
00:11:03,350 --> 00:11:04,400
Dot dot dot.

176
00:11:04,880 --> 00:11:07,190
And of course we can center that font.

177
00:11:07,280 --> 00:11:08,510
That looks pretty good.

178
00:11:08,510 --> 00:11:14,000
Now remember we've already set the placeholder text to be blue but we want the actual font itself to

179
00:11:14,000 --> 00:11:15,180
be blue when we're searching.

180
00:11:15,280 --> 00:11:15,860
OK.

181
00:11:16,160 --> 00:11:21,710
That will make it so that we don't have black text with the rest of it's blue.

182
00:11:21,710 --> 00:11:22,910
It might not look very good.

183
00:11:23,180 --> 00:11:25,910
So the font is set the constraints are set.

184
00:11:25,910 --> 00:11:28,240
Now all we need to do is to set the identity.

185
00:11:28,280 --> 00:11:35,690
So select the text field select the identity inspector and set this to be equal to rounded border textfield.

186
00:11:35,690 --> 00:11:40,940
Now we can go ahead and build and run to see if this worked if our border worked if our color for the

187
00:11:40,940 --> 00:11:43,090
text placeholder worked.

188
00:11:43,100 --> 00:11:47,690
So let's build it to iPhone 7 and let's see how we did.

189
00:11:47,690 --> 00:11:49,160
Here we go.

190
00:11:49,160 --> 00:11:50,970
Looks like building is going to work just fine.

191
00:11:50,990 --> 00:11:51,920
Beautiful.

192
00:11:52,430 --> 00:11:58,970
And here's our version of the app we've got in just a second we've got our table view and we have our

193
00:11:58,970 --> 00:12:01,620
search bar and look at that.

194
00:12:01,700 --> 00:12:03,440
That's exactly how we wanted it.

195
00:12:03,440 --> 00:12:04,780
We rounded the edge.

196
00:12:04,820 --> 00:12:10,940
We set a border we set the placeholder text and now let's see what happens when we type our X Swift.

197
00:12:11,510 --> 00:12:12,200
Beautiful.

198
00:12:12,200 --> 00:12:13,130
Look at that.

199
00:12:13,160 --> 00:12:17,840
That is so cool we can type in it and we can delete it and we have our attributed placeholder.

200
00:12:17,840 --> 00:12:19,260
That is really awesome.

201
00:12:19,260 --> 00:12:23,180
And the only thing I'm noticing I'm not sure if you see this but if you zoom in you can see there's

202
00:12:23,180 --> 00:12:26,250
a little hairline border around the textfield.

203
00:12:26,310 --> 00:12:31,350
Hey we're going to get rid of that by going in and simply selecting no border.

204
00:12:31,370 --> 00:12:35,360
Now when I build and run you'll notice that little hairline border is going to be gone.

205
00:12:35,360 --> 00:12:39,900
We're not going to be able to see it which is exactly what we are hoping for.

206
00:12:39,920 --> 00:12:43,310
So here we go search and look at that.

207
00:12:43,340 --> 00:12:44,030
It's gone.

208
00:12:44,030 --> 00:12:47,900
So we have now successfully set up a custom view subclasses.

209
00:12:47,900 --> 00:12:50,980
If it worked for the textfield you can trust that it works on the button.

210
00:12:51,140 --> 00:12:56,630
We'll see that later when we actually create the subclass for our trending feed cell and we're going

211
00:12:56,630 --> 00:12:57,740
to do that very soon.

212
00:12:57,740 --> 00:12:58,580
Don't you worry.

213
00:12:58,610 --> 00:13:03,410
So let's go ahead and head over to the next video where we're going to build our get hub repository

214
00:13:03,470 --> 00:13:08,660
model layer and then following that we're going to actually set up our feed cells and get get ready

215
00:13:08,660 --> 00:13:12,800
to connect the outlets so we can start passing in some dummy data to test our table view.

216
00:13:12,800 --> 00:13:15,410
So let's head over that way and you there.