1
00:00:00,390 --> 00:00:03,340
Hi I'll come back in this exercise.

2
00:00:03,340 --> 00:00:10,470
You're supposed to put your school of view that fits all the images from a database depending on their

3
00:00:10,470 --> 00:00:12,060
weight or their height.

4
00:00:12,060 --> 00:00:13,740
Let me explain to you how it works.

5
00:00:13,740 --> 00:00:16,250
Here is a bunch of images that I have.

6
00:00:16,440 --> 00:00:19,680
Some of them are in a in a landscape mode.

7
00:00:19,830 --> 00:00:21,480
Some of them are in a portrait mode.

8
00:00:21,530 --> 00:00:26,160
Some of them are really really narrow and some of them are more a square shape.

9
00:00:26,160 --> 00:00:33,090
Now the application of they want you the devil should be able to find each side of the image is longer

10
00:00:33,180 --> 00:00:34,880
whether it is vate or the height.

11
00:00:35,100 --> 00:00:41,310
And based on that make a decision on how to scale the image so they perfectly fit within the scroll

12
00:00:41,310 --> 00:00:41,890
of view.

13
00:00:41,910 --> 00:00:47,160
So by the end of the development you should have applications similar to this one that shows you all

14
00:00:47,160 --> 00:00:48,010
the images.

15
00:00:48,120 --> 00:00:50,520
Every image is fit properly.

16
00:00:50,520 --> 00:00:57,810
So either there is has become a longer based on the height or the height has become longer based on

17
00:00:57,810 --> 00:00:58,390
the video.

18
00:00:58,560 --> 00:01:01,910
In a way that they are perfectly fit inside the school view.

19
00:01:01,920 --> 00:01:07,920
So one image after another they are sitting next to each other in a way that they're both width and

20
00:01:07,920 --> 00:01:12,170
height or fit within the screen if their height is the taller one.

21
00:01:12,270 --> 00:01:17,170
Obviously the height gets the size of the scroll view and it stays intact.

22
00:01:17,280 --> 00:01:23,490
If the vet is taller than the height of it is going to adjust itself and the proportion of that is going

23
00:01:23,490 --> 00:01:25,430
to be applied to the video of the screen.

24
00:01:25,590 --> 00:01:30,960
This is something I actually had to do for a project recently and I thought it would help if you guys

25
00:01:31,020 --> 00:01:32,320
had a look at it as well.

26
00:01:32,550 --> 00:01:39,270
So take some time try to think of the different solutions that you could do this and once you're done

27
00:01:39,270 --> 00:01:41,170
you can have a look at my solution as well.

28
00:01:41,190 --> 00:01:45,850
I'm going to pause the video for a few seconds so you can pause it and then I'm going to get a.

29
00:01:48,460 --> 00:01:48,910
OK.

30
00:01:48,970 --> 00:01:54,780
So let's get this thought the next call I'm going to start a new project I'm going to call it a scroll

31
00:01:54,850 --> 00:02:02,260
view with images and you ask your view of it with images the very first thing I'm going to do is actually

32
00:02:02,320 --> 00:02:04,910
add all of these images to my project.

33
00:02:04,930 --> 00:02:10,420
Now this isn't the way you usually are you may just your applications you usually read them from some

34
00:02:10,420 --> 00:02:15,000
sort of a network quarterback and but we get to that sometime in the future.

35
00:02:15,030 --> 00:02:24,060
And that's like all of my images make a group from the selection and call it images and then I'm going

36
00:02:24,060 --> 00:02:30,160
to head into the storyboard make myself a you I scroll of you which is already there.

37
00:02:30,490 --> 00:02:33,600
And I'm going to make the constraints to be zero zero zero zero.

38
00:02:33,620 --> 00:02:39,150
So it's perfectly fit and then I'm going to go ahead in here and out an outlet for it.

39
00:02:39,220 --> 00:02:44,740
Say the art is actually called my scroll view.

40
00:02:44,970 --> 00:02:50,460
So that's more or less the only thing I have to do in the storyboard so I'm going to go to coding interface

41
00:02:50,700 --> 00:02:55,590
and in my view that lot I have to look at the ways that they have to deal with this project.

