1
00:00:02,780 --> 00:00:07,030
It is what's up everyone.

2
00:00:07,080 --> 00:00:07,500
Right.

3
00:00:07,590 --> 00:00:09,150
And Deb Lopes dot com.

4
00:00:09,170 --> 00:00:14,180
And in this video we're going to start our swoosh app and we're going to learn a little bit about user

5
00:00:14,180 --> 00:00:19,430
interface and Interface Builder some of the caveats that come with that and how you should overall set

6
00:00:19,430 --> 00:00:21,020
up your project for user interface.

7
00:00:21,020 --> 00:00:23,240
And we're going to build a custom control.

8
00:00:23,570 --> 00:00:25,940
So we've got some designs here.

9
00:00:26,300 --> 00:00:34,200
As you can see and the idea behind this app is it's a an app where you can get with other people and

10
00:00:34,350 --> 00:00:35,930
play basketball games pickup games.

11
00:00:35,940 --> 00:00:40,100
And so we're going to build out all the features and location and things like that.

12
00:00:40,110 --> 00:00:45,660
But it's always important at least for me and in teaching to see real world apps and how you might actually

13
00:00:45,660 --> 00:00:48,030
build things for a consumer facing application.

14
00:00:48,040 --> 00:00:50,450
So we're going to do everything for this app.

15
00:00:50,460 --> 00:00:54,800
And of course in this course as you might do professionally we're not going to cut any corners.

16
00:00:54,840 --> 00:00:56,790
So let's go ahead to get started.

17
00:00:56,790 --> 00:01:03,450
First things first is as always we want to create a repository for this you'll want to do the same here

18
00:01:04,020 --> 00:01:09,740
and I'm going to create one for my course iOS 11 here and I'm going to create a repository and I'll

19
00:01:09,810 --> 00:01:14,160
call this app dash swoosh.

20
00:01:14,670 --> 00:01:16,890
OK great repository.

21
00:01:17,220 --> 00:01:21,720
And all I'm going to do here is grab this S-sh key to get this here.

22
00:01:21,720 --> 00:01:27,320
Now of course you can download the source code and check out different branches for the final code.

23
00:01:27,480 --> 00:01:30,470
But it's good for you to follow along and create your own branches on your own.

24
00:01:30,470 --> 00:01:32,870
Get help or bitbucket repository.

25
00:01:32,880 --> 00:01:40,600
And so what I'm going to do now is make sure I'm in my apps directory so present working directory.

26
00:01:40,620 --> 00:01:41,890
I am in the Swiss directory.

27
00:01:41,910 --> 00:01:45,800
All I'm going to do is say get clone and I'm going to clone the repo

28
00:01:48,730 --> 00:01:51,130
and I've Colona empty repository which is fine.

29
00:01:51,130 --> 00:01:54,240
I'm going to CD into the app swoosh and there we go.

30
00:01:54,400 --> 00:01:58,930
So what I'm going to do now is I'm going to create an empty X code project here or a default X code

31
00:01:58,930 --> 00:02:05,710
project so I'm to open the X code beta for the X codein if X code is released of course use the published

32
00:02:05,710 --> 00:02:06,250
version.

33
00:02:06,580 --> 00:02:11,800
And what we'll do is we'll create a new project single view application is what we want it's just going

34
00:02:11,800 --> 00:02:20,320
to have one view that gets other views click next and we're going to call this app swoosh and you can

35
00:02:20,320 --> 00:02:23,560
fill in in your own information here which is fine if you have a team that's great you may not have

36
00:02:23,560 --> 00:02:27,190
a team which is fine and of course Swift is very important.

37
00:02:27,190 --> 00:02:33,790
Click next and what I'm going to do is I'm going to put this in its proper folder so courses and lessons

38
00:02:33,960 --> 00:02:39,630
and you can put yours wherever you want swoosh swoosh and I'm going to put it in right here.

39
00:02:40,850 --> 00:02:41,270
Perfect.

40
00:02:41,270 --> 00:02:43,410
So here's my project ready to go.

41
00:02:44,450 --> 00:02:47,060
Here we have the default project information here.

42
00:02:47,060 --> 00:02:50,420
Nothing is overly important to play with at this point in time.

43
00:02:50,540 --> 00:02:54,800
But there are some things that you can do YOU CAN MAKE IT sport upside down or turn off landscape or

44
00:02:54,800 --> 00:02:58,880
turn you know turn it on and we're just gonna leave all these things as default here.

45
00:02:58,940 --> 00:03:01,360
And so you're going to notice a few files here in your project.

46
00:03:01,400 --> 00:03:05,300
The app delegate which of course is the starting point for your application.

47
00:03:05,300 --> 00:03:09,950
We aren't going to touch that we'll leave that as is and it's giving us a default view controller does

48
00:03:09,950 --> 00:03:10,560
Swift.

49
00:03:10,610 --> 00:03:13,790
This is the code for the default view controller that your app loads with.

50
00:03:13,820 --> 00:03:17,630
And of course all apps have a default view controller.

51
00:03:18,040 --> 00:03:20,820
OK so that's there and that's important to understand.

52
00:03:20,900 --> 00:03:25,850
And then we've got our main storyboard and this is where the default view controller has been placed

53
00:03:25,850 --> 00:03:26,590
for us.

