1
00:00:07,150 --> 00:00:11,460
Hey everybody what's going on this is Caleb with Deb's slopes dot com in this video.

2
00:00:11,650 --> 00:00:16,740
We're going to go ahead and pass our images from our table view into our image presentation visi.

3
00:00:16,780 --> 00:00:18,420
It's going to be super easy.

4
00:00:18,430 --> 00:00:23,530
We're actually just using static data so it's not really dependent on any loading or any you know passing

5
00:00:23,530 --> 00:00:25,180
from a certain subclass.

6
00:00:25,180 --> 00:00:28,680
We're just going to actually load it directly from our image array using the index path.

7
00:00:28,750 --> 00:00:29,960
So it's going to be really easy.

8
00:00:29,980 --> 00:00:36,940
So go ahead and pull open your project here and actually let's go into master view controller.

9
00:00:36,940 --> 00:00:45,580
Now we need to go ahead and select or call the delegate method call did select row at index path and

10
00:00:45,610 --> 00:00:47,780
let me make some more space here for you guys.

11
00:00:47,830 --> 00:00:51,970
This is the function that is called whenever a table view cell is selected.

12
00:00:51,970 --> 00:00:57,310
So what we're going to do is we're actually just going to call a function in here that's going to animate

13
00:00:57,580 --> 00:00:59,540
the selection back down.

14
00:00:59,560 --> 00:01:02,530
We're going to actually de-select the row and you're probably wondering why are we doing that.

15
00:01:02,620 --> 00:01:03,900
Mainly for us that x.

16
00:01:03,910 --> 00:01:10,510
But the cool thing if you look here if we select a table view cell there's already a Segway called show

17
00:01:10,510 --> 00:01:11,310
detail.

18
00:01:11,510 --> 00:01:12,180
OK.

19
00:01:12,220 --> 00:01:17,680
And that segue is going to go ahead and actually present this view controller upon our secondary navigation

20
00:01:17,680 --> 00:01:18,130
controller.

21
00:01:18,130 --> 00:01:19,770
So this is already linked up.

22
00:01:19,900 --> 00:01:25,510
But what we're going to do is we're actually going to go ahead and copy this Segway ID ok and go back

23
00:01:25,510 --> 00:01:27,220
into master view controller.

24
00:01:27,280 --> 00:01:33,820
Now like I said when we select our row we're going to go ahead and actually call table view de-select

25
00:01:33,850 --> 00:01:35,290
row and you're probably thinking this is done.

26
00:01:35,290 --> 00:01:39,550
This is like the most you know non-intuitive thing you'll see why in a second.

27
00:01:39,580 --> 00:01:44,190
So go ahead and pass in the index path and go hadn't set true for animated.

28
00:01:44,380 --> 00:01:46,390
OK we'll talk about this in just a second.

29
00:01:46,450 --> 00:01:51,510
But for now we need to go ahead and set up prepare for Segway.

30
00:01:51,520 --> 00:01:52,270
All right.

31
00:01:52,480 --> 00:01:58,250
Now let's go ahead and uncomment this we already had it commented before like so.

32
00:01:58,380 --> 00:02:00,000
Whoops that's the wrong button.

33
00:02:00,190 --> 00:02:01,920
Like so there we go.

34
00:02:01,930 --> 00:02:03,000
And as you can see.

35
00:02:03,010 --> 00:02:09,370
Show detail is already being used in the Segway identifier but where we're going to run into trouble

36
00:02:09,730 --> 00:02:16,390
is here in our object and here in our control or because we don't have an object's array that was from

37
00:02:16,390 --> 00:02:22,680
the initial project so delete that and go ahead and we're going to modify our view controller here.

38
00:02:22,690 --> 00:02:26,950
So we have controller but it's not of type detailed controller anymore.

39
00:02:27,010 --> 00:02:33,600
It's now of type image presentation Visi just like before our controller does not have a detail item

40
00:02:33,790 --> 00:02:35,790
but it does have an image.