42
00:02:55,590 --> 00:03:02,010
The first thing we have to do is we have to load all of the images and then add that in a new function

43
00:03:02,500 --> 00:03:06,190
a function that's called load images.

44
00:03:06,600 --> 00:03:12,170
No parameters and no return an array for loading all of my images.

45
00:03:12,180 --> 00:03:21,250
I'm going to say this is an array called variable images array that's an array of strings because all

46
00:03:21,330 --> 00:03:25,550
of the names of my different images you might load images.

47
00:03:25,550 --> 00:03:27,390
However I'm going to go ahead and say

48
00:03:30,110 --> 00:03:35,120
images array becomes an array of all of these images.

49
00:03:35,120 --> 00:03:38,060
Now here's a little trick you can use on OS.

50
00:03:38,120 --> 00:03:44,920
You can actually call all of this from here had come on C Going year ahead commander V and pace all

51
00:03:44,930 --> 00:03:45,860
the names.

52
00:03:45,860 --> 00:03:50,720
Of course these names are only really useful if you have to format them but sometimes rather than typing

53
00:03:50,780 --> 00:03:52,240
each of them manually.

54
00:03:52,250 --> 00:03:55,920
So I have to add a quotation and a comma at the end of each of them.

55
00:03:56,110 --> 00:03:59,180
So I'm going to do that and then do.

56
00:03:59,180 --> 00:04:04,400
That's not like not not think that or I made a mistake all the way.

57
00:04:04,400 --> 00:04:11,960
So they shouldn't come up with Asian come on me copy that soy it then it's easier to pace pace pace

58
00:04:12,140 --> 00:04:14,140
and at the end I don't need a comma.

59
00:04:14,360 --> 00:04:20,160
And then at the beginning of each of them I need a quotation something like that.

60
00:04:20,420 --> 00:04:23,710
That's that and that.

61
00:04:23,750 --> 00:04:28,910
So like I said this isn't really the way you read images but if you have a bunch of images that you

62
00:04:28,910 --> 00:04:32,950
had to actually manually make an array of them this would be a solution.

63
00:04:32,960 --> 00:04:35,910
So now I have all of the images within the images array.

64
00:04:35,930 --> 00:04:40,230
So in my view that lot I'm going to say self taught to load images.

65
00:04:40,240 --> 00:04:46,430
That's the first thing I want to do to make sure that my images are read properly into an array when

66
00:04:46,430 --> 00:04:48,470
the view gets started.

67
00:04:48,500 --> 00:04:55,120
The next thing is I have to find my school view and find out what the width and height it has.

68
00:04:55,130 --> 00:04:59,770
So I'm going to go to my view that I'm going to say my scroll of view.

69
00:05:00,020 --> 00:05:05,950
First of all lay it out if needed to make sure that it's got its final lay out there.

70
00:05:05,990 --> 00:05:11,630
I was going to say my score that delegates here and this is something I will be using it sometime down.

71
00:05:11,630 --> 00:05:12,250
That's right.

72
00:05:12,400 --> 00:05:14,960
But I don't forget I'm going to add it there.

73
00:05:15,290 --> 00:05:21,530
Now for each of the images I have to actually place them somewhere and don't worry about this or it's

74
00:05:21,530 --> 00:05:23,030
saying that you haven't either.

75
00:05:23,060 --> 00:05:30,620
The protocol so I could simply say you I scroll view the delegates and now for each of my images I have

76
00:05:30,620 --> 00:05:32,030
to place them somewhere.

77
00:05:32,060 --> 00:05:37,200
And that place at the very very beginning is the top left corner of the school view.

78
00:05:37,250 --> 00:05:45,470
So I'm going to say the very origin of X is our original X is going to be zero because that's the top

79
00:05:45,470 --> 00:05:48,380
left corner of my school.

80
00:05:48,770 --> 00:05:55,490
Then I'm going to go ahead and say I need to find a new vet for my new upcoming frames so I'm going

81
00:05:55,490 --> 00:05:59,450
to say valuable new frame.

82
00:05:59,540 --> 00:06:04,970
It is going to become a CGI float and I'm going to give you the default value of zero.

83
00:06:05,150 --> 00:06:10,250
Now you might be wondering why you're not giving it the new frame height because the height of each