54
00:03:26,690 --> 00:03:31,820
OK we let that happen automatically and we could have created all this from scratch included a storyboard

55
00:03:31,830 --> 00:03:34,130
and all those different things and dragged a view controller on here.

56
00:03:34,130 --> 00:03:39,070
But the defaults are all fine for now because we want to get up and going building and out.

57
00:03:39,620 --> 00:03:44,510
And so we got a view here which is the main view and that's where we're going to drag and drop other

58
00:03:44,510 --> 00:03:45,090
views on.

59
00:03:45,230 --> 00:03:48,140
And you can hover over this little icon here at the bottom right.

60
00:03:48,140 --> 00:03:49,860
This is the object library.

61
00:03:50,180 --> 00:03:53,350
And this is where we're actually drags some views onto the screen.

62
00:03:53,540 --> 00:03:58,640
OK but before we can drive views we got to look at our layout design here and see what we're actually

63
00:03:58,640 --> 00:03:59,660
supposed to build.

64
00:03:59,740 --> 00:04:01,700
And so we're going to build this first screen here.

65
00:04:01,730 --> 00:04:03,180
It's the welcome screen.

66
00:04:03,380 --> 00:04:05,150
And notice how there's a logo.

67
00:04:05,210 --> 00:04:06,560
There's some text here.

68
00:04:06,710 --> 00:04:08,110
There's a background image.

69
00:04:08,150 --> 00:04:09,920
There's more text here and there's a button.

70
00:04:09,920 --> 00:04:17,200
So I'd say one two three four five six six elements on the screen probably that we need to build.

71
00:04:17,360 --> 00:04:22,340
And of course we don't have the assets in our project yet for the swish logo or for the background.

72
00:04:22,340 --> 00:04:24,970
So we're going need to grab those now as well.

73
00:04:25,340 --> 00:04:33,170
So what I want to do is I'm going to go into my Dropbox folder here and we're going to go into courses

74
00:04:33,170 --> 00:04:40,130
and lessons iOS 11 app designs and here's the swooshed designs and the assets have been exported for

75
00:04:40,130 --> 00:04:41,070
us already.

76
00:04:41,210 --> 00:04:41,800
Okay.

77
00:04:42,020 --> 00:04:48,740
And one thing I want to point out here is that we've exported these assets within at 2 x 3 x although

78
00:04:48,740 --> 00:04:52,990
it looks like we missed it for the logo here which I'll add that as well too.

79
00:04:53,120 --> 00:04:59,330
But basically when it comes to graphics and Iowa development if you just implement one graphic it's

80
00:04:59,330 --> 00:05:01,200
going to be used for all screen densities.

81
00:05:01,280 --> 00:05:05,950
And so the non 2x and non 3x that's your lowest resolution file.

82
00:05:05,980 --> 00:05:06,290
OK.

83
00:05:06,290 --> 00:05:11,840
And those are used on older phones like the iPhone 4 and for us as phones gain more resolution.

84
00:05:11,840 --> 00:05:17,690
The bigger images are necessary to always no matter what happens at 2 x at least which is usually double

85
00:05:17,690 --> 00:05:19,330
the size of the one x.

86
00:05:19,340 --> 00:05:23,990
It doesn't have to be you can just make it bigger and it will use automatically but it's good for you

87
00:05:23,990 --> 00:05:25,710
to make it double and at 3 x.

88
00:05:25,710 --> 00:05:31,100
As far as brand new devices like the iPhone 7 plus which have ultra resolutions and that's important

89
00:05:31,100 --> 00:05:33,740
as well to providing all three graphics files.

90
00:05:33,740 --> 00:05:39,170
And if you don't what you'll notice is you'll notice some blurriness on the images if you don't which

91
00:05:39,170 --> 00:05:43,820
is which will make your projects not look so nice and your apps.

92
00:05:43,820 --> 00:05:48,020
So what we're going to do here is we're going to in our code project here in ex-coach we're going to

93
00:05:48,020 --> 00:05:49,730
click the assets folder.

94
00:05:49,850 --> 00:05:53,460
And what I'm going to do is just select all these things here command a.

95
00:05:53,600 --> 00:05:55,350
I'm just going to drag them over here.

96
00:05:56,100 --> 00:05:56,770
OK.

97
00:05:57,140 --> 00:06:01,990
Notice how it didn't Adul the at 2 x 3 x on here it just it dragged in the names of the files.

98
00:06:02,000 --> 00:06:07,100
Well it's because it recognizes that file format and places them in the appropriate spots and that's

99
00:06:07,100 --> 00:06:11,690
all you have to do if you want to support a really high resolution device like the iPhone 7 plus all

100
00:06:11,690 --> 00:06:16,790
you had to do is the at 3 x not 2 x and it put it into the slots automatically and at runtime it will

101
00:06:16,790 --> 00:06:18,070
choose the appropriate image.

102
00:06:18,080 --> 00:06:20,840
No code is necessary which is really awesome.

103
00:06:20,840 --> 00:06:25,620
So again you do the at 2 x 3 x and then the file name.

104
00:06:25,620 --> 00:06:26,630
OK file type.

105
00:06:26,630 --> 00:06:27,250
Excuse me.

106
00:06:27,440 --> 00:06:32,360
So looks like we're good to go there and the next that we want to do is start building out our user