41
00:02:35,950 --> 00:02:36,660
OK.

42
00:02:36,970 --> 00:02:43,180
Now the cool thing is we can get the index path because we're calling table view dot index path for

43
00:02:43,180 --> 00:02:44,310
selected row.

44
00:02:44,470 --> 00:02:49,980
That will give us the index path of whatever cell we've tapped and we set that here the way we're going

45
00:02:49,980 --> 00:02:55,260
to get our image is the same exact way that we are getting our names and our colors.

46
00:02:55,300 --> 00:02:59,340
We're going to call that particular array and pull out the index path that row.

47
00:02:59,530 --> 00:03:02,680
So for images we're going to call image array.

48
00:03:02,950 --> 00:03:08,830
Then like I said we're going to call index path dot row and that'll pull out the exact image for the

49
00:03:08,830 --> 00:03:10,270
particular cell we selected.

50
00:03:10,270 --> 00:03:16,360
Because remember in this everything matches up the camera image goes with the camera word and the red

51
00:03:16,360 --> 00:03:19,460
color everything is lined up the way it should be.

52
00:03:19,630 --> 00:03:22,570
And in a good app you would have that data aligned properly.

53
00:03:22,570 --> 00:03:26,650
Now this was also already a piece of our app.

54
00:03:26,650 --> 00:03:31,750
But what we're going to do is comment that out and then run on our app and then I want to uncomment

55
00:03:31,750 --> 00:03:33,250
it and show you what it actually does.

56
00:03:33,250 --> 00:03:39,730
So first let's run it let's test our selection to see if it actually properly passes the image into

57
00:03:39,730 --> 00:03:41,060
our image presentation.

58
00:03:41,060 --> 00:03:42,440
VC okay.

59
00:03:42,530 --> 00:03:47,550
It will set our image here then in view that load is going to actually load it into the image view.

60
00:03:47,830 --> 00:03:53,370
So let's go ahead let's stay in here so that we can uncomment this to see what it does.

61
00:03:53,530 --> 00:03:59,230
But we're going to go ahead and build this to an iPhone 8 plus and as soon as the simulator pops open

62
00:03:59,530 --> 00:04:06,020
we'll be able to select a table view cell and hopefully load an image into our visi.

63
00:04:06,190 --> 00:04:17,050
So here's our sim beautiful k cool loading loading.

64
00:04:17,080 --> 00:04:17,450
All right.

65
00:04:17,450 --> 00:04:23,930
So we have our cells here with our names and everything that's great but we need to go ahead and select

66
00:04:23,930 --> 00:04:24,080
one.

67
00:04:24,080 --> 00:04:24,830
Let's see if it works.

68
00:04:24,830 --> 00:04:30,540
If I select a camera it should load the camera image look at that it does very very cool.

69
00:04:30,530 --> 00:04:33,900
So let's try animals and it loads the picture of the animal.

70
00:04:34,010 --> 00:04:34,890
How about flowers.

71
00:04:34,910 --> 00:04:35,560
Yeah.

72
00:04:35,600 --> 00:04:36,530
Right on.

73
00:04:36,560 --> 00:04:42,500
OK so since this is a split view controller let's rotate the device by pressing command and then left

74
00:04:42,560 --> 00:04:47,630
or right on the directional keys and look at that we get a camera.

75
00:04:47,630 --> 00:04:53,360
We get a city we get flowers whenever we select it the image loads in full screen.

76
00:04:53,360 --> 00:05:00,320
But you're probably expecting to see a button here usually in really good apps that utilize UI split

77
00:05:00,320 --> 00:05:00,970
view controller.

78
00:05:00,970 --> 00:05:05,550
You'll see an image here that looks like two diagonal arrows pointing away from each other.

79
00:05:05,720 --> 00:05:10,700
And what that's going to do is it's going to collapse this second view controller to make this controller

80
00:05:10,700 --> 00:05:11,920
full screen.

81
00:05:11,960 --> 00:05:14,960
That's actually what these this code does here.