84
00:06:10,250 --> 00:06:13,960
of these images eventually is going to be the height of the school view.

85
00:06:14,000 --> 00:06:16,360
It doesn't matter what height they have.

86
00:06:16,400 --> 00:06:19,580
They all have to fit within the height of the school of you.

87
00:06:19,760 --> 00:06:26,300
So I'm going to have that in there then I'm going to go ahead and say let's get the height of this all

88
00:06:26,300 --> 00:06:26,650
of you.

89
00:06:26,680 --> 00:06:28,220
So I'm going to say valuable.

90
00:06:28,340 --> 00:06:33,060
I'm going to call this one our height and that is a CGI float.

91
00:06:33,440 --> 00:06:38,750
I'm going to say that is my school view doth bounce that height.

92
00:06:38,930 --> 00:06:43,560
So not that not that not that bounce that height.

93
00:06:43,700 --> 00:06:46,600
So I got the height of my score of you in here.

94
00:06:47,000 --> 00:06:50,540
So the next thing I have to do is I have to go through each image.

95
00:06:50,540 --> 00:06:58,100
The images are a find it's weight and height find the ratio between them and decide about their frame.

96
00:06:58,100 --> 00:07:04,640
So once again each image in the in the images are a find the Witan height find the ratio between them

97
00:07:04,910 --> 00:07:10,410
set the height of it to be the height of the scale view and find the value for it.

98
00:07:10,610 --> 00:07:16,490
So they go in here and say this is going to be a bit of a longer piece of code so I'm going to say for

99
00:07:16,730 --> 00:07:22,320
let's call this one I am g in and I'm going to call it images.

100
00:07:22,410 --> 00:07:28,640
Ari Nikolic for each image that's going to simplify my life for each image in the images array.

101
00:07:28,640 --> 00:07:30,290
Here are the things that you have to do.

102
00:07:30,500 --> 00:07:37,610
We have to find the image from that particular image because the images are actually a strings.

103
00:07:37,640 --> 00:07:40,370
So we have to produce the actual image for them.

104
00:07:40,520 --> 00:07:46,570
So I'm going to say let MH to be a new image of something.

105
00:07:46,580 --> 00:07:49,000
Name that each image.

106
00:07:49,160 --> 00:07:56,100
So you first find the image then are going to make an image of you to represent this image.

107
00:07:56,100 --> 00:07:59,940
I'm going to say let And I'm going to call it this image view.

108
00:08:00,230 --> 00:08:03,840
Wii-U to become you white image of you.

109
00:08:04,020 --> 00:08:09,830
And we usually used to make you what you made with a frame or essentially any subclass of you or you

110
00:08:09,830 --> 00:08:11,350
view with a frame.

111
00:08:11,390 --> 00:08:17,780
But now I'm going to make it an actual image so I'm going to say make it with this image.

112
00:08:17,780 --> 00:08:22,460
And what happens now is this image of you in affairs.

113
00:08:22,470 --> 00:08:26,460
It's a bit and hide from this image pixel size.

114
00:08:26,540 --> 00:08:30,420
So we don't have a frame for it but we still have a height.

115
00:08:30,550 --> 00:08:31,530
So let's get to.

116
00:08:31,540 --> 00:08:41,150
I'm going to say let all wait to be this image of you Dart's bounce.

117
00:08:41,170 --> 00:08:46,190
Not that I'm going to do the same thing for the height I'm going to say.

118
00:08:46,210 --> 00:08:47,160
All right.

119
00:08:47,180 --> 00:08:50,660
And the reason I call them all is because we have to change them soon.

120
00:08:50,710 --> 00:08:53,160
That's going to be all right.

121
00:08:53,230 --> 00:08:57,550
So another good that we can hide and I'm going to have to get the ratio between them so I'm going to

122
00:08:57,550 --> 00:09:01,030
say let height ratio.

123
00:09:01,330 --> 00:09:03,080
I'm going to call that one.

124
00:09:03,130 --> 00:09:07,940
All her height the height that you're interested in.

125
00:09:08,010 --> 00:09:14,590
I'm going to divide that by the old height just to find out what is our situation is our height larger