107
00:06:32,360 --> 00:06:32,930
interface.

108
00:06:32,930 --> 00:06:39,740
So let's go to the main storyboard and to build out a graphic on the background we need to use an image.

109
00:06:39,940 --> 00:06:44,060
So I'm going to type an image here at the bottom and this is called an image view or UI image view.

110
00:06:44,450 --> 00:06:52,430
And what we're going to do is drag it onto the screen like so OK and there's an image of you and then

111
00:06:52,430 --> 00:06:56,840
what I'm going to do is hover over this icon right here in the middle this is the attributes inspector

112
00:06:57,890 --> 00:06:59,880
and we're just going to select an image.

113
00:07:00,080 --> 00:07:00,840
OK.

114
00:07:01,550 --> 00:07:04,780
And welcome screen Biji.

115
00:07:04,800 --> 00:07:06,750
Now here's our image.

116
00:07:06,870 --> 00:07:09,190
And notice how we're viewing currently as an iPhone 7.

117
00:07:09,210 --> 00:07:10,980
At least mine is yours may be different.

118
00:07:11,010 --> 00:07:16,860
So if we want to see how it looks in different devices we can click that and it will change the device

119
00:07:16,860 --> 00:07:17,910
that you're viewing it on.

120
00:07:17,970 --> 00:07:20,840
And notice here on the seven plus it's not going the full screen.

121
00:07:20,850 --> 00:07:22,770
We're going to have to address that later on.

122
00:07:23,010 --> 00:07:26,250
So we're going to work out the iPhone 7 right now so it looks nice.

123
00:07:26,250 --> 00:07:30,690
So what we're going to do is using the iPhone 7 we're going to build all of our interface elements and

124
00:07:30,690 --> 00:07:34,740
then in the subsequent video we'll actually go and figure out how to get it working on all the screen

125
00:07:35,100 --> 00:07:37,220
sizes so cool.

126
00:07:37,380 --> 00:07:38,520
So we got the image here.

127
00:07:38,520 --> 00:07:39,540
We've selected the image.

128
00:07:39,540 --> 00:07:44,980
One thing I do want to say is on this content mode scale to fill is not ever.

129
00:07:45,000 --> 00:07:48,720
Usually what you want whether it's going to do is it's going to scale your images to fill up the space

130
00:07:48,990 --> 00:07:50,180
but it may stretch them.

131
00:07:50,250 --> 00:07:55,190
And as we know stretched images never look good on apps ever ever ever.

132
00:07:55,200 --> 00:08:01,010
And so what we really want to do is aspect feel like it'll keep the aspect ratio and fill it up and

133
00:08:01,020 --> 00:08:02,100
the entire screen.

134
00:08:02,310 --> 00:08:04,110
And so that's what we're looking for here.

135
00:08:04,500 --> 00:08:05,130
Cool.

136
00:08:05,160 --> 00:08:06,410
And so I just saved my project.

137
00:08:06,420 --> 00:08:07,800
I do that very often.

138
00:08:07,800 --> 00:08:12,600
And so the next thing I want to do is this probably get some of the the rest of the controls on here

139
00:08:12,600 --> 00:08:15,170
so the image this is in and these here.

140
00:08:15,300 --> 00:08:21,540
And so what I'm actually going to do is I'm going to keep it side by side with my project kind of like

141
00:08:21,540 --> 00:08:26,720
this so I can just so I can kind of look at it while I'm working on it.

142
00:08:26,730 --> 00:08:32,000
So what I'm going to do is these controls up here I'm going to go ahead and hide or show the navigator

143
00:08:32,010 --> 00:08:34,730
someone I'm going to hide in the navigator here.

144
00:08:34,740 --> 00:08:38,420
So I have more space on my screen and I'm going to work with it like this right now.

145
00:08:39,270 --> 00:08:39,560
OK.

146
00:08:39,580 --> 00:08:43,170
So first things first is I want to throw another image of you on here.

147
00:08:43,240 --> 00:08:46,430
So right at the top and this will be our swoosh.

148
00:08:46,510 --> 00:08:50,440
So I'm going to select the image here and do swoosh logo as you can see.

149
00:08:50,440 --> 00:08:54,420
Right now it's scheduled to fill its smash an image which of course doesn't look right.

150
00:08:54,490 --> 00:08:58,040
And so even if you eyeball it like this you know like OK that looks good.

151
00:08:58,090 --> 00:09:05,000
You still want to do aspect fit because or aspect feel because you know it'll be perfect then.

152
00:09:05,050 --> 00:09:07,070
So let's play with aspect fit for a second.

153
00:09:07,240 --> 00:09:10,760
So notice how aspect fit it stays the right aspect ratio.

154
00:09:10,780 --> 00:09:14,420
But it gets bigger or smaller depending on the size of my box.

155
00:09:14,560 --> 00:09:21,580
If I go to Aspect Phil OK you can see that it's it's keeping a massive aspect ratio here in my app and

156
00:09:21,580 --> 00:09:24,610
filling up the entire space which is not what I want.

157
00:09:24,610 --> 00:09:29,430
So in this case I want aspect fit so it fits within the bounding box.

158
00:09:29,550 --> 00:09:29,920
Okay.

159
00:09:29,920 --> 00:09:34,120
And right now we're just going to kind of eyeball it and here's what I was telling you about earlier