82
00:05:14,960 --> 00:05:21,320
So if you uncomment it says controller the navigation item K which means the navigation item is this

83
00:05:21,320 --> 00:05:22,150
button here.

84
00:05:22,370 --> 00:05:28,410
Dot left bar button item OK this button is equal to split view controller.

85
00:05:28,520 --> 00:05:31,090
OK because remember we can access this property.

86
00:05:31,460 --> 00:05:39,440
Thanks to just iOS it's out of the box for us and we can go ahead and access display mode button item.

87
00:05:39,770 --> 00:05:40,360
OK.

88
00:05:40,640 --> 00:05:43,760
So if you select this and you actually see what it means.

89
00:05:44,150 --> 00:05:48,370
This is a button that changes the display mode of the view controller.

90
00:05:48,600 --> 00:05:49,130
OK.

91
00:05:49,270 --> 00:05:53,270
It's going to allow the user to explicitly pull it open in full screen.

92
00:05:53,300 --> 00:05:59,500
And what we're doing here is we're setting controller that navigation item dot left items supplement

93
00:05:59,510 --> 00:06:01,200
back button is true.

94
00:06:01,490 --> 00:06:03,290
And instead of going back.

95
00:06:03,290 --> 00:06:08,170
So instead of tapping it it goes back to this new controller like it does when we are right side up.

96
00:06:08,180 --> 00:06:10,050
OK it's back button.

97
00:06:10,250 --> 00:06:16,490
When we are in a split view controller mode it's going to supplement the back button with the display

98
00:06:16,490 --> 00:06:19,920
button that we want which is the display mode full screen button.

99
00:06:20,000 --> 00:06:20,660
OK.

100
00:06:21,110 --> 00:06:26,060
Now let's go ahead and build and run it with this in place and let's see how that changes the interaction

101
00:06:26,090 --> 00:06:27,800
in our application.

102
00:06:27,800 --> 00:06:29,220
It's going to launch here.

103
00:06:30,380 --> 00:06:31,190
OK let's test it.

104
00:06:31,190 --> 00:06:33,050
Camera that looks normal.

105
00:06:33,140 --> 00:06:34,280
Very cool.

106
00:06:34,280 --> 00:06:35,280
That looks good.

107
00:06:35,450 --> 00:06:36,110
OK.

108
00:06:36,110 --> 00:06:42,140
Let's rotate it and look at that we get this nice full screen button and watch what happens when I click

109
00:06:42,140 --> 00:06:43,080
on it.

110
00:06:43,550 --> 00:06:45,830
It zooms up in full screen.

111
00:06:45,830 --> 00:06:47,450
That's so cool.

112
00:06:47,690 --> 00:06:53,000
So do you see that I can actually open it in full screen and it will independently scroll.

113
00:06:53,000 --> 00:06:55,760
Thanks to our constraints which is really really neat.

114
00:06:55,760 --> 00:06:57,160
So we can do all that cool stuff.

115
00:06:57,170 --> 00:07:00,910
And you know what I told you I would talk about this later and I haven't yet.

116
00:07:00,920 --> 00:07:03,950
So when we select a row we get that animation right.

117
00:07:03,950 --> 00:07:05,080
It becomes gray.

118
00:07:05,450 --> 00:07:11,600
And when we release it fades away that's only because we're calling de-select row.

119
00:07:11,600 --> 00:07:17,060
Now if we were to not do that when we select it it would get stuck in this gray and it doesn't look

120
00:07:17,060 --> 00:07:17,920
very good.

121
00:07:17,960 --> 00:07:23,330
So I wanted to make it nice and engaging where you click and it kind of flashes and then goes back to

122
00:07:23,330 --> 00:07:24,560
its original color.

123
00:07:24,620 --> 00:07:26,240
Hence why I called Table View.

124
00:07:26,270 --> 00:07:27,590
De-select row.

125
00:07:27,620 --> 00:07:32,810
So this is looking really good although something that I don't like about it is that we can't actually

