1
00:00:06,100 --> 00:00:12,300
What's up everyone doesn't feel calm and in this exciting lesson we're going to learn how to work with

2
00:00:12,330 --> 00:00:16,450
auto layout and multiple screen sizes namely iPad versus iPhone.

3
00:00:16,510 --> 00:00:23,040
What a lot of new developers do is they'll just make one set of designs that look good.

4
00:00:23,040 --> 00:00:23,630
OK.

5
00:00:23,680 --> 00:00:27,960
An iPad but it's mostly for iPhone but they want to support iPad only but that's not the Apple way the

6
00:00:27,960 --> 00:00:34,020
Apple way to build a user interface that accentuates the larger screen size and makes the experience

7
00:00:34,020 --> 00:00:34,870
even better.

8
00:00:35,100 --> 00:00:38,030
And so on the pope and a couple of images here.

9
00:00:38,080 --> 00:00:40,490
OK so this app is called The Death profile.

10
00:00:40,620 --> 00:00:41,240
OK.

11
00:00:41,550 --> 00:00:45,660
And notice here there are some differences between the phone version and the pad version.

12
00:00:45,720 --> 00:00:46,260
OK.

13
00:00:46,530 --> 00:00:51,150
So the phone version you know the these icons right here are lined up here in the middle center in the

14
00:00:51,150 --> 00:00:52,570
middle of the screen.

15
00:00:53,010 --> 00:00:59,100
This icon this image here is a little bit taller Looking at least when you compare them side by side

16
00:00:59,100 --> 00:01:03,690
that's taller versus when you can see look there's more space between this computer and the bottom than

17
00:01:03,690 --> 00:01:08,610
there is right here and here on the iPad these three icons are on the right hand side of the screen

18
00:01:08,850 --> 00:01:11,270
and then on the iPhone These are squares.

19
00:01:11,270 --> 00:01:14,260
But on the iPad these are rectangles.

20
00:01:14,340 --> 00:01:18,450
And one more thing on the iPad there's a button called customized dashboard on the iPhone that doesn't

21
00:01:18,450 --> 00:01:18,820
exist.

22
00:01:18,840 --> 00:01:20,300
It's hidden altogether.

23
00:01:20,520 --> 00:01:27,000
And this is a lesson that a lot of courses and lessons out there neglected to teach and that's how to

24
00:01:27,420 --> 00:01:32,570
use basically traits for the different devices.

25
00:01:32,580 --> 00:01:40,620
So basically being able to build a layout for let's say a compact with which is an iPhone versus a regular

26
00:01:40,620 --> 00:01:44,490
with regular height which is an iPad and then varying for those different traits.

27
00:01:44,490 --> 00:01:49,920
And so you can do lots of things that you can hide and show things you can have bigger font sizes for

28
00:01:49,920 --> 00:01:52,840
bigger tablets and things bigger devices and things like that.

29
00:01:52,980 --> 00:01:54,610
OK so that's what we're going to work on.

30
00:01:54,810 --> 00:01:55,950
But first things first.

31
00:01:56,130 --> 00:01:58,700
Let's go ahead and just clone repo here.

32
00:01:58,770 --> 00:02:03,060
You don't have to follow the step unless you've created a repo for this project which you probably should

33
00:02:03,180 --> 00:02:07,570
get help you should go create a repo for your project and then clone it like so.

34
00:02:07,800 --> 00:02:11,670
Which is what I'm going to do you're going to clone the S-sh you're ill and then in my terminal here

35
00:02:11,970 --> 00:02:13,440
I'm already in the right directory.

36
00:02:13,530 --> 00:02:18,750
I'm just going to say get clone and paste in the URL like so.

37
00:02:19,110 --> 00:02:22,770
And it's going to cloning here and I've cloned an empty repository which is fine.

38
00:02:22,800 --> 00:02:28,140
LS And there it is a CD app dev profile and this is cool.

39
00:02:28,140 --> 00:02:31,200
So all I need to do now is creating an X code project in here.

40
00:02:31,230 --> 00:02:39,960
So let's do that and go to X code beta create a new X code project single view app is fine and I'm going

41
00:02:39,960 --> 00:02:42,230
to call this dev Dasch profile.

42
00:02:42,480 --> 00:02:44,460
And this all looks good here.

43
00:02:45,380 --> 00:02:52,200
And then let's go ahead and just put it in the profile here and click Create awesome.

44
00:02:52,260 --> 00:02:54,090
So it looks good to me.

45
00:02:54,090 --> 00:03:00,440
Let's go back to my terminal command space for the spotlight and LS here and we've got this new project

46
00:03:00,480 --> 00:03:01,120
profile.

47
00:03:01,200 --> 00:03:10,590
So now we're in here and see get status so we've got our changes here so get at a good commit an initial