160
00:09:34,120 --> 00:09:35,760
and I'm glad we pointed this out here.

161
00:09:35,950 --> 00:09:42,940
By not having the other 2 x 3 x images since we don't have at 2 x 3 x images we're using the default

162
00:09:43,000 --> 00:09:43,910
low resolution one.

163
00:09:43,930 --> 00:09:45,400
And it's kind of blurry.

164
00:09:45,400 --> 00:09:50,920
So if we want that to look really nice we're going to need the 2x and 3x images that will add to the

165
00:09:50,920 --> 00:09:51,580
project here.

166
00:09:51,580 --> 00:09:56,990
So let's go ahead and put this right here OK.

167
00:09:58,010 --> 00:10:03,410
So swoosh it looks ok looks good enough for now and the next thing we want to do is add some text.

168
00:10:03,460 --> 00:10:07,760
And so Alexa shut up OK.

169
00:10:07,780 --> 00:10:12,480
So the next thing we want to do is she's not sure about iOS development.

170
00:10:12,490 --> 00:10:15,550
That's because she's made by Amazon.

171
00:10:15,730 --> 00:10:18,110
We're going to do a label here.

172
00:10:19,390 --> 00:10:19,920
OK.

173
00:10:20,800 --> 00:10:23,110
And of course ours doesn't look anything like that.

174
00:10:23,140 --> 00:10:25,660
So I'm just going to make it bigger and kind of eyeball it for now.

175
00:10:26,570 --> 00:10:27,250
OK.

176
00:10:27,590 --> 00:10:30,640
And I'm going to center it so imminent with this label like it.

177
00:10:30,650 --> 00:10:34,010
I'm going to hover over the center icon here and center the text.

178
00:10:34,010 --> 00:10:36,920
And the next thing I'm going to do is I'm going to change the font.

179
00:10:36,950 --> 00:10:39,820
I never ever use the system font because it's just ugly.

180
00:10:39,830 --> 00:10:45,620
And so we're going to go to Kustom and we're going to use the Avenir now Avenir is actually a font that

181
00:10:45,620 --> 00:10:51,340
Apple uses for most of all their marketing material and it looks really nice and the style.

182
00:10:51,590 --> 00:10:58,050
I just want a regular medium style K so that's good for now and what we'll do is we'll increase the

183
00:10:58,050 --> 00:11:01,980
size until it gets about the size that we want.

184
00:11:01,980 --> 00:11:04,460
I made just this in just a minute here and want to change the color.

185
00:11:04,470 --> 00:11:09,190
Click on color here and what I want to do is I'm going to change the color to white.

186
00:11:09,430 --> 00:11:11,320
OK you can put any of these controls are to get why.

187
00:11:11,320 --> 00:11:14,170
I just click this sliding icon here and drag it over.

188
00:11:14,550 --> 00:11:18,840
And so what I want to do is just mimic what's on the screen so go all in.

189
00:11:19,190 --> 00:11:20,010
OK.

190
00:11:20,070 --> 00:11:27,190
And in the image to the left now OK it's kind of at the bottom of the basketball player.

191
00:11:28,020 --> 00:11:30,800
Like right there on the left hand side and this one's about right there.

192
00:11:30,810 --> 00:11:35,230
And I'm all I'm ok eyeballing it it's it's fine for now it doesn't have to be pixel perfect.

193
00:11:35,430 --> 00:11:37,960
And in fact here's a protip.

194
00:11:38,120 --> 00:11:42,330
OK this is a very important protip that you should let your designers know if you're ever working with

195
00:11:42,330 --> 00:11:43,190
designers.

196
00:11:43,290 --> 00:11:48,030
It is not ideal practice to have pixel perfect designs and Iowa development.

197
00:11:48,030 --> 00:11:51,470
So if you have a designer come at you and say I want these pixel perfect and he makes a little markers

198
00:11:51,470 --> 00:11:53,280
it has 16 pixels things like that.

199
00:11:53,370 --> 00:11:59,220
That's not ideal because when I was development what you want to do is work with auto layout which gets

200
00:11:59,430 --> 00:12:03,780
about near perfect what you want but never quite there because it needs to adjust for different screen

201
00:12:03,780 --> 00:12:06,000
sizes so you should always let your designer know.

202
00:12:06,210 --> 00:12:10,340
I will make it look really nice and based on your designs but I cannot guarantee pixel perfect.

203
00:12:10,530 --> 00:12:14,710
One is it might be two times the work to do that and you have to write custom code to get there.

204
00:12:14,820 --> 00:12:16,140
And so they're going to pay a lot more money.

205
00:12:16,200 --> 00:12:16,410
OK.

206
00:12:16,410 --> 00:12:24,340
Don't ever commit to pick pixel perfect on a pre-contract project and two is it'll take a lot of time.

207
00:12:24,470 --> 00:12:24,800
OK.

208
00:12:24,810 --> 00:12:25,980
And it's often not worth it.

209
00:12:25,980 --> 00:12:27,820
So just let your designer know explain it to them.

210
00:12:27,820 --> 00:12:31,010
But there's your protip So go all in.

211
00:12:31,170 --> 00:12:36,260
OK so what next thing we can do is make sure it's selected and I'm going to command d to duplicate.

212
00:12:36,270 --> 00:12:39,760
You could also commands command c command V to paste.