126
00:07:32,810 --> 00:07:35,360
see every cell when we rotate.

127
00:07:35,360 --> 00:07:36,610
And I think that we should.

128
00:07:36,620 --> 00:07:41,900
So let's set up that configuration now by actually calling another delegate method of our table view

129
00:07:42,060 --> 00:07:47,480
called height for row at index path and that's going to ask the delegate for a specific height for each

130
00:07:47,480 --> 00:07:49,070
cell k.

131
00:07:49,310 --> 00:07:52,780
So what we're going to do is we're going to return a value for the height of each cell.

132
00:07:52,790 --> 00:08:00,530
So return but now we need to think we want the height of the table view and we want to divide that by

133
00:08:00,530 --> 00:08:03,260
the amount of items in the table V right.

134
00:08:03,260 --> 00:08:08,810
So if we have 6 items we want to take the height and divide it by 6 to get a perfect height for each

135
00:08:08,810 --> 00:08:18,020
cell so we can say table view frame height divided by image array K Dot count because that means we

136
00:08:18,020 --> 00:08:21,300
have 6 images 6 6 items to divide by.

137
00:08:21,470 --> 00:08:27,050
But if you build this we're going to get an error saying that we can't divide C.G. float which is this

138
00:08:27,050 --> 00:08:28,650
value the height of the table view.

139
00:08:29,000 --> 00:08:33,370
And int k which is the the count of the array.

140
00:08:33,380 --> 00:08:39,790
So what we can do is call C.G. float and we can actually cast the count as a C.G. float.

141
00:08:39,800 --> 00:08:40,920
All right.

142
00:08:41,000 --> 00:08:43,740
Now let's go ahead and head into the storyboard really quick.

143
00:08:43,880 --> 00:08:46,080
We need to dissect a few things.

144
00:08:46,100 --> 00:08:49,210
So select the table view and then go into the size inspector.

145
00:08:49,370 --> 00:08:53,680
Go ahead and delete that 120 and set it to automatic.

146
00:08:53,870 --> 00:08:55,750
Then select the cell itself.

147
00:08:55,800 --> 00:09:01,220
Either clicking here or in the storyboard and also get rid of that custom height and it's going to shrink

148
00:09:01,220 --> 00:09:02,250
up here.

149
00:09:02,400 --> 00:09:07,180
But the cool thing is that thanks to this code that we just wrote we're going to have the proper height

150
00:09:07,190 --> 00:09:11,030
so let's build and run it again and let's make sure everything looks good.

151
00:09:11,810 --> 00:09:13,620
OK.

152
00:09:13,670 --> 00:09:14,980
Very cool.

153
00:09:15,050 --> 00:09:16,700
Let's see.

154
00:09:16,700 --> 00:09:17,020
All right.

155
00:09:17,030 --> 00:09:17,540
Interesting.

156
00:09:17,540 --> 00:09:23,990
So it appears that the height is good but look it's only accounting for the whole table view that's

157
00:09:23,990 --> 00:09:24,920
behind here.

158
00:09:25,100 --> 00:09:25,920
And you know what.

159
00:09:25,920 --> 00:09:30,230
I guess that's fine but if we rotate Let's see if it actually updates the height like it's supposed

160
00:09:30,230 --> 00:09:30,990
to.

161
00:09:31,520 --> 00:09:32,340
OK.

162
00:09:32,360 --> 00:09:33,050
Very cool.

163
00:09:33,050 --> 00:09:34,750
Look at that so it.

164
00:09:34,780 --> 00:09:37,750
Whoops that's the top thing there.

165
00:09:37,760 --> 00:09:40,750
So look at that it actually shrinks down when we rotate.

166
00:09:40,760 --> 00:09:43,160
And then when we go back it is the appropriate height.

167
00:09:43,160 --> 00:09:44,570
That's super cool.

168
00:09:44,900 --> 00:09:51,130
So that's exactly as I'm expecting it to be let's say.