48
00:03:10,680 --> 00:03:18,290
x code project and then the last thing I want to do is actually just create a branch so get check out

49
00:03:18,420 --> 00:03:21,610
to Ashby and we're going to call this lesson 0 1.

50
00:03:22,130 --> 00:03:22,730
Boom.

51
00:03:22,910 --> 00:03:23,120
OK.

52
00:03:23,130 --> 00:03:24,930
So we're all set up ready to go.

53
00:03:24,960 --> 00:03:28,380
And again you don't have to use version control and this if you want but I recommend that what you do

54
00:03:28,380 --> 00:03:31,860
is whenever you current project going to get create a new project especially if you're learning and

55
00:03:31,860 --> 00:03:36,690
want to get a job having these projects on there will help you get exposure and let people look at your

56
00:03:36,690 --> 00:03:38,130
code and your work.

57
00:03:38,140 --> 00:03:42,520
So we're going to do first is we're going to build out the iPhone screen here.

58
00:03:42,540 --> 00:03:50,550
What I typically like to do is look at both the profiles or both the iPad and the iPhone layouts together

59
00:03:50,640 --> 00:03:55,560
like we did and kind of just think about what I'm going to have to do differently for an iPad because

60
00:03:55,680 --> 00:03:59,130
what we'll end up doing is will be the iPhone first but it lets us think ahead.

61
00:03:59,130 --> 00:04:02,550
So I already know that you know this image might be a little different.

62
00:04:02,580 --> 00:04:06,600
I know that these icons might be a little different and these ones here and this one here so it's just

63
00:04:06,600 --> 00:04:10,240
something worth thinking about as we're building the iPhone layout.

64
00:04:10,290 --> 00:04:12,840
So let's go ahead and do the iPhone first.

65
00:04:12,930 --> 00:04:16,410
So what I'm going to do is zoom out here so I can keep this image open at all times.

66
00:04:17,190 --> 00:04:20,340
Like so it's not letting me move it as usual.

67
00:04:20,440 --> 00:04:25,270
That's OK we'll just move this right here and move this over here.

68
00:04:25,440 --> 00:04:27,360
And now this is looking real nice.

69
00:04:27,710 --> 00:04:28,350
OK.

70
00:04:29,380 --> 00:04:30,120
Cool.

71
00:04:30,130 --> 00:04:35,260
And so let's open up our navigator here again and let's go into our main storyboard and we've got a

72
00:04:35,260 --> 00:04:36,310
blank canvas here that's great.

73
00:04:36,310 --> 00:04:40,710
So the next thing I want to do is just bring over all the images that are required for the project.

74
00:04:40,720 --> 00:04:43,930
I've got them here and a folder you have them as well.

75
00:04:43,930 --> 00:04:47,860
And all we're going to do is go into the assets folder and we're going to drag all those and so comment

76
00:04:48,040 --> 00:04:50,090
on the images that are on my other screen here.

77
00:04:50,140 --> 00:04:55,380
And I'm going to drag them in and I've given you 1 x 2 x 3 x images for everything.

78
00:04:55,480 --> 00:04:56,650
Cool.

79
00:04:56,650 --> 00:04:58,490
So back to the main story board.

80
00:04:58,660 --> 00:05:00,360
Let's go ahead and build this layout.

81
00:05:00,400 --> 00:05:02,880
So first things first is I know this is an image back here.

82
00:05:03,040 --> 00:05:07,540
And so what we're going to do I mean this could have been you know a view that we set a grading on and

83
00:05:07,540 --> 00:05:08,310
put an image in the middle.

84
00:05:08,320 --> 00:05:10,970
But the way our designer did it was he gave us a single image.

85
00:05:11,080 --> 00:05:12,000
OK.

86
00:05:13,000 --> 00:05:18,040
So it's open with the right hand side here by clicking this top right icon over here utilities and I'm

87
00:05:18,040 --> 00:05:23,170
going to type in the word image to bring up an image of you and we're simply going to drag it up here

88
00:05:23,170 --> 00:05:23,710
to the top.

89
00:05:23,710 --> 00:05:25,740
And I'm just going to eyeball this.

90
00:05:26,070 --> 00:05:27,680
I'm going to make a pixel perfect.

91
00:05:27,820 --> 00:05:33,700
And what I'm going to do is go ahead and pin this from the top from the left and from the right hand

92
00:05:33,810 --> 00:05:36,230
and I will give this a fixed height.

93
00:05:36,250 --> 00:05:40,990
For now I may change it later if we need to but for it I'll give it a fixed height and just assuming

94
00:05:40,990 --> 00:05:42,390
it will work on both iPhone and iPad.

95
00:05:42,400 --> 00:05:47,150
Again you don't want to over stress about supporting both screen sizes at the same time.

96
00:05:47,170 --> 00:05:50,020
Build it up for iPhone first and then go into the iPad.