213
00:12:39,810 --> 00:12:44,080
And what I'm going to do here is we're going to write the text that we need.

214
00:12:44,160 --> 00:12:50,070
So on going all out ok cool little catch phrase that Evan created for us.

215
00:12:50,670 --> 00:12:54,780
And we're going to make a smaller so ongoing all out.

216
00:12:54,780 --> 00:12:57,370
Now what's interesting is the image over here.

217
00:12:57,570 --> 00:12:58,380
OK.

218
00:12:58,740 --> 00:13:00,550
It's lined up completely.

219
00:13:00,660 --> 00:13:04,720
So the 0 is over here and the.

220
00:13:05,170 --> 00:13:05,580
Yes.

221
00:13:05,580 --> 00:13:09,400
So we need to make this a little bit longer and bigger.

222
00:13:09,450 --> 00:13:17,600
So what I might do is just increase the font size until it's about right and make sure it's centered

223
00:13:17,690 --> 00:13:18,730
which it is.

224
00:13:19,190 --> 00:13:21,710
And I'm a little bit too big.

225
00:13:21,740 --> 00:13:23,570
Say twenty three.

226
00:13:24,160 --> 00:13:25,750
All too small.

227
00:13:26,480 --> 00:13:32,300
Well like I said it's like to be picture perfect but it will be close enough and I'm OK with that.

228
00:13:32,300 --> 00:13:37,400
So we'll put it right about here and then make the bounding box a little bit smaller so we don't have

229
00:13:37,400 --> 00:13:39,270
extra wasted space.

230
00:13:39,290 --> 00:13:39,610
OK.

231
00:13:39,650 --> 00:13:45,350
So go all in on going all out and do all we could possibly do is just make this bold and that may actually

232
00:13:46,160 --> 00:13:49,950
that might actually be yeah.

233
00:13:50,030 --> 00:13:53,410
That almost made it quite perfect there on the edges there.

234
00:13:53,590 --> 00:13:53,880
OK.

235
00:13:53,890 --> 00:13:57,430
So go all in on going all out sounds so inspirational.

236
00:13:57,430 --> 00:13:59,430
And I can also use the arrow keys.

237
00:13:59,860 --> 00:14:01,040
OK.

238
00:14:01,180 --> 00:14:03,750
On the keyboard to move things around and then move it up.

239
00:14:03,750 --> 00:14:07,590
There's a slight bit more and I'm liking that.

240
00:14:07,610 --> 00:14:12,990
So next thing I want to do is get this text here in the middle so again commanded to duplicate.

241
00:14:13,300 --> 00:14:16,340
And I'm just eyeballing it again not doing pixel perfect here.

242
00:14:16,600 --> 00:14:25,450
And what we're going to do is type in the word so find a team in your city and dominate the league.

243
00:14:25,780 --> 00:14:26,840
OK.

244
00:14:26,860 --> 00:14:30,910
And the reason why I type the words first before I change the sizing and things is so I can actually

245
00:14:31,030 --> 00:14:34,810
size it up and it'll fall into place a little bit easier.

246
00:14:35,020 --> 00:14:39,430
And so changes back to from heavy to medium.

247
00:14:39,640 --> 00:14:43,750
And then we're just going to reduce the font size that one of the things we're going to need to do is

248
00:14:43,750 --> 00:14:48,830
have two lines here so see where those lines just click it up by one until it has two on there.

249
00:14:49,000 --> 00:14:49,980
OK.

250
00:14:50,140 --> 00:14:51,760
And where to put that right there.

251
00:14:52,060 --> 00:14:57,760
And I'm going to now you know we need to make it larger so it shows two lines.

252
00:14:57,760 --> 00:14:58,350
There we go.

253
00:14:58,420 --> 00:14:58,750
OK.

254
00:14:58,750 --> 00:15:03,450
It wasn't showing two lines because my level was not large enough as you can see is now large enough.

255
00:15:03,880 --> 00:15:05,450
And notice how there's too many words.

256
00:15:05,450 --> 00:15:07,140
So we need to get rid of dominate.

257
00:15:07,420 --> 00:15:08,120
OK.

258
00:15:08,170 --> 00:15:11,400
And also the words need to kind of stretch out across the whole thing.

259
00:15:11,410 --> 00:15:12,830
So let's make the font bigger.

260
00:15:13,820 --> 00:15:14,860
It's a little too big.

261
00:15:14,980 --> 00:15:16,510
It's smaller there.

262
00:15:16,840 --> 00:15:17,480
Let's see if we

263
00:15:21,010 --> 00:15:22,170
I'm just playing with things here.

264
00:15:22,190 --> 00:15:30,450
What I want to do is I want to get the league to be the only thing that's showing Raguel it's a little

265
00:15:30,450 --> 00:15:31,560
bit long.

266
00:15:31,560 --> 00:15:38,910
What happens is by so it's a little bit long but I kind of like the I like the font size.

267
00:15:39,110 --> 00:15:40,520
So maybe what I should do.

268
00:15:42,670 --> 00:15:45,400
Well maybe I should do is make these a little bit bigger.

269
00:15:45,400 --> 00:15:49,940
I'm curious now to make this a little bit bigger to get them.

270
00:15:50,860 --> 00:15:52,970
Touching the edges like so.