169
00:09:51,230 --> 00:09:58,460
Well let's see if there is a way that we can access maybe the view or oh you know what let's try a table

170
00:09:58,460 --> 00:10:00,190
view up background view.

171
00:10:00,850 --> 00:10:06,640
OK let's see if we can actually use the frame height of the background view.

172
00:10:07,010 --> 00:10:08,230
Oh we have to unwrap it here.

173
00:10:08,230 --> 00:10:10,170
Whoops OK there we go.

174
00:10:10,200 --> 00:10:15,470
BuildOn run let's see if that is the right size because what I'm trying to do is I'm trying to make

175
00:10:15,470 --> 00:10:21,890
it so that the cells fit beautifully in the table view without actually being oh yeah no that's not

176
00:10:21,890 --> 00:10:22,070
good.

177
00:10:22,070 --> 00:10:25,860
We don't actually have a background view to access I guess.

178
00:10:26,000 --> 00:10:29,460
Well I do know that the top bar is.

179
00:10:29,930 --> 00:10:30,280
Yeah.

180
00:10:30,310 --> 00:10:30,520
Okay.

181
00:10:30,540 --> 00:10:32,240
And the top bar is 50.

182
00:10:32,240 --> 00:10:36,290
So let's actually just go ahead and subtract 50 then divide.

183
00:10:36,290 --> 00:10:43,610
So we'll do let's see our order of operations here we should be doing this table view minus 50 and then

184
00:10:43,610 --> 00:10:46,610
divided by the C-g float value.

185
00:10:46,610 --> 00:10:54,010
So build and run it one more time we're just subtracting the the amount of space that there is hidden.

186
00:10:54,180 --> 00:10:55,280
And oh yeah look at that.

187
00:10:55,280 --> 00:10:56,360
That looks great.

188
00:10:56,360 --> 00:10:57,840
So we get a little bit of overhang.

189
00:10:57,860 --> 00:10:59,060
Maybe it's 60.

190
00:10:59,060 --> 00:11:05,180
I thought it was 50 let's try 60 and let's see if that helps we should have no whitespace on the bottom

191
00:11:05,270 --> 00:11:09,080
and a nice even table view that's going to be you know nice to look at.

192
00:11:09,290 --> 00:11:09,800
OK.

193
00:11:09,800 --> 00:11:10,430
Very cool.

194
00:11:10,430 --> 00:11:11,560
That looks great.

195
00:11:11,660 --> 00:11:17,910
If I go up or down you're going to notice there's no issues and if I rotate we do have a problem.

196
00:11:17,930 --> 00:11:18,230
Ooh.

197
00:11:18,260 --> 00:11:19,070
That's not good.

198
00:11:19,190 --> 00:11:22,810
Because it appears that the top bar becomes more narrow.

199
00:11:23,090 --> 00:11:24,950
So you know what.

200
00:11:24,950 --> 00:11:35,150
Let's actually go ahead and say minus navigation controller dot navigation bar dot frame dot height

201
00:11:35,210 --> 00:11:38,000
so that we can actually subtract the height of the navigation bar.

202
00:11:38,120 --> 00:11:42,970
No matter no matter what and it looks like we're going to have to unwrap this.

203
00:11:43,100 --> 00:11:43,880
Yeah.

204
00:11:44,180 --> 00:11:45,560
Well let's be safe.

205
00:11:45,560 --> 00:11:54,670
Let's go ahead and cut this and then let's just say guard let nav bar height equals and paste that in.

206
00:11:54,890 --> 00:11:57,470
Else return basically.

207
00:11:57,520 --> 00:12:04,550
So if there is no nav bar height will just return and let's go ahead and do that.

208
00:12:04,730 --> 00:12:06,890
Build and run.

209
00:12:06,890 --> 00:12:07,510
There we go.

210
00:12:07,540 --> 00:12:09,370
We're getting an issue here.

211
00:12:09,500 --> 00:12:10,480
Should return a value.

