1
00:00:07,100 --> 00:00:10,650
Hey everybody what's going on this is callup with slopes dot com.

2
00:00:10,720 --> 00:00:16,390
And in this video we're going to go ahead and set up our image presentation Visi which is going to be

3
00:00:16,390 --> 00:00:20,230
the actual part of the split view controller that displays the image.

4
00:00:20,230 --> 00:00:22,860
When we select a particular table view cell.

5
00:00:22,870 --> 00:00:26,640
So let's go ahead and let's pull up on our project where we left it off.

6
00:00:26,830 --> 00:00:29,220
And that was in Detail View Controller.

7
00:00:29,350 --> 00:00:29,680
OK.

8
00:00:29,710 --> 00:00:36,000
Now if we go back to our story board we can see that our master controller is here with our table view.

9
00:00:36,040 --> 00:00:38,760
We already know that works and looks beautiful.

10
00:00:38,770 --> 00:00:45,700
Secondarily we've got our Detail View Controller here and there is a little label here that you know

11
00:00:45,700 --> 00:00:47,830
what we actually don't need.

12
00:00:47,830 --> 00:00:54,490
So select it like I did then press delete and now we need to go back in here and delete this Iby outlet

13
00:00:54,490 --> 00:00:56,750
for that label because we don't actually need it.

14
00:00:57,070 --> 00:01:03,940
And with that in mind as well we're not going to need our configure view function because we're not

15
00:01:03,940 --> 00:01:07,510
actually passing any information to the table anymore.

16
00:01:07,510 --> 00:01:12,930
Go ahead and keep feuded load and get rid of did receive memory warning and this detail item.

17
00:01:13,150 --> 00:01:15,820
OK get rid of all of that blanket out.

18
00:01:15,970 --> 00:01:19,390
And now what we can do is go back to main storyboard.

19
00:01:19,390 --> 00:01:27,050
We can go ahead and actually select a UI image view and then drag on like so.

20
00:01:27,370 --> 00:01:34,380
And you know what I'm going to go ahead and actually make this a square like so and just center there.

21
00:01:34,540 --> 00:01:40,510
But I want this image to extend to the full left and right sides of the screen so I'm going to go ahead

22
00:01:40,540 --> 00:01:42,040
and just constrain it here.

23
00:01:42,040 --> 00:01:44,250
Zero from the left zero from the right.

24
00:01:44,380 --> 00:01:50,380
But then I'm going to go ahead and tick aspect ratio and it will keep it the exact aspect ratio it currently

25
00:01:50,380 --> 00:01:51,510
is which is 1 to 1.

26
00:01:51,520 --> 00:01:58,390
So select that and the only thing we need to do is to align it vertically in the container so select

27
00:01:58,600 --> 00:01:59,870
vertically and container.

28
00:02:00,040 --> 00:02:06,700
Add one constraint and voila we have a square that is the width of the screen and it's going to stay

29
00:02:06,700 --> 00:02:07,810
there right in the center.

30
00:02:07,810 --> 00:02:09,190
Very cool stuff.

31
00:02:09,370 --> 00:02:14,020
And let's go ahead and let's actually set an image in here just for fun to see what it looks like.

32
00:02:14,140 --> 00:02:19,310
And of course like I did it's kind of squished right because it's on scale to fill.

33
00:02:19,510 --> 00:02:25,690
So change it to Aspect fill and that way when we rotate the screen it's going to go ahead and actually

34
00:02:25,780 --> 00:02:27,120
still show aspect.

35
00:02:27,190 --> 00:02:29,110
Phil that's exactly what we want.

36
00:02:29,120 --> 00:02:31,350
So that is now in place.

37
00:02:31,360 --> 00:02:35,620
I'm going to go ahead and actually get rid of that image so that it doesn't show up by default.

38
00:02:35,620 --> 00:02:38,760
We want it to be clear by default until we select something.

39
00:02:38,830 --> 00:02:46,620
But now we need to go ahead and wire up this view controller here with our image view with an IB outlet.

40
00:02:46,630 --> 00:02:53,950
So open the assistant editor and go ahead and right click and drag into your view controller class then

41
00:02:54,160 --> 00:02:55,620
just go ahead and name this.

42
00:02:55,690 --> 00:02:56,950
How about

43
00:02:59,170 --> 00:03:00,900
photo image.

44
00:03:00,930 --> 00:03:02,590
Well that's a that's not a good name photo image.

45
00:03:02,620 --> 00:03:09,880
How about item image view because we're basically selecting an item in our table view and that's presenting

46
00:03:09,880 --> 00:03:10,780
the image.

47
00:03:10,900 --> 00:03:16,740
We can't just use the image view because there is another property that Hardy has that name reserved.