271
00:15:53,500 --> 00:15:57,460
And make sure this one is lined up properly.

272
00:15:57,760 --> 00:15:58,980
Make this a little bit bigger.

273
00:16:02,160 --> 00:16:03,040
There we go.

274
00:16:03,880 --> 00:16:04,710
Works for me.

275
00:16:05,630 --> 00:16:06,730
Kind of like it.

276
00:16:07,040 --> 00:16:07,620
Good enough.

277
00:16:07,850 --> 00:16:08,110
OK.

278
00:16:08,120 --> 00:16:09,530
Perfect.

279
00:16:09,530 --> 00:16:10,950
This is looking really good.

280
00:16:10,970 --> 00:16:14,450
Now the last thing we want to do is add a custom button on here.

281
00:16:14,840 --> 00:16:15,370
OK.

282
00:16:15,510 --> 00:16:18,670
And so what we're going to do is type in beauty button.

283
00:16:18,920 --> 00:16:21,440
And of course it doesn't look anything like we would expect.

284
00:16:21,440 --> 00:16:28,500
So it just drag it there and put it towards the bottom so obviously it's it's ugly ugly button.

285
00:16:28,580 --> 00:16:32,810
So let's go and drag it to the left here on this side of the screen and drag it to the right and let's

286
00:16:32,810 --> 00:16:35,150
make it a little bit bigger as per the designs.

287
00:16:35,180 --> 00:16:36,860
And there's some things we can do right now.

288
00:16:37,070 --> 00:16:41,470
So what I can do is instead of saying the word button on it as you can see at the top right side get

289
00:16:41,480 --> 00:16:42,620
started.

290
00:16:43,190 --> 00:16:43,550
All right.

291
00:16:43,560 --> 00:16:50,220
And let's go ahead and changes from System font to custom and then let's go to Avenir.

292
00:16:50,260 --> 00:16:50,780
All right.

293
00:16:50,810 --> 00:16:58,000
And let's just do the medium font and change the color to white like so.

294
00:16:58,340 --> 00:16:59,010
OK.

295
00:16:59,370 --> 00:17:03,690
And then what I want to also do is scroll down a little bit on this button here and see how background

296
00:17:03,800 --> 00:17:04,790
that has a red slash.

297
00:17:04,800 --> 00:17:06,860
I mean it's clear color there's no background.

298
00:17:07,000 --> 00:17:13,060
But I instead want to do is I want to make this black like so black color I just change the color to

299
00:17:13,060 --> 00:17:21,660
black and then what I would like to do is click this icon here and change the opacity just eyeball it.

300
00:17:21,680 --> 00:17:25,790
Good color there where you can kind of see the background and I just change it to 40 percent opacity

301
00:17:26,540 --> 00:17:28,840
and now starting to really look like the designs.

302
00:17:29,040 --> 00:17:31,040
OK and this is really cool.

303
00:17:31,040 --> 00:17:34,030
Now we don't have a border on here yet so we need to solve that next.

304
00:17:34,030 --> 00:17:35,600
But this is looking pretty close.

305
00:17:35,750 --> 00:17:39,330
So I mean to save it and the next thing we want to do is actually create the border.

306
00:17:39,350 --> 00:17:43,600
So what we're going to do is open up our navigator with a button at the top right.

307
00:17:43,640 --> 00:17:49,840
We're going to go into our folder here apse whoosh right click and we're going to add a new group and

308
00:17:49,840 --> 00:17:51,410
I would call this group views.

309
00:17:51,410 --> 00:17:56,160
This is we're going to put custom view code so it's segregated from you know different types of code

310
00:17:56,160 --> 00:17:58,330
like view controllers or services.

311
00:17:58,520 --> 00:18:02,680
And inside the views folder here or group right click and go to a new file.

312
00:18:03,080 --> 00:18:05,700
And what we want to do is a cocoa touch class.

313
00:18:05,750 --> 00:18:09,830
Ok cocoa touch is the framework that manages things like buttons and views.

314
00:18:10,160 --> 00:18:15,020
And we don't want to create an empty file we want to actually use the prebuilt custom cocoa touch class

315
00:18:15,650 --> 00:18:22,060
and we don't want a custom table view so what we want is a UI button we want a custom UI button.

316
00:18:22,100 --> 00:18:24,390
We're going to call this border button.

317
00:18:24,650 --> 00:18:29,900
And the advantage of making this a class means that we can reuse this button over and over and over

318
00:18:29,900 --> 00:18:33,490
again and reusability is very important in programming.

319
00:18:33,800 --> 00:18:37,270
We always want to keep the dry principle.

320
00:18:37,280 --> 00:18:37,640
OK.

321
00:18:37,670 --> 00:18:39,070
I want you to burn listen to your brains right now.

322
00:18:39,080 --> 00:18:41,000
The dry principle don't repeat yourself.

323
00:18:41,240 --> 00:18:44,780
If you find yourself writing code over and over and over again the same code.

324
00:18:44,780 --> 00:18:46,260
It means there's always a better way.

325
00:18:46,280 --> 00:18:50,040
And so creating classes is one way to make reusable code.

326
00:18:50,210 --> 00:18:53,710
So less code means less bugs and less work.

327
00:18:53,780 --> 00:18:56,480
So the dry principle don't repeat yourself.