212
00:12:10,580 --> 00:12:12,710
OK so maybe.

213
00:12:12,830 --> 00:12:13,450
Well you know what.

214
00:12:13,550 --> 00:12:17,720
Maybe guard lead is not the best option because I don't want to actually have to return that let's just

215
00:12:17,720 --> 00:12:28,650
do if left and then yeah really cool if let nav bar equals navigation controller or BAARDA height.

216
00:12:29,120 --> 00:12:29,790
We're going to go ahead.

217
00:12:29,810 --> 00:12:30,370
OK.

218
00:12:30,380 --> 00:12:34,490
So let's return return what we were going to.

219
00:12:34,490 --> 00:12:38,200
Otherwise we're going to go ahead and return the same thing.

220
00:12:38,210 --> 00:12:39,850
But let's just do 60.

221
00:12:39,890 --> 00:12:40,970
You know that was pretty good.

222
00:12:40,970 --> 00:12:45,110
It's not perfect but for some reason we can't access that nav bar height.

223
00:12:45,170 --> 00:12:49,200
We will will use 60 as a static value.

224
00:12:49,670 --> 00:12:52,870
OK so look at that nice and even it uses the nav bar height.

225
00:12:53,030 --> 00:12:55,010
Let's rotate and look at that.

226
00:12:55,010 --> 00:13:00,960
It looks like we are using the nav bar height for when the app originally loads.

227
00:13:01,070 --> 00:13:05,810
So we could do some work in here to make it so that when you rotate it reloads the table view and updates

228
00:13:05,810 --> 00:13:06,140
the height.

229
00:13:06,140 --> 00:13:07,640
But guys this is good enough.

230
00:13:07,640 --> 00:13:08,370
This is a.

231
00:13:08,390 --> 00:13:09,020
OK.

232
00:13:09,020 --> 00:13:13,850
And in that case I think it's actually too much work to do this in general so sorry I'm going to go

233
00:13:13,850 --> 00:13:19,760
ahead and delete this and just stick with 60 because 60 was good enough even though when we rotate it

234
00:13:19,760 --> 00:13:20,940
looks a little funky.

235
00:13:20,990 --> 00:13:23,530
We're going to go ahead and stick with 60 for now.

236
00:13:23,600 --> 00:13:27,030
You could do more to make this better but we've already spent enough time on this.

237
00:13:27,080 --> 00:13:33,380
So the height for the rose is good but when we rotate the font just looks a little bit too big.

238
00:13:33,560 --> 00:13:39,020
So I think I want to set it so that when we rotate the device the font gets smaller and when we rotate

239
00:13:39,020 --> 00:13:46,290
back the font is its normal size and we can use something in here in storyboard check it out.

240
00:13:46,370 --> 00:13:51,800
If I select this title here let's go into the content view and select the title go into the attributes

241
00:13:51,820 --> 00:13:54,170
inspector and check it out guys.

242
00:13:54,230 --> 00:13:59,240
I can go ahead and on the font property I can go ahead and click this plus sign and I can introduce

243
00:13:59,270 --> 00:14:00,730
a variation.

244
00:14:00,730 --> 00:14:10,100
Now if we rotate our device to the side that makes it have a compact height and a regular width.

245
00:14:10,320 --> 00:14:11,010
OK.

246
00:14:11,090 --> 00:14:17,500
Now regular width is usually reserved for I-pads only and most I-phones have a compact height and width.

247
00:14:17,510 --> 00:14:26,830
But the iPhone 8 plus K has a compact compact with and a regular height since the is a little bit bigger.

248
00:14:26,840 --> 00:14:33,600
So since I split view controller is used on the bigger phones we can go ahead and add this variation.

249
00:14:33,800 --> 00:14:39,320
And then for compact width and regular height we can go ahead and actually lower the font size like

250
00:14:39,320 --> 00:14:46,940
so and I'm actually going to bump it down quite substantially so that when we rotate we can see that

251
00:14:46,940 --> 00:14:49,180
it actually is the right way.