48
00:03:16,930 --> 00:03:19,340
So we'll just call it item image field.

49
00:03:19,570 --> 00:03:20,240
OK.

50
00:03:20,500 --> 00:03:27,400
So now we need to think how are we going to pass an image into this view controller.

51
00:03:27,490 --> 00:03:33,310
What are we going to do to pass it an image and a great way we can do that is by just setting an image

52
00:03:33,310 --> 00:03:34,980
property here that's optional.

53
00:03:35,200 --> 00:03:41,260
Then when we instantiate this view controller elsewhere we can go ahead and actually set the value of

54
00:03:41,260 --> 00:03:42,660
that variable.

55
00:03:42,910 --> 00:03:48,700
And then in our view to load function we can just call image view image and then set it to be that image

56
00:03:48,700 --> 00:03:49,120
property.

57
00:03:49,120 --> 00:03:57,610
So go ahead and type var image of type image OK and make it optional like so then we're going to go

58
00:03:57,610 --> 00:04:02,430
ahead and say item image view image equals image.

59
00:04:02,620 --> 00:04:03,010
OK.

60
00:04:03,010 --> 00:04:08,810
Now this controller is only going to be presentable when we actually select the cell.

61
00:04:08,830 --> 00:04:13,600
And when we select the cell we're going to set up prepare for Segway to pass an image and when it's

62
00:04:13,600 --> 00:04:14,140
presented.

63
00:04:14,140 --> 00:04:16,550
But that'll be in the future video.

64
00:04:16,570 --> 00:04:22,330
And I want to actually rename this to be image presentation visi.

65
00:04:22,480 --> 00:04:27,550
Now we're going to change it in a few places so go ahead and just copy that and paste it up here at

66
00:04:27,550 --> 00:04:29,340
the top just so that it matches.

67
00:04:29,380 --> 00:04:35,800
Change the name here in the document outline and then go into main that storyboard select that view

68
00:04:35,800 --> 00:04:38,720
controller and go to the identity inspector.

69
00:04:38,950 --> 00:04:45,250
Then you can get rid of this and type image presentation VC and press enter to lock it in place.

70
00:04:45,250 --> 00:04:47,130
Now there's another thing we should do.

71
00:04:47,140 --> 00:04:51,550
I don't really like that this says detail up at the top it says Master and detail.

72
00:04:51,880 --> 00:04:57,280
So what I'm going to do is I'm going to select the nav bar here and go to the assistant editor and oh

73
00:04:57,280 --> 00:05:05,200
you know I think it's actually this one here that will actually be in control of that.

74
00:05:05,390 --> 00:05:06,260
Perhaps not.

75
00:05:06,260 --> 00:05:09,080
We have Master OK in the title there we can set.

76
00:05:09,080 --> 00:05:13,630
So we're going to actually call this splits which is the name of our app.

77
00:05:13,880 --> 00:05:21,260
And when we do that it changes properly which is good but then our detailed still says detail and you

78
00:05:21,260 --> 00:05:21,530
know what.

79
00:05:21,530 --> 00:05:28,190
Even if we click on it it still is going to say that if we click on it here it still says it and how

80
00:05:28,190 --> 00:05:31,940
we're going to get rid of this label is we're going to go ahead and select the View Controller and then

81
00:05:31,940 --> 00:05:36,810
you'll notice there is a little item here called detail and that is the navigation bar item.

82
00:05:36,980 --> 00:05:42,120
If you click on that check out which shows up in the assistant editor here it says detail.

83
00:05:42,170 --> 00:05:44,280
If we delete that and push enter.

84
00:05:44,330 --> 00:05:48,470
You'll notice that title goes away and we can set that if we want but I don't see a purpose for it in

85
00:05:48,470 --> 00:05:49,730
this app.

86
00:05:49,730 --> 00:05:54,620
And we're also going to set the back button to simply say back when we push enter.

87
00:05:54,800 --> 00:05:57,360
It's not going to update here where it says master.

88
00:05:57,530 --> 00:06:04,820
But if we go into here into this new controller select the navigation bar we can actually go ahead and

89
00:06:04,850 --> 00:06:11,300
do some work to set this up and I think actually we may have to go all the way back to this one.

90
00:06:11,300 --> 00:06:17,060
The split view controller and then check in here as well because this is connected to the same thing

91
00:06:17,090 --> 00:06:24,290
and this one is called Master as you can see although we wanted to set this to say splits right.

92
00:06:24,320 --> 00:06:30,380
That's the name of our screen and it shows up or it's supposed to show up I guess I did it.

93
00:06:30,500 --> 00:06:34,400
But now we need to set that back button to say back and not master.

94
00:06:34,430 --> 00:06:37,170
So I set it to say back there and check it out down here.