97
00:05:50,020 --> 00:05:53,850
So give it a fixed height let's say 150 since it's a more even number.

98
00:05:54,100 --> 00:05:56,200
And that looks good.

99
00:05:56,200 --> 00:06:01,430
Now the next thing is I'm going to select this image here and let's just go ahead and get the background.

100
00:06:01,450 --> 00:06:03,500
It's just the slopes here.

101
00:06:03,720 --> 00:06:04,940
And of course we have a problem.

102
00:06:04,960 --> 00:06:05,940
It's stretching it.

103
00:06:06,040 --> 00:06:09,400
So instead of Skelp to feel how about aspect feel.

104
00:06:09,400 --> 00:06:15,340
Now you notice when we do aspect feel it goes out of the edges here OK which isn't good.

105
00:06:15,340 --> 00:06:17,340
We don't want it to do that we want to cut it off.

106
00:06:17,650 --> 00:06:21,700
And so whenever you're working with aspect feel if your image goes beyond the bounds all you have to

107
00:06:21,700 --> 00:06:22,150
do.

108
00:06:22,330 --> 00:06:27,160
You can do this via code or here in Interface Builder is go down to clip to bounce and click it and

109
00:06:27,160 --> 00:06:30,030
what's going to happen is anything that's out of the bounds is going to be clipped.

110
00:06:30,040 --> 00:06:34,290
And this is a common problem that a lot of new developers have is this clip to bounce Oh what do I do.

111
00:06:34,290 --> 00:06:36,970
How do I it's going off the edge and they think something's wrong.

112
00:06:37,150 --> 00:06:41,680
That happens a lot is that you sometimes just like to bleed out and stack and you think your stack is

113
00:06:41,680 --> 00:06:44,670
broken but it's not it's just your clip to bounce.

114
00:06:44,700 --> 00:06:47,490
I'm going to turn that on so it clips it cool.

115
00:06:47,710 --> 00:06:48,480
That was easy.

116
00:06:48,700 --> 00:06:52,190
So next thing we'll do is this sort of icon here on the left hand side.

117
00:06:52,300 --> 00:06:55,040
So I want to do another image of you.

118
00:06:55,190 --> 00:06:58,530
This might be you like a profile right like on a profile screen or something.

119
00:06:58,550 --> 00:07:01,510
So let's just say 150 by 150.

120
00:07:01,670 --> 00:07:02,910
That's a little large.

121
00:07:03,020 --> 00:07:08,900
Say one 21:20 I'm still seems a little big.

122
00:07:08,900 --> 00:07:10,880
How about 110 by 110.

123
00:07:10,880 --> 00:07:12,010
Again I'm just eyeballing this.

124
00:07:12,010 --> 00:07:17,590
I know it is a square but just eyeballing it drag it around here and it looks about right.

125
00:07:17,590 --> 00:07:23,390
So when you change the image on this and this one is like a profile image so that's not it.

126
00:07:23,960 --> 00:07:27,470
Let's look for slopes profile logo.

127
00:07:27,470 --> 00:07:28,890
There it is perfect.

128
00:07:28,970 --> 00:07:32,210
And let's just go ahead and do aspect feel it.

129
00:07:32,330 --> 00:07:36,640
It's not going to stretch because the image is a square but I always keep an aspect feel anyway in case

130
00:07:36,650 --> 00:07:38,030
it ever did change.

131
00:07:38,030 --> 00:07:39,590
So I've got this image here.

132
00:07:39,710 --> 00:07:41,570
Let's get the label on the screen

133
00:07:44,280 --> 00:07:45,220
says Death slopes.

134
00:07:45,220 --> 00:07:49,190
And notice how it's not actually here in the center if it's in the center.

135
00:07:51,150 --> 00:07:53,510
On the image if it's in the center it just doesn't look quite right.

136
00:07:53,510 --> 00:07:58,490
Looks like it's almost a little lower but for the time being I will put it in the center just to just

137
00:07:58,490 --> 00:08:00,510
to keep things easy for now.

138
00:08:00,560 --> 00:08:01,830
We'll go back and adjust later.

139
00:08:02,840 --> 00:08:08,680
Going to change my font to custom am I go to Avenir I just like that font.

140
00:08:08,750 --> 00:08:15,560
Avenir And let's just change it to medium and I might change the font size a little bit and we're gonna

141
00:08:15,560 --> 00:08:17,230
make the same slopes.

142
00:08:17,480 --> 00:08:22,970
We're not going to write any code in this lesson we're this is all about supporting iPad and iPhone

143
00:08:23,120 --> 00:08:26,100
using just the constraint system OK.

144
00:08:26,210 --> 00:08:28,410
And the different size classes.

145
00:08:28,420 --> 00:08:29,800
So slow.

146
00:08:29,820 --> 00:08:30,680
Silex good.