252
00:14:49,190 --> 00:14:53,770
Now with this compact and the oh you know what guys know I have this backwards.

253
00:14:53,930 --> 00:14:55,410
Let's get rid of this.

254
00:14:55,460 --> 00:14:56,990
I was I was thinking the wrong thing.

255
00:14:56,990 --> 00:15:03,050
The width will be regular and the height will be compact because when we're sideways it's much different.

256
00:15:03,290 --> 00:15:08,540
So if we add this variation we can take the font from size 48 down to maybe size.

257
00:15:08,540 --> 00:15:10,360
I don't know how about 30.

258
00:15:10,850 --> 00:15:12,760
And you'll notice nothing changes here.

259
00:15:12,920 --> 00:15:14,470
But if I rotate.

260
00:15:14,630 --> 00:15:18,500
You'll see that the font is going to be smaller.

261
00:15:18,520 --> 00:15:23,600
OK it's going to allow us to use that smaller font that we want and we can't see it at the moment because

262
00:15:23,990 --> 00:15:27,420
we're not actually running the app but let's go ahead and let's set it to be 30.

263
00:15:27,860 --> 00:15:30,540
And now let's go ahead and build and run.

264
00:15:31,170 --> 00:15:31,520
OK.

265
00:15:31,550 --> 00:15:32,690
Like so.

266
00:15:33,140 --> 00:15:34,930
Oh and we are seeing this on an iPhone 8.

267
00:15:34,970 --> 00:15:37,460
That's also why we can't see the variation.

268
00:15:37,550 --> 00:15:40,290
But watch this guy's big font.

269
00:15:40,340 --> 00:15:43,970
When I rotated the font should get smaller and it doesn't.

270
00:15:43,970 --> 00:15:44,810
Interesting.

271
00:15:45,080 --> 00:15:47,940
So let's think about what is going on here.

272
00:15:47,990 --> 00:15:51,990
We have a cell k we have a title here.

273
00:15:51,990 --> 00:15:57,440
When the width is regular and the height is compact we should get smaller.

274
00:15:57,480 --> 00:16:05,520
Let's view this as an 8 plus and let's put it sideways OK so that appears to actually be doing what

275
00:16:05,520 --> 00:16:06,180
it's supposed to.

276
00:16:06,180 --> 00:16:07,260
Big fat here.

277
00:16:07,410 --> 00:16:09,310
When we rotate we get a little fun.

278
00:16:09,330 --> 00:16:16,120
Let's make it extra small maybe I just can't tell when that's working so let's make it 24.

279
00:16:16,200 --> 00:16:18,860
Now let's build and run it and let's go see how it looks.

280
00:16:20,560 --> 00:16:25,050
Because these height variations should help us to make a better user experience.

281
00:16:25,420 --> 00:16:25,900
Ok cool.

282
00:16:25,900 --> 00:16:26,470
Big font.

283
00:16:26,470 --> 00:16:31,950
When we are in portrait mode landscape the font is still not becoming smaller.

284
00:16:31,950 --> 00:16:33,560
So this is interesting.

285
00:16:33,610 --> 00:16:36,490
I wonder why it shows up properly here.

286
00:16:36,850 --> 00:16:43,300
But when I run it on my 8 plus the font is not shrinking the way it's supposed to.

287
00:16:43,510 --> 00:16:48,160
Now I want to make sure that our height has been set to default.

288
00:16:48,160 --> 00:16:49,030
OK that's good.

289
00:16:49,030 --> 00:16:52,530
Same with our table view set to automatic.

290
00:16:52,660 --> 00:16:53,920
OK that's that's all fine.

291
00:16:53,920 --> 00:16:56,140
That's the way it's supposed to be.

292
00:16:56,230 --> 00:16:59,210
So let's think what could the problem be.

293
00:16:59,410 --> 00:17:01,610
We have a constraint here.

294
00:17:01,840 --> 00:17:02,510
We're setting it.

295
00:17:02,530 --> 00:17:05,350
So when it is well let's let's look at it again