95
00:06:37,170 --> 00:06:40,190
Now it says back so we need to set both.

96
00:06:40,190 --> 00:06:44,870
So they both show back when we select because otherwise it just says the name of this view controller

97
00:06:44,870 --> 00:06:49,820
which is splits and sometimes it might make sense to have it go back to that view controller but it

98
00:06:49,820 --> 00:06:50,990
doesn't always.

99
00:06:50,990 --> 00:06:53,450
So let's think about what we've done here.

100
00:06:53,450 --> 00:06:58,470
We have created a detailed PC here that is for presenting an image.

101
00:06:58,550 --> 00:07:00,710
We've put an image view we've linked it up.

102
00:07:00,830 --> 00:07:07,040
We've created an image variable that is optional that can be set externally.

103
00:07:07,100 --> 00:07:10,870
Then when the view loads the image view is loaded with that image.

104
00:07:11,000 --> 00:07:12,670
OK that's just one way to do it.

105
00:07:12,920 --> 00:07:18,800
And you know what I want to see what this looks like rotated so let's rotate it and perfect that's exactly

106
00:07:18,860 --> 00:07:20,060
how it should look.

107
00:07:20,060 --> 00:07:20,770
Check it out guys.

108
00:07:20,780 --> 00:07:22,510
It takes up the full screen.

109
00:07:22,640 --> 00:07:27,590
And if I actually fill this with an image you'll see it takes up that full screen view like it's supposed

110
00:07:27,590 --> 00:07:27,770
to.

111
00:07:27,770 --> 00:07:29,550
So very cool stuff.

112
00:07:29,570 --> 00:07:33,970
Let's rotate it back and I just noticed we're getting an error here.

113
00:07:33,970 --> 00:07:36,530
If I select this let's see what this error is.

114
00:07:36,590 --> 00:07:43,130
Use of undeclared type detail view controller case that's our old subclass I'm not sure why our app

115
00:07:43,130 --> 00:07:45,310
delegate is still referencing it.

116
00:07:45,530 --> 00:07:46,860
Where's the error.

117
00:07:46,880 --> 00:07:47,350
There it is.

118
00:07:47,400 --> 00:07:51,250
OK OK so yeah this is this is definitely something we need to fix.

119
00:07:51,290 --> 00:07:55,080
Remember in the first few videos we talked about how this is working.

120
00:07:55,130 --> 00:08:01,130
We have our secondary view controller that's a navigation controller and we have our top view controller

121
00:08:01,130 --> 00:08:08,240
which is our detail controller and they are either set or not set depending on if the detail item is

122
00:08:08,240 --> 00:08:08,720
available.

123
00:08:08,720 --> 00:08:14,840
So what we can do is we can go ahead and change detailed view controller into image presentation visi.

124
00:08:14,930 --> 00:08:20,980
But when we build and run this check it out there is no detail item in our image presentation visi.

125
00:08:20,990 --> 00:08:25,010
But what is there in our image presentation B.C an image.

126
00:08:25,010 --> 00:08:29,720
We have an optional image so we can actually use that to determine whether or not the view controller

127
00:08:29,720 --> 00:08:30,380
should be shown.

128
00:08:30,380 --> 00:08:35,290
So go ahead and type on top as detail view controller dot image.

129
00:08:35,330 --> 00:08:40,430
And if that is nil then we'll go ahead and return true meaning we're going to collapse that secondary

130
00:08:40,540 --> 00:08:41,380
controller.

131
00:08:41,540 --> 00:08:42,410
The way we're supposed to.

132
00:08:42,410 --> 00:08:48,040
So now if you build we get a successful build it works.

133
00:08:48,040 --> 00:08:49,450
That is amazing.

134
00:08:49,450 --> 00:08:50,700
Super awesome guys.

135
00:08:50,770 --> 00:08:52,750
So all of our errors are now gone.

136
00:08:52,750 --> 00:08:55,160
We have successfully built our view controller here.

137
00:08:55,270 --> 00:08:59,710
Everything's looking great in the next video what we're going to do is we're going to set it up so that

138
00:08:59,710 --> 00:09:05,290
our table view here when we select a cell it'll load the appropriate image in the image view and our

139
00:09:05,290 --> 00:09:06,430
detailed view controller.

140
00:09:06,490 --> 00:09:11,770
OK then we'll be able to check out some of the split controller stuff and customize it in future video

141
00:09:11,770 --> 00:09:13,580
so amazing work guys.

142
00:09:13,600 --> 00:09:16,930
Let's go ahead and head over to the next video where we're going to go ahead and pass in our images

143
00:09:17,140 --> 00:09:19,270
to our imagery and our detailed view controller.

144
00:09:19,270 --> 00:09:21,160
I'll see you there.