Hi I'll come back in this exercise.
You're supposed to put your school of view that fits all the images from a database depending on their
weight or their height.
Let me explain to you how it works.
Here is a bunch of images that I have.
Some of them are in a in a landscape mode.
Some of them are in a portrait mode.
Some of them are really really narrow and some of them are more a square shape.
Now the application of they want you the devil should be able to find each side of the image is longer
whether it is vate or the height.
And based on that make a decision on how to scale the image so they perfectly fit within the scroll
of view.
So by the end of the development you should have applications similar to this one that shows you all
the images.
Every image is fit properly.
So either there is has become a longer based on the height or the height has become longer based on
the video.
In a way that they are perfectly fit inside the school view.
So one image after another they are sitting next to each other in a way that they're both width and
height or fit within the screen if their height is the taller one.
Obviously the height gets the size of the scroll view and it stays intact.
If the vet is taller than the height of it is going to adjust itself and the proportion of that is going
to be applied to the video of the screen.
This is something I actually had to do for a project recently and I thought it would help if you guys
had a look at it as well.
So take some time try to think of the different solutions that you could do this and once you're done
you can have a look at my solution as well.
I'm going to pause the video for a few seconds so you can pause it and then I'm going to get a.
OK.
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
view with images and you ask your view of it with images the very first thing I'm going to do is actually
add all of these images to my project.
Now this isn't the way you usually are you may just your applications you usually read them from some
sort of a network quarterback and but we get to that sometime in the future.
And that's like all of my images make a group from the selection and call it images and then I'm going
to head into the storyboard make myself a you I scroll of you which is already there.
And I'm going to make the constraints to be zero zero zero zero.
So it's perfectly fit and then I'm going to go ahead in here and out an outlet for it.
Say the art is actually called my scroll view.
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
and in my view that lot I have to look at the ways that they have to deal with this project.
The first thing we have to do is we have to load all of the images and then add that in a new function
a function that's called load images.
No parameters and no return an array for loading all of my images.
I'm going to say this is an array called variable images array that's an array of strings because all
of the names of my different images you might load images.
However I'm going to go ahead and say
images array becomes an array of all of these images.
Now here's a little trick you can use on OS.
You can actually call all of this from here had come on C Going year ahead commander V and pace all
the names.
Of course these names are only really useful if you have to format them but sometimes rather than typing
each of them manually.
So I have to add a quotation and a comma at the end of each of them.
So I'm going to do that and then do.
That's not like not not think that or I made a mistake all the way.
So they shouldn't come up with Asian come on me copy that soy it then it's easier to pace pace pace
and at the end I don't need a comma.
And then at the beginning of each of them I need a quotation something like that.
That's that and that.
So like I said this isn't really the way you read images but if you have a bunch of images that you
had to actually manually make an array of them this would be a solution.
So now I have all of the images within the images array.
So in my view that lot I'm going to say self taught to load images.
That's the first thing I want to do to make sure that my images are read properly into an array when
the view gets started.
The next thing is I have to find my school view and find out what the width and height it has.
So I'm going to go to my view that I'm going to say my scroll of view.
First of all lay it out if needed to make sure that it's got its final lay out there.
I was going to say my score that delegates here and this is something I will be using it sometime down.
That's right.
But I don't forget I'm going to add it there.
Now for each of the images I have to actually place them somewhere and don't worry about this or it's
saying that you haven't either.
The protocol so I could simply say you I scroll view the delegates and now for each of my images I have
to place them somewhere.
And that place at the very very beginning is the top left corner of the school view.
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
left corner of my school.
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
to say valuable new frame.
It is going to become a CGI float and I'm going to give you the default value of zero.
Now you might be wondering why you're not giving it the new frame height because the height of each
of these images eventually is going to be the height of the school view.
It doesn't matter what height they have.
They all have to fit within the height of the school of you.
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
of you.
So I'm going to say valuable.
I'm going to call this one our height and that is a CGI float.
I'm going to say that is my school view doth bounce that height.
So not that not that not that bounce that height.
So I got the height of my score of you in here.
So the next thing I have to do is I have to go through each image.
The images are a find it's weight and height find the ratio between them and decide about their frame.
So once again each image in the in the images are a find the Witan height find the ratio between them
set the height of it to be the height of the scale view and find the value for it.
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
let's call this one I am g in and I'm going to call it images.
Ari Nikolic for each image that's going to simplify my life for each image in the images array.
Here are the things that you have to do.
We have to find the image from that particular image because the images are actually a strings.
So we have to produce the actual image for them.
So I'm going to say let MH to be a new image of something.
Name that each image.
So you first find the image then are going to make an image of you to represent this image.
I'm going to say let And I'm going to call it this image view.
Wii-U to become you white image of you.
And we usually used to make you what you made with a frame or essentially any subclass of you or you
view with a frame.
But now I'm going to make it an actual image so I'm going to say make it with this image.
And what happens now is this image of you in affairs.
It's a bit and hide from this image pixel size.
So we don't have a frame for it but we still have a height.
So let's get to.
I'm going to say let all wait to be this image of you Dart's bounce.
Not that I'm going to do the same thing for the height I'm going to say.
All right.
And the reason I call them all is because we have to change them soon.
That's going to be all right.
So another good that we can hide and I'm going to have to get the ratio between them so I'm going to
say let height ratio.
I'm going to call that one.
All her height the height that you're interested in.
I'm going to divide that by the old height just to find out what is our situation is our height larger
than the height or is it a smaller than that one.
And then I'm going to go ahead and say new frame.
It is going to become a multiple cation of the older weight multiplied by height ratio.
Michelle Pantea I misspelled it so there's not.
And at the end of it it's not the ration ratio.
So basically we find the ratio and we get the new frame vits based on that.
Once again the height is not changing is the height of our height which is the height of the scroll
view.
That is why we need to get it like this.
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
space based on these new values.
Let's go ahead and make a new frame.
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
and this subject is going to be based on X-Y weight and height and little of the x y and and height.
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
frame at the height of it is our height the height of the Scroll of view.
The exosphere is something that keeps changing and goes one step to the right to the right to the right
to the right.
Let me show you the application now that we have that luxury at the very beginning.
The X is going to be at zero.
If I can scroll all the way back here.
And then after awhile for this image the X has to be here.
So the affair there there is that that is as much as the original x plus the weight of the first image.
So that's why I have the original X when I say that's the origin of X..
Once they had the original X and I pasted in here is giving me an error saying it is of the type double
so I'm going to have to change my Orridge X to become a float.
So that's going to fix that problem.
Now they have that and I have my new frame.
I'm going to go ahead and say my image of you or this image you dot frame becomes this new frame and
another they have that I'm going to go ahead and say my a scroll view.
I had this sub view this image view to it.
Now there are two things I still have to do.
One of them is that I have to go ahead and say this Orridge X once this first loop happened.
It has to add David to itself.
So Orridge X plus equal new frame rate.
So the next time we come here we don't start at the same place that we used to be zero.
He thought as much as one vet for one nothing year a little bit for work over there.
So that's one thing I have to do.
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
more becomes you I view the art content.
And I'm going to use the scale aspect failed.
So I'm going to maintain that aspect of it and I'm going to film the content so now that I have that
I'm going to go ahead and say this is all done.
There's one thing missing though once we finished this all of these images once we had every single
image laid out properly we don't need to decide what is the content size of our scroll view because
our content size depends on how many images we are dead and where we are at the end.
Now here's an interesting thing that happened my age aches constantly adds to it and events for the
next image.
So by the time that this phone book is finished my Orridge X has actually reached the end of the current
content and that end of the client's content in this nation being a scroll more scroll more scroll more
school more being here the end of the cat image that is actually the content size.
So I'm going to say once the folder finished say my scroll view that content size becomes a CGI size
all over these values Witan height the height of it is very simple is our height simply because our
height is the height that we had at the very beginning of it is this value origin X after the for loop
has finished.
So I have one warning and that is because I never actually changed this never mutate at this time to
make the or height to be a lot value say a static value.
Now let's go ahead and run this application and see what do we get.
If it all works we should be able to scroll our view and every image would have fit itself properly
depending on the weight or the height but their height should be perfectly matching the height of the
school view and there should be something that is essentially depending on the ratio between their original
height and weight as well as the height of our school view.
And now when I do that is perfectly working the way I wanted it to work.
Oh I show you a little error that happens in here and that is I tend to screw up the height for some
reason which is not really a good thing.
I don't want this to be happening even though there is no H on the top or on the bottom.
The school is still enabled on the heights and I want to disable that disabling that is actually very
very simple.
Well then when I do this I do have that delegation and that's why I did it in there.
I'm going to say the school view the scroll scroll you didn't scroll in here.
I'm going to say a school of you whichever school view you are scrolling.
Dot content offsets Dr. Lloyd maintainment at zero never change.
It's why as it is being escrowed So that's on the application now.
And if it all works we should be able to see that the user can't score it on the y direction anymore.
And that is happening.
And perfect can score on the X but not on the Y as much as I try.
So that's about that fifth thing emerges within a school view using a for loop that goes through she
may find the ratio of the height and weight and multiplies them together.
And yeah that's about that.
Let's keep it up to here and let's move on to our next lesson.