296
00:17:07,960 --> 00:17:09,270
anywhere.

297
00:17:09,570 --> 00:17:17,170
OK we want it to be regular with with a compact height and we add that variation then we're going to

298
00:17:17,170 --> 00:17:21,690
go ahead and when it's in that way we're going to set it to be size 24.

299
00:17:21,970 --> 00:17:26,100
Then if it goes back to its normal rotation it's going to have its big fun.

300
00:17:26,110 --> 00:17:26,580
OK.

301
00:17:26,740 --> 00:17:27,760
That looks good.

302
00:17:27,940 --> 00:17:33,300
Let's go ahead and build and run it again and see if that helps to solve our problem here.

303
00:17:33,310 --> 00:17:36,280
So here we go we are running the app.

304
00:17:36,280 --> 00:17:38,350
It's going to pop open here.

305
00:17:38,350 --> 00:17:39,890
Very cool.

306
00:17:39,890 --> 00:17:43,790
And let's go ahead and let's see what we get.

307
00:17:44,680 --> 00:17:45,130
Interesting.

308
00:17:45,130 --> 00:17:50,920
So it does not appear to be working the way that it's supposed to that's really strange.

309
00:17:50,920 --> 00:17:57,450
I'm going to try setting maybe compact height and compact with oh you know what I wonder.

310
00:17:57,670 --> 00:17:58,180
Yeah.

311
00:17:58,180 --> 00:17:58,470
OK.

312
00:17:58,480 --> 00:18:06,520
So since this rotates the width of the screen is regular But this view controller has a compact with

313
00:18:06,820 --> 00:18:07,930
and a compact height.

314
00:18:07,960 --> 00:18:09,370
At the same time.

315
00:18:09,490 --> 00:18:16,200
So I'm going to go ahead and actually introduce a size variation for compact width and height.

316
00:18:16,240 --> 00:18:22,460
So select title select the variation button and do compact with and compact height.

317
00:18:22,780 --> 00:18:27,360
Then go ahead and set it to a smaller font size like so.

318
00:18:27,580 --> 00:18:32,500
And then we can go ahead and build and run again and test to see if this is looking the way it's supposed

319
00:18:32,500 --> 00:18:32,950
to.

320
00:18:33,160 --> 00:18:38,190
When you deal with two view controllers on the screen it starts to get a little confusing.

321
00:18:38,200 --> 00:18:39,180
So this looks good.

322
00:18:39,220 --> 00:18:39,910
Big font.

323
00:18:39,940 --> 00:18:44,670
When I rotate small font that is what I was looking for people.

324
00:18:44,740 --> 00:18:45,190
Amazing.

325
00:18:45,190 --> 00:18:49,060
So when we rotate we have nice big font when we rotate.

326
00:18:49,060 --> 00:18:55,000
We have small font but still matching the same ratio of font to sell.

327
00:18:55,000 --> 00:18:57,090
So that was what I was going for.

328
00:18:57,220 --> 00:19:01,480
The size classes there can be a little confusing especially if you're working with two VCs So that's

329
00:19:01,480 --> 00:19:06,460
just something to look out for when you have when you have two VCs in the same controller.

330
00:19:06,470 --> 00:19:08,140
It can get a little bit tricky.

331
00:19:08,140 --> 00:19:12,240
So thank you guys so much for going through this video.

332
00:19:12,250 --> 00:19:18,430
This means we are one step closer to perfecting our U.S. but Wii U controller app.

333
00:19:18,430 --> 00:19:19,330
Awesome work guys.

334
00:19:19,330 --> 00:19:24,210
In the next video we're going to go ahead and just kind of test out and tweak the functionality of splitter.

335
00:19:24,550 --> 00:19:28,750
And I'm also going to go ahead and give you a challenge to make this app even better so I'll see in

336
00:19:28,750 --> 00:19:29,470
the next video.

337
00:19:29,470 --> 00:19:31,390
Great job with this one.