147
00:08:30,710 --> 00:08:34,720
And also I'm not going to go in the code and show you how to do these rounded corners.

148
00:08:34,730 --> 00:08:36,610
You already know how to do that which is.

149
00:08:36,760 --> 00:08:42,890
You can either reference an outlet or create a custom view and then set Lehre dark corner radius and

150
00:08:42,890 --> 00:08:46,260
then it'll set the corner radius on this on this image here.

151
00:08:46,370 --> 00:08:52,010
So you can do that on your own for practice and then I'm going to put three more images these icons

152
00:08:52,010 --> 00:08:52,180
here.

153
00:08:52,190 --> 00:08:54,740
You know these could be buttons as well.

154
00:08:54,830 --> 00:08:57,080
Now I guess we can make them bunds let's make them buttons.

155
00:08:57,080 --> 00:09:04,580
Why not make three little buttons like so and we'll take out the word button and what we'll do is we'll

156
00:09:04,580 --> 00:09:05,720
put an image here.

157
00:09:06,750 --> 00:09:12,840
And this image is probably going to be the camera icon with the camera but no camera button Rigaud make

158
00:09:12,840 --> 00:09:13,800
it a little bigger.

159
00:09:13,800 --> 00:09:19,370
I'm holding down shift so it stays in the square it maintains the aspect ratio.

160
00:09:19,560 --> 00:09:24,470
And all I'm going to do is command c command V or I can command to duplicate.

161
00:09:24,570 --> 00:09:25,780
Same thing.

162
00:09:25,800 --> 00:09:27,530
You got three buttons that's the camera.

163
00:09:27,540 --> 00:09:36,000
I think the other one is the favorite psilocybin favorite button and this one is in box but and like

164
00:09:36,000 --> 00:09:36,480
so.

165
00:09:36,510 --> 00:09:38,780
And of course it probably makes sense to put those in a stack.

166
00:09:38,820 --> 00:09:40,920
You will get to that in a minute.

167
00:09:40,920 --> 00:09:46,230
So whenever you start seeing grid things like this immediately comes to mind stack you stack because

168
00:09:46,570 --> 00:09:50,070
it just it makes things really easy to work with here on this.

169
00:09:50,100 --> 00:09:55,080
I'm not sure yet if we want to use a stacked view because we may have to manipulate the text and it's

170
00:09:55,080 --> 00:09:55,860
position and stuff.

171
00:09:55,860 --> 00:09:57,380
So anyway we'll see.

172
00:09:57,480 --> 00:09:59,850
Let's go out and get these other four images on here.

173
00:09:59,850 --> 00:10:04,670
So we have an image here and force an iPhone a square right.

174
00:10:04,680 --> 00:10:06,990
So let's let's round let's guess.

175
00:10:07,020 --> 00:10:10,650
You know we want to own 50 about 150 could be four on there.

176
00:10:10,770 --> 00:10:14,710
You know maybe let's do one 30 by 130 just to be safe for now.

177
00:10:15,690 --> 00:10:18,040
And what we'll do is we'll set the image on this one.

178
00:10:18,090 --> 00:10:24,090
So this one is data and it's stretching it stretching stretching the graphic a little bit so let's say

179
00:10:24,090 --> 00:10:26,050
aspect feel OK.

180
00:10:26,100 --> 00:10:30,490
And then of course turn on clip to bounce because it's bleeding.

181
00:10:30,510 --> 00:10:31,650
Looks good to me.

182
00:10:31,740 --> 00:10:38,310
And then let's go ahead and commanded a duplicate and we got another image right here and this one is

183
00:10:38,310 --> 00:10:42,390
going to be data not data.

184
00:10:42,390 --> 00:10:47,600
This one is video code videos image is not right.

185
00:10:48,630 --> 00:10:52,260
I think it's this image images image.

186
00:10:52,260 --> 00:10:53,540
That's a weird name.

187
00:10:53,580 --> 00:10:54,660
Blame it on the designer.

188
00:10:54,680 --> 00:10:55,700
You can yell at him later.

189
00:10:55,740 --> 00:10:56,420
OK.

190
00:10:56,640 --> 00:10:58,700
So now we can probably put these two in a stack.

191
00:10:58,710 --> 00:11:02,210
You just to make sure we start tying tying up the loose ends here.

192
00:11:02,220 --> 00:11:08,250
We've got to tie some loose ends so let's select this and this and let's put them in a stack.

193
00:11:08,510 --> 00:11:12,590
And of course you're like oh it's broken again what do I do again Mark.

194
00:11:12,600 --> 00:11:13,770
Stock futures are scary.

195
00:11:13,770 --> 00:11:17,070
Well it is really annoying that it does this but we'll fix it.

196
00:11:17,070 --> 00:11:19,930
So what's happened here is stack views.