328
00:18:56,570 --> 00:19:01,430
So we've got our border button here subclass of you I HBA and of course feel that first automatically

329
00:19:01,430 --> 00:19:07,220
when we started typing and you button is part of the code touch framework and a click next.

330
00:19:07,220 --> 00:19:13,070
And I'm just going to click Create and here's our border button OK.

331
00:19:13,470 --> 00:19:18,720
And it says only over a draw if you perform custom drawing well we're not going to override the draw

332
00:19:18,720 --> 00:19:22,980
recked function because we're not doing custom drawing all we're going to do is add a border which is

333
00:19:22,980 --> 00:19:26,680
part of the default lair inside of any UI view.

334
00:19:26,820 --> 00:19:29,450
OK and so you would override draw recked.

335
00:19:29,610 --> 00:19:31,360
OK this function right here.

336
00:19:31,680 --> 00:19:34,980
You would implement that function only if you had to do cousin drolling you wanted to draw a little

337
00:19:34,980 --> 00:19:39,550
stars inside your button or things like that any type of Cousin drawn that you might want to do.

338
00:19:39,610 --> 00:19:43,830
And so what we're going to do is we're going to use the awake from NIB function.

339
00:19:43,920 --> 00:19:44,950
OK.

340
00:19:45,330 --> 00:19:49,490
Awake from NIB and we're also going right super awake from it.

341
00:19:49,800 --> 00:19:50,330
OK.

342
00:19:50,490 --> 00:19:51,850
And you'll learn more about this.

343
00:19:51,960 --> 00:20:00,000
But the the superclass basically is calling super is calling the parent class so it's calling UI buttons

344
00:20:00,390 --> 00:20:04,830
awake from this function because Apple when they've written this code for us they already have an awake

345
00:20:04,850 --> 00:20:09,540
from NIB come to a function which has lots of code in the already possibly And so we want to make sure

346
00:20:09,600 --> 00:20:11,410
that that code is called.

347
00:20:11,430 --> 00:20:16,650
And per the apple documentation when you override the Awake from NIB function they want you to call

348
00:20:16,650 --> 00:20:22,970
super call at first so the code that Apple is calling for the Apple has written in their function.

349
00:20:23,190 --> 00:20:33,510
And all we're going to do here is access the Lehre property so Lehre dot border with K equals a 3.0

350
00:20:34,230 --> 00:20:40,640
or say Lehre border color equals you eye color white color.

351
00:20:40,800 --> 00:20:42,530
CEG color.

352
00:20:43,200 --> 00:20:47,700
OK a lot going on here I know but what we're doing here is every view.

353
00:20:47,740 --> 00:20:49,630
OK so every you I view.

354
00:20:49,690 --> 00:20:54,660
Can I button inherits from you I view it gets some of the properties and features from a view has a

355
00:20:54,660 --> 00:20:55,650
large property.

356
00:20:55,700 --> 00:20:55,910
OK.

357
00:20:55,920 --> 00:20:58,010
This is stuff that the Apple engineers have written for us.

358
00:20:58,020 --> 00:21:03,030
And so like a border with Unfortunately that's not available to us in the interface builder so we have

359
00:21:03,030 --> 00:21:08,200
to do it programmatically so border with and border color allows us to set a border with color any of

360
00:21:08,220 --> 00:21:15,030
you can be an image of you could be a I view could be in any of those things you can add borders to

361
00:21:15,180 --> 00:21:17,910
and because it all inherits from you I view.

362
00:21:18,240 --> 00:21:21,560
And I mean if we command click this right here.

363
00:21:21,690 --> 00:21:22,250
OK.

364
00:21:23,930 --> 00:21:30,080
Pulled the documentation and it talks about the different functions and things that are available to

365
00:21:30,080 --> 00:21:30,650
it in fact.

366
00:21:30,690 --> 00:21:38,270
Anytime you want to look at the code underneath you can command click and go on and go look at all the

367
00:21:38,270 --> 00:21:40,220
code underneath is available for you to look at.

368
00:21:40,220 --> 00:21:46,040
So if you ever want to see what functions are available to you you can command click and go to the jump

369
00:21:46,040 --> 00:21:46,770
to the definition.

370
00:21:46,760 --> 00:21:47,360
OK.

371
00:21:47,870 --> 00:21:49,020
Pretty cool stuff.

372
00:21:49,340 --> 00:21:51,040
Anyway so we've got what we need here.

373
00:21:51,200 --> 00:21:51,620
All right.

374
00:21:51,650 --> 00:21:55,940
We've created a custom button called borderer button and the awake from NIB function which is going

375
00:21:55,940 --> 00:22:01,030
to be called the moment that your interface builder you control it comes to life onto the screen.

376
00:22:01,050 --> 00:22:06,260
OK this is going to be called right from the beginning and then we need to do one more thing is go back

377
00:22:06,260 --> 00:22:07,700
to our main storyboard.

378
00:22:08,110 --> 00:22:08,410
OK.

379
00:22:08,420 --> 00:22:13,340
And on this button here instead of it being a regular UI button we want to click this icon right up

380
00:22:13,340 --> 00:22:13,700
here.

381
00:22:13,700 --> 00:22:19,190
The identity inspector we want to change the class from UI button to border button I just typed in the

382
00:22:19,190 --> 00:22:21,680
letter B and it appears right there.