126
00:09:14,590 --> 00:09:17,200
than the height or is it a smaller than that one.

127
00:09:17,530 --> 00:09:21,160
And then I'm going to go ahead and say new frame.

128
00:09:21,370 --> 00:09:30,580
It is going to become a multiple cation of the older weight multiplied by height ratio.

129
00:09:30,610 --> 00:09:32,920
Michelle Pantea I misspelled it so there's not.

130
00:09:32,960 --> 00:09:35,660
And at the end of it it's not the ration ratio.

131
00:09:35,950 --> 00:09:41,730
So basically we find the ratio and we get the new frame vits based on that.

132
00:09:41,740 --> 00:09:47,470
Once again the height is not changing is the height of our height which is the height of the scroll

133
00:09:47,470 --> 00:09:48,040
view.

134
00:09:48,040 --> 00:09:50,180
That is why we need to get it like this.

135
00:09:50,260 --> 00:09:55,480
Now the next thing I'm going to do is I'm going to go ahead in here and say Let me get my face on the

136
00:09:55,480 --> 00:09:57,910
space based on these new values.

137
00:09:57,910 --> 00:09:59,990
Let's go ahead and make a new frame.

138
00:10:00,010 --> 00:10:06,200
So I'm going to say let's new frame the frame for the image of course that is going to become C.G. erect

139
00:10:06,670 --> 00:10:13,080
and this subject is going to be based on X-Y weight and height and little of the x y and and height.

140
00:10:13,080 --> 00:10:20,260
If it's a very easy one is why it's obviously going to be at zero on the very top of feet is the new

141
00:10:20,260 --> 00:10:24,800
frame at the height of it is our height the height of the Scroll of view.

142
00:10:25,010 --> 00:10:31,210
The exosphere is something that keeps changing and goes one step to the right to the right to the right

143
00:10:31,210 --> 00:10:32,080
to the right.

144
00:10:32,080 --> 00:10:36,620
Let me show you the application now that we have that luxury at the very beginning.

145
00:10:36,700 --> 00:10:39,410
The X is going to be at zero.

146
00:10:39,640 --> 00:10:41,930
If I can scroll all the way back here.

147
00:10:42,100 --> 00:10:45,330
And then after awhile for this image the X has to be here.

148
00:10:45,340 --> 00:10:53,550
So the affair there there is that that is as much as the original x plus the weight of the first image.

149
00:10:53,560 --> 00:10:58,240
So that's why I have the original X when I say that's the origin of X..

150
00:10:58,460 --> 00:11:07,590
Once they had the original X and I pasted in here is giving me an error saying it is of the type double

151
00:11:07,600 --> 00:11:12,960
so I'm going to have to change my Orridge X to become a float.

152
00:11:13,030 --> 00:11:15,360
So that's going to fix that problem.

153
00:11:15,400 --> 00:11:17,880
Now they have that and I have my new frame.

154
00:11:17,890 --> 00:11:26,720
I'm going to go ahead and say my image of you or this image you dot frame becomes this new frame and

155
00:11:26,730 --> 00:11:31,440
another they have that I'm going to go ahead and say my a scroll view.

156
00:11:31,500 --> 00:11:36,020
I had this sub view this image view to it.

157
00:11:36,040 --> 00:11:38,320
Now there are two things I still have to do.

158
00:11:38,330 --> 00:11:46,150
One of them is that I have to go ahead and say this Orridge X once this first loop happened.

159
00:11:46,150 --> 00:11:48,730
It has to add David to itself.

160
00:11:48,760 --> 00:11:53,560
So Orridge X plus equal new frame rate.

161
00:11:53,710 --> 00:11:59,150
So the next time we come here we don't start at the same place that we used to be zero.

162
00:11:59,290 --> 00:12:05,220
He thought as much as one vet for one nothing year a little bit for work over there.

163
00:12:05,440 --> 00:12:07,020
So that's one thing I have to do.

164
00:12:07,030 --> 00:12:14,100
The other thing I want to do is I want to fill my email so I'm going to say this image of you doth content

165
00:12:14,140 --> 00:12:20,470
more becomes you I view the art content.

166
00:12:20,580 --> 00:12:24,400
And I'm going to use the scale aspect failed.