197
00:11:20,070 --> 00:11:23,740
They like to do the thinking for you right remember they do constraints for you.

198
00:11:23,850 --> 00:11:27,570
And so without putting some type of limitations on the stack.

199
00:11:27,630 --> 00:11:30,090
We have weird things that happen like this.

200
00:11:30,090 --> 00:11:34,190
And so what I want to do is maybe set a max with on this one image here.

201
00:11:34,200 --> 00:11:36,780
Let's say a max with and this is how you do it.

202
00:11:36,810 --> 00:11:41,820
So let's click the pin button on this image so it kind of like the image itself here.

203
00:11:41,820 --> 00:11:47,870
Data image put the pin button and sets a set of Max with not 500 but let's add it to what we had of

204
00:11:47,870 --> 00:11:50,410
that one let's say 130.

205
00:11:50,760 --> 00:11:51,620
OK.

206
00:11:52,660 --> 00:11:53,850
Is that really that small.

207
00:11:54,010 --> 00:11:59,920
OK maybe we should say 1 140 on 140 on that looks a little small.

208
00:12:00,160 --> 00:12:01,260
OK 140.

209
00:12:01,300 --> 00:12:05,680
And notice how when I double clicked on that constraint so select your image and see that constraint

210
00:12:05,680 --> 00:12:07,780
there the with equals 140.

211
00:12:07,810 --> 00:12:14,680
So with stack views you don't typically want to fix with a fixed height you can it and it'll work in

212
00:12:14,680 --> 00:12:16,930
most cases but sometimes it'll break.

213
00:12:16,930 --> 00:12:21,600
So what's actually better to do is set a less than or equal to or greater than or equal to.

214
00:12:21,610 --> 00:12:27,970
So we we want the value be less than or equal to 140 in case it's like on an iPhone and it's really

215
00:12:27,970 --> 00:12:28,470
small.

216
00:12:28,480 --> 00:12:30,380
We don't want to set a fix with the 140.

217
00:12:30,400 --> 00:12:33,350
We want it to be able to scale down on its own so we stack views.

218
00:12:33,460 --> 00:12:35,510
You can set a fix within fixed type.

219
00:12:35,520 --> 00:12:39,000
Apple actually recommends doing a less than or equal to or greater than or equal two.

220
00:12:39,010 --> 00:12:43,270
Not to actually do the equal to itself and that's fine.

221
00:12:43,270 --> 00:12:47,640
So that looks OK but of course this is like really long.

222
00:12:47,740 --> 00:12:50,050
And so we can set one more constraint on it.

223
00:12:50,050 --> 00:12:55,960
So what I want to do is I'm going to select this image data image click the pin menu and I'm going to

224
00:12:55,960 --> 00:12:57,790
click this icon here called aspect ratio.

225
00:12:57,790 --> 00:12:59,510
So we've set a max with OK.

226
00:12:59,530 --> 00:13:04,320
And so if you have a max with with an aspect ratio It'll keep it as a square.

227
00:13:04,430 --> 00:13:09,790
OK which is what we want to hear an iPhone so click aspect ratio and you may notice I didn't do anything

228
00:13:09,790 --> 00:13:10,130
Mark.

229
00:13:10,150 --> 00:13:15,010
Well that's because the aspect ratio is the one that is the way it looks right now is the 14 to 25 but

230
00:13:15,010 --> 00:13:15,570
we don't want that.

231
00:13:15,580 --> 00:13:16,720
We want a 1 to 1 ratio.

232
00:13:16,720 --> 00:13:18,050
Nice little square.

233
00:13:18,070 --> 00:13:24,280
So double click the aspect ratio constraint and we're just going to type in one colon one and it's going

234
00:13:24,280 --> 00:13:26,000
to put it into a square.

235
00:13:26,020 --> 00:13:28,180
I hope this isn't overly confusing to you.

236
00:13:28,420 --> 00:13:33,490
So if I can recap this when you're working with a stack you remember stack views add the constraints

237
00:13:33,490 --> 00:13:34,360
for you.

238
00:13:34,470 --> 00:13:35,100
OK.

239
00:13:35,380 --> 00:13:37,200
But it didn't look the way we wanted it.

240
00:13:37,260 --> 00:13:42,490
It's it's smart thinking wasn't smart enough for our apps so we just a few limitations on the stack.

241
00:13:42,560 --> 00:13:45,410
One is we say hey don't let it be any wider than this.

242
00:13:45,430 --> 00:13:47,440
And then we also forced it to a square.

243
00:13:47,550 --> 00:13:47,800
OK.

244
00:13:47,800 --> 00:13:51,460
Using a 1 to one aspect ratio that way it always stays a square.

245
00:13:51,610 --> 00:13:52,240
OK.

246
00:13:52,540 --> 00:13:54,470
And so we got those constraints there.