383
00:22:21,680 --> 00:22:24,360
Now you're not going to see anything here in the interface builder.

384
00:22:24,500 --> 00:22:24,810
OK.

385
00:22:24,830 --> 00:22:28,570
But when we run this project we should see a white outline on this.

386
00:22:28,580 --> 00:22:33,140
So what I'm going to do is from my devices here I'm going to choose an iPhone 7 since that's what we're

387
00:22:33,140 --> 00:22:35,000
working with here and the interface builder.

388
00:22:35,240 --> 00:22:35,840
And we're going to run it

389
00:22:39,280 --> 00:22:40,230
and here it is on my screen.

390
00:22:40,240 --> 00:22:41,230
It's a little bit big.

391
00:22:41,230 --> 00:22:45,880
If you want to change the size of the interface builder here you can type press command one or command

392
00:22:45,880 --> 00:22:48,400
two or command three to make it different sizes.

393
00:22:48,400 --> 00:22:49,190
OK.

394
00:22:49,750 --> 00:22:52,030
And cool.

395
00:22:52,030 --> 00:22:56,170
So you know what I think are our borders is probably a little bit thick.

396
00:22:56,170 --> 00:22:58,210
I probably should have done it two instead of three.

397
00:22:58,330 --> 00:23:02,920
And I think maybe there are buttons a little thin but as you can see it looks pretty close to the Zeins

398
00:23:03,010 --> 00:23:04,470
which I think is pretty cool.

399
00:23:04,690 --> 00:23:06,820
So let's make those few minor adjustments real quick.

400
00:23:06,820 --> 00:23:09,860
Again we're eyeballing all this which is fine.

401
00:23:10,090 --> 00:23:15,760
And so make it a little bit larger there and then the code the border button realises that the two are

402
00:23:15,760 --> 00:23:16,660
two.

403
00:23:17,170 --> 00:23:17,810
OK.

404
00:23:18,100 --> 00:23:19,480
Now let's try something different.

405
00:23:19,600 --> 00:23:23,710
OK let's run this on an iPhone 7 plus and see what happens.

406
00:23:31,440 --> 00:23:32,950
OK as you can see it's now loaded.

407
00:23:32,970 --> 00:23:34,700
A second simulator here.

408
00:23:34,710 --> 00:23:35,590
All right.

409
00:23:35,700 --> 00:23:38,790
And we're going to keep this one on this size because it's really massive.

410
00:23:38,790 --> 00:23:43,980
I'm sure if I make it bigger it doesn't does it fit on the whole screen which it doesn't know.

411
00:23:44,370 --> 00:23:46,140
So here's something interesting.

412
00:23:46,300 --> 00:23:47,670
Let's move this one off the screen.

413
00:23:48,000 --> 00:23:48,490
Look at this.

414
00:23:48,490 --> 00:23:51,990
On the iPhone 7 plus we got this big white space here.

415
00:23:52,140 --> 00:23:53,090
OK.

416
00:23:53,380 --> 00:23:54,650
That's not good at all right.

417
00:23:54,660 --> 00:23:57,360
So you actually can't ship an app this way the way we just built the interface.

418
00:23:57,360 --> 00:24:00,610
It's not complete because it only works on one type of device screen.

419
00:24:00,810 --> 00:24:02,830
And we could have easily seen the problem.

420
00:24:03,030 --> 00:24:04,710
Let's go back to our storyboard here.

421
00:24:04,740 --> 00:24:09,180
If I had clicked on this device down here for the iPhone 7 plus you can see that there's a white space

422
00:24:09,210 --> 00:24:13,270
or if I click on the iPad there's an even bigger white space.

423
00:24:13,290 --> 00:24:14,240
OK.

424
00:24:14,250 --> 00:24:17,430
And so this problem has always existed in Iowa.

425
00:24:17,460 --> 00:24:19,210
And here's the reason why.

426
00:24:19,410 --> 00:24:20,050
OK.

427
00:24:20,250 --> 00:24:23,880
Currently we're not utilizing auto layout.

428
00:24:23,960 --> 00:24:29,800
OK iOS all the way that all the apps are laid out that seem to rotate and look good on any device.

429
00:24:30,030 --> 00:24:34,590
They use something called auto lay on the layout will allow us to pin things to the edges of the screen

430
00:24:34,620 --> 00:24:37,200
or pin things to other components on the screen.

431
00:24:37,410 --> 00:24:41,600
So it looks good on any type of screen and we haven't done any of that yet.

432
00:24:41,880 --> 00:24:44,260
So we're going to call this video done.

433
00:24:44,400 --> 00:24:49,320
What we've done so far is we've dragged some controls onto the screen we've critter own custom class

434
00:24:49,380 --> 00:24:51,180
using the Awake from NIB function.

435
00:24:51,330 --> 00:24:59,810
We have initialized code or we've set code that will change the border and the border with the button.

436
00:24:59,850 --> 00:25:04,110
And now you know things are looking pretty good but we have some we have some user interface problems

437
00:25:04,110 --> 00:25:05,600
so we're going to need to address those next.

438
00:25:05,600 --> 00:25:06,870
So that's it for now.

439
00:25:06,870 --> 00:25:09,030
Marc price at Dell slopes dot com.

440
00:25:09,030 --> 00:25:10,140
Moving on and for.