167
00:12:24,720 --> 00:12:30,420
So I'm going to maintain that aspect of it and I'm going to film the content so now that I have that

168
00:12:30,660 --> 00:12:33,590
I'm going to go ahead and say this is all done.

169
00:12:33,630 --> 00:12:40,680
There's one thing missing though once we finished this all of these images once we had every single

170
00:12:40,710 --> 00:12:48,120
image laid out properly we don't need to decide what is the content size of our scroll view because

171
00:12:48,120 --> 00:12:54,000
our content size depends on how many images we are dead and where we are at the end.

172
00:12:54,000 --> 00:13:01,590
Now here's an interesting thing that happened my age aches constantly adds to it and events for the

173
00:13:01,590 --> 00:13:02,900
next image.

174
00:13:02,910 --> 00:13:08,970
So by the time that this phone book is finished my Orridge X has actually reached the end of the current

175
00:13:08,970 --> 00:13:18,090
content and that end of the client's content in this nation being a scroll more scroll more scroll more

176
00:13:18,200 --> 00:13:24,670
school more being here the end of the cat image that is actually the content size.

177
00:13:24,840 --> 00:13:32,460
So I'm going to say once the folder finished say my scroll view that content size becomes a CGI size

178
00:13:32,540 --> 00:13:40,590
all over these values Witan height the height of it is very simple is our height simply because our

179
00:13:40,590 --> 00:13:48,510
height is the height that we had at the very beginning of it is this value origin X after the for loop

180
00:13:48,510 --> 00:13:49,710
has finished.

181
00:13:49,710 --> 00:13:55,530
So I have one warning and that is because I never actually changed this never mutate at this time to

182
00:13:55,530 --> 00:13:59,370
make the or height to be a lot value say a static value.

183
00:13:59,370 --> 00:14:03,270
Now let's go ahead and run this application and see what do we get.

184
00:14:03,270 --> 00:14:09,720
If it all works we should be able to scroll our view and every image would have fit itself properly

185
00:14:09,990 --> 00:14:14,700
depending on the weight or the height but their height should be perfectly matching the height of the

186
00:14:14,700 --> 00:14:21,630
school view and there should be something that is essentially depending on the ratio between their original

187
00:14:21,630 --> 00:14:25,190
height and weight as well as the height of our school view.

188
00:14:25,370 --> 00:14:29,530
And now when I do that is perfectly working the way I wanted it to work.

189
00:14:29,920 --> 00:14:35,190
Oh I show you a little error that happens in here and that is I tend to screw up the height for some

190
00:14:35,190 --> 00:14:37,590
reason which is not really a good thing.

191
00:14:37,590 --> 00:14:43,390
I don't want this to be happening even though there is no H on the top or on the bottom.

192
00:14:43,420 --> 00:14:49,740
The school is still enabled on the heights and I want to disable that disabling that is actually very

193
00:14:49,740 --> 00:14:50,620
very simple.

194
00:14:50,790 --> 00:14:55,570
Well then when I do this I do have that delegation and that's why I did it in there.

195
00:14:55,590 --> 00:15:01,780
I'm going to say the school view the scroll scroll you didn't scroll in here.

196
00:15:01,800 --> 00:15:06,180
I'm going to say a school of you whichever school view you are scrolling.

197
00:15:06,330 --> 00:15:13,060
Dot content offsets Dr. Lloyd maintainment at zero never change.

198
00:15:13,060 --> 00:15:17,510
It's why as it is being escrowed So that's on the application now.

199
00:15:17,550 --> 00:15:23,490
And if it all works we should be able to see that the user can't score it on the y direction anymore.

200
00:15:23,840 --> 00:15:25,080
And that is happening.

201
00:15:25,130 --> 00:15:30,270
And perfect can score on the X but not on the Y as much as I try.

202
00:15:30,540 --> 00:15:37,440
So that's about that fifth thing emerges within a school view using a for loop that goes through she

203
00:15:37,440 --> 00:15:42,430
may find the ratio of the height and weight and multiplies them together.

204
00:15:42,630 --> 00:15:44,600
And yeah that's about that.

205
00:15:44,610 --> 00:15:47,160
Let's keep it up to here and let's move on to our next lesson.