247
00:13:54,490 --> 00:13:59,050
But of course this one didn't really obey Well what I'm going to do first is I'm going to go to my stack

248
00:13:59,080 --> 00:14:05,020
view and I want to change the properties because most of the time you don't need to set those same constraints

249
00:14:05,020 --> 00:14:06,620
on every single thing in there.

250
00:14:06,670 --> 00:14:09,070
Sometimes you might have to but sometimes you don't.

251
00:14:09,070 --> 00:14:14,420
And when do I not use constraints and when do I use constraints or when do I use that.

252
00:14:14,450 --> 00:14:19,080
You adjustments here in the in these items here.

253
00:14:19,600 --> 00:14:21,410
It's just you have to play and fill around with it.

254
00:14:21,520 --> 00:14:27,280
So what I'm going to do is make sure my distribution says feel equally OK and notice how it made the

255
00:14:27,280 --> 00:14:28,510
other ones match.

256
00:14:28,510 --> 00:14:30,880
So what happened was this first image it has limitations.

257
00:14:30,880 --> 00:14:31,040
Right.

258
00:14:31,030 --> 00:14:33,520
We set one to one aspect ratio and a max with.

259
00:14:33,550 --> 00:14:37,000
And when we say when we say feel equally then it has to adopt those.

260
00:14:37,000 --> 00:14:38,200
On the other items in there.

261
00:14:38,230 --> 00:14:41,980
And so we don't then we don't have to go and add those constraints because it's doing it for us automatically

262
00:14:42,070 --> 00:14:43,700
which is really nice.

263
00:14:43,720 --> 00:14:49,090
So now that we have the stack you looking about the way that we want K we're going to go and wow we

264
00:14:49,090 --> 00:14:52,960
should pin from the top down we're not ready to pin it yet so let's go ahead and start pinning these

265
00:14:52,960 --> 00:14:53,480
items.

266
00:14:53,620 --> 00:14:57,010
So we have pinned this I believe this image up here.

267
00:14:57,390 --> 00:14:59,940
So the next thing to do is to pin this.

268
00:14:59,950 --> 00:15:04,870
So what I'm going to do is I'm just going to pin it in the left margin at zero with the margins on and

269
00:15:04,870 --> 00:15:10,620
we'll say 100 from the top just to keep it equal and we'll give this a fix with a fix.

270
00:15:11,140 --> 00:15:12,620
So it doesn't do anything weird.

271
00:15:12,850 --> 00:15:17,920
And then this label here I'm just going to pin it self to this image right here.

272
00:15:17,920 --> 00:15:22,360
I had them in a stack when I was building this out and I just couldn't get the height and positioning

273
00:15:22,540 --> 00:15:23,850
the exact right way that I wanted.

274
00:15:23,850 --> 00:15:25,230
You can try it with a stack do.

275
00:15:25,360 --> 00:15:30,010
But again when stacked these aren't giving you the look that you want you you just set the manual constraints

276
00:15:30,010 --> 00:15:31,410
which is no big deal.

277
00:15:31,420 --> 00:15:35,290
So what we're going to do is I'm going to select this and this.

278
00:15:35,410 --> 00:15:42,070
OK and I'm going to click the align menu and I want to give these guys vertical centers here.

279
00:15:42,070 --> 00:15:49,420
Now the slopes label is going to adopt to the death slopes logo image because those already have constraints

280
00:15:49,420 --> 00:15:49,870
on them.

281
00:15:49,870 --> 00:15:53,770
So when I put vertical centers you know moved them slopes just slightly there.

282
00:15:53,770 --> 00:15:58,870
So these will now always be in the vertical center to each other always the same.

283
00:15:58,870 --> 00:16:04,100
Now what I'm going to do is click the slopes logo and I'm going to just pin it to the left.

284
00:16:04,270 --> 00:16:07,000
So pin it to the image here by 8.

285
00:16:07,340 --> 00:16:09,820
And yeah looks good.

286
00:16:09,830 --> 00:16:11,370
I don't think we need to know all that.

287
00:16:11,390 --> 00:16:13,720
There's no read there so I think that's not going to move anywhere.

288
00:16:13,790 --> 00:16:17,780
It's going to stay at the center of this image here and it's going to stay just to the right of it because

289
00:16:17,780 --> 00:16:19,650
we pinned over there to the right.

290
00:16:19,820 --> 00:16:21,340
So that's looking real nice.

291
00:16:21,410 --> 00:16:28,520
And then the next thing is holding shifts like these three buttons and click the stack view.

292
00:16:29,090 --> 00:16:34,910
And let's go over to the attributes and let's go ahead and distribution feel equally and let's just

293
00:16:34,940 --> 00:16:36,130
add some spacing.

294
00:16:36,170 --> 00:16:40,170
No big deal just some nice nice spacing.

295
00:16:40,190 --> 00:16:49,100
Very good aka you're working with staff they use an interface builder is kind of like like you know

296
00:16:49,100 --> 00:16:54,620
painting like Bob Ross like where you just kind of go on the canvas and you're just like you splash

297
00:16:54,620 --> 00:16:56,690
things on and you put a little inspiration in it

298
00:16:59,980 --> 00:17:02,600
for you.

299
00:17:03,770 --> 00:17:09,410
And I know it's a little annoying for those of us who are more scientific as US programmers are people

300
00:17:09,410 --> 00:17:12,740
who are more into math because we want everything to be perfect.

301
00:17:12,830 --> 00:17:16,750
But when it comes to us that use some things just aren't perfect.

302
00:17:16,760 --> 00:17:17,780
It's just the way that it is.

303
00:17:17,780 --> 00:17:23,270
But the benefit of it not being perfect is it looks good on multiple screen sizes without having to

304
00:17:23,590 --> 00:17:26,360
write tons of code which I think is more important.

305
00:17:26,360 --> 00:17:29,170
It's about the user experience more than anything else.

306
00:17:29,480 --> 00:17:31,640
So that looks good.

307
00:17:31,640 --> 00:17:33,500
We've gone ahead and made it equal.

308
00:17:33,500 --> 00:17:37,240
I just want to go ahead and pin this in the center of the container.

309
00:17:37,240 --> 00:17:41,690
Like so and then I'm going to pin it to the top of this.

310
00:17:42,100 --> 00:17:42,740
Let's see.

311
00:17:42,900 --> 00:17:49,700
It's this depth slopes image here 24 hours to say 20 let's say let's just leave it at 24.

312
00:17:49,700 --> 00:17:50,200
I like that.

313
00:17:50,210 --> 00:17:52,950
So 24.

314
00:17:53,230 --> 00:17:53,480
OK.

315
00:17:53,480 --> 00:17:56,660
So that's going to stay right there in the middle which is looking really good.

316
00:17:56,660 --> 00:17:56,910
OK.

317
00:17:56,930 --> 00:17:59,160
Now we have this bad boy here this stack to you.

318
00:17:59,540 --> 00:18:02,840
So let's do something similar it's pinnate 24 from the top.

319
00:18:02,840 --> 00:18:04,070
Similar to the other one.

320
00:18:04,130 --> 00:18:08,900
And in this case I will pin it to the edges so let's make sure margins are on and I'm going to say let's

321
00:18:09,120 --> 00:18:15,810
say eight from the left and eight from the right are perfect and let's go ahead and add some spacing

322
00:18:16,260 --> 00:18:17,230
to this stack.

323
00:18:17,310 --> 00:18:19,410
So we have the nice spacing in the middle.

324
00:18:19,410 --> 00:18:21,660
Notice how shrinks down automatically.

325
00:18:21,710 --> 00:18:23,420
OK this is really important.

326
00:18:23,430 --> 00:18:28,170
Remember when I went in here and I said it's a width of less than or equal to 100.

327
00:18:28,200 --> 00:18:32,490
We've basically given it permission to shrink itself down which is what we want if I just set max with

328
00:18:32,970 --> 00:18:34,860
this would not be doing what we want it to do.

329
00:18:34,860 --> 00:18:36,720
In fact we'd probably have something broken right now.

330
00:18:36,720 --> 00:18:41,910
So again when working with things inside of stacked view you can use fixed width and height but sometimes

331
00:18:41,910 --> 00:18:45,870
it can break and so it's better to use greater than or equal to or less than or equal to.

332
00:18:46,290 --> 00:18:51,530
And that's a good let's say 15 spacer and I'm OK with that right there.

333
00:18:52,110 --> 00:18:52,930
This is awesome.

334
00:18:52,930 --> 00:18:54,980
This has come this is really come on together.

335
00:18:55,110 --> 00:18:55,560
All right.

336
00:18:55,560 --> 00:18:57,960
And so yeah this is looking good.

337
00:18:57,960 --> 00:19:04,110
And then let's go ahead and command to duplicate this and I feel like it just did something naughty.

338
00:19:04,140 --> 00:19:04,710
It did.

339
00:19:04,740 --> 00:19:07,840
It just pasted junk out here in the no man's land.

340
00:19:08,400 --> 00:19:09,000
OK.

341
00:19:09,150 --> 00:19:11,710
All right in your face you just keep acting weird.

342
00:19:11,850 --> 00:19:15,020
So I just can see that it can even be in here.

343
00:19:15,050 --> 00:19:20,200
It does drag this down like so it's just acting weird.

344
00:19:20,370 --> 00:19:26,910
And in our stack you hear we had a spacing of 15 so we want this to be 15 away from the stack you above

345
00:19:26,910 --> 00:19:27,000
it.

346
00:19:27,000 --> 00:19:33,570
So I'm going to go ahead and pin it 15 from the top and again similarly eight from the left eight from

347
00:19:33,570 --> 00:19:36,660
the right and boom.

348
00:19:36,930 --> 00:19:38,550
I like it.

349
00:19:38,940 --> 00:19:41,410
You know it's there we don't have enough spacing on the bottom.

350
00:19:41,460 --> 00:19:42,700
I'm OK with that.

351
00:19:42,720 --> 00:19:43,620
What we could do.

352
00:19:43,620 --> 00:19:46,310
So it's less than or equal to 140.

353
00:19:46,440 --> 00:19:47,440
We can make it smaller.

354
00:19:47,460 --> 00:19:49,400
I could say 130 we can give that a shot.

355
00:19:49,440 --> 00:19:58,320
So if I said less than or equal to 1 30 it's still not enough Yeah it's OK.

356
00:19:58,380 --> 00:20:00,600
What you're probably asking why is this not working.

357
00:20:00,600 --> 00:20:05,100
The reason is stacked you add the constraints automatically so it will decide on its own if it wants

358
00:20:05,100 --> 00:20:06,330
to shrink it or not.

359
00:20:06,660 --> 00:20:11,130
So one thing we could do is reduce the space here and the space here to move these up but I don't want

360
00:20:11,130 --> 00:20:11,380
to.

361
00:20:11,430 --> 00:20:15,870
I'm OK with the way it looks if the designer really cares that much he can come yell at us later about

362
00:20:15,870 --> 00:20:17,130
all of this here.

363
00:20:17,130 --> 00:20:19,740
So let me make sure that this is all looking good.

364
00:20:19,740 --> 00:20:23,430
So if I go to i-Pad here I should look almost identical.

365
00:20:23,430 --> 00:20:24,320
OK cool.

366
00:20:24,330 --> 00:20:26,200
So here's the problem with the iPad right.

367
00:20:26,200 --> 00:20:31,380
So like well these mark these images are too big we need to change images to actually do that here.

368
00:20:31,470 --> 00:20:33,160
We're looking at like the images are too big.

369
00:20:33,180 --> 00:20:35,420
Yeah I know it looks like the iPhone right.

370
00:20:35,430 --> 00:20:37,030
But it.

371
00:20:37,260 --> 00:20:37,740
I don't know.

372
00:20:37,740 --> 00:20:41,970
It just doesn't feel like the right experience and it's not like this is not the right experience.

373
00:20:41,970 --> 00:20:46,540
It's a great experience for iPhone but not the right experience for for iPad.

374
00:20:46,560 --> 00:20:47,600
So I just change this image.

375
00:20:47,610 --> 00:20:58,200
The video on and this one is the code one I'm typing code and the data image code.

376
00:20:58,400 --> 00:20:59,660
Yeah there you go.

377
00:20:59,850 --> 00:21:03,500
Again these are very well named you can blame that on Evan laong our designer.

378
00:21:03,530 --> 00:21:05,140
Next time you see him.

379
00:21:05,270 --> 00:21:05,440
OK.

380
00:21:05,450 --> 00:21:09,140
So there's four images is not looking great and it's definitely not looking according to our designs

381
00:21:09,140 --> 00:21:10,860
if you remember correctly right.

382
00:21:11,090 --> 00:21:16,220
OK this is a better user experience because you know the icons are better you're utilizing the space.

383
00:21:16,220 --> 00:21:17,440
And this is over here.

384
00:21:17,510 --> 00:21:19,050
You know better laid out.

385
00:21:19,130 --> 00:21:23,930
You know you don't need to hear on the media the extra button that you know the iPad calls for where

386
00:21:23,930 --> 00:21:25,400
you can customize your dashboard.

387
00:21:25,410 --> 00:21:29,330
Remember you couldn't do that on iPhone because there's not enough screen space so we have few things

388
00:21:29,330 --> 00:21:35,030
to fix here but what we've done so far is we've built out the we've built out the layout for iPhone

389
00:21:36,050 --> 00:21:40,730
and is looking well and good so we're going to call this video done and in the next video we're actually

390
00:21:40,730 --> 00:21:46,790
going to use what's called size classes sized classes will allow you to specify specific traits for

391
00:21:46,790 --> 00:21:52,130
different screen sizes that affect that screen size only and other screen sizes and that's how we create

392
00:21:52,190 --> 00:21:56,360
wonderful user experiences without having to write any other code under the hood.

393
00:21:56,390 --> 00:22:00,620
You can hide stuff and turn things off but you don't have to write extra code which is really nice so

394
00:22:00,680 --> 00:22:01,370
that's it for now.

395
00:22:01,370 --> 00:22:04,670
Mark Price it does slows the com let's support i-Pad

396
00:22:13,490 --> 00:22:26,640
saying have a good.

397
00:22:26,970 --> 00:22:27,530
Have a good.