Hey everyone what is going on this is Caleb began with devah slopes and in the last video we set up
our user interface.
But we're still missing a UI image view and believe it or not in this video that is when we're going
to add it.
So I'm going to go into my view controller here and I'm actually going to make a function called set
up image view.
OK.
And we're going to go ahead and create an image view.
We're going to drag in an image that the image view will use.
And we're also going to just set up a few properties we're going to have to do some special math here
and I'll explain why in just a moment.
But to begin.
I'm going to go into my assets folder here and I'm going to drag in two images here.
There they are.
So first of all we have the face image which you can see here a very clear photo of a face which will
be easy to identify and then we have an image with multiple faces looking at a bunch of different angles
and you know closeness to the camera.
It should be a good challenge to see how effective our application really is.
So the face image is now in place and in this function we're going to go ahead and first create a property
to hold that image.
So go ahead and type.
Gardner Let image equals UI image and we're going to create a UI image with a name like so.
And the first image is just called face.
And so assuming that we have that image which we do you know this will work out.
But in the instance that we didn't we're going to be nice and safe and return out but thankfully we
do have this image.
So it's not going to cause us any trouble.
So we're using guard let.
Because a UI image when you actually create one it's created as optional because they're never 100 percent
sure that you actually have this image in you're in the folder there.
So we're using a guard left to create a non optional variable in the instance that this does not return
nil.
Otherwise it's going to return.
So pretty cool.
Next up we're going to go ahead and create our image view.
So Type let image view equal UI image view OK like so.
And we're going to need to give it an image.
Thankfully we already have one called IMET and we can just pass that right on in.
But now we need to actually set the content mode of this image view.
So in order to do that we're going to type image view content mode and I want you to look at all of
these different content modes you can align images to the bottom the bottom left Center et cetera et
cetera.
But the one that we want is scale aspect fit and what this is going to do is it's going to scale the
content to fit the size of the view by maintaining the aspect ratio any remaining area of the views.
Bounds is transparent so obviously if you've done any level of Iowa's development you're familiar with
making images aspect fit.
And this is if you want the image to show or I guess if you want to see the full image in the image
view.
But the issue is that while the whole image will show the image views frame could actually be a lot
bigger than the actual image it could be taller.
It could be wider.
And so we're going to make it so that the image views frame is exactly the same as the size of the image
itself.
Or at least we'll scale it so that it can be.
So in order to do that we're first going to need to set the frame of the image view.
So go ahead and type image view frame and that's going to be a C-g recked.
OK.
And a CD is just a rectangle that has an origin point x and y and it has a width and height.
So for now let's go ahead and just set this to zero and zero.
And just for the record that's going to be the top left corner of the screen the width we want the image
to be as wide as the screen so we can just copy the views with property by typing view frame dot with.
And that means that our image view will be as wide as our screen.
But the height of the image view this is where things get tricky.
So we could do a view frame height and then you know.
Well let's let's leave it at that and let's see what happens when we actually add this image view to
our view.
So type view view dot adds some view and image view is what we're going to add there.
Let's go ahead and call this function from feuded load and let's run this on the simulator and let's
see exactly what happens when it is set to Aspect fit and the height is set to be the height of the
view.
Cool.
So there we go.
As you can see the image fits beautifully.
But our image view is actually the full size of the screen.
And you know what I'm going actually proved that really quickly.
Let's do image view.
Layer dot.
Border color and let's just set it to white and then let's do image view layer border with and looks
at that too.
Oh you know what I realized this is C.G. color so we need to do I color dot white and convert it to
a CGI color.
OK.
Build and run.
It'll pull open in the simulator here.
And we're going to see that the image view itself is actually bigger than the image but since it's set
to scale to Aspect fit the image is going to you know show the entire image.
But we want the image views framed to be the same exact size as the image.
So we don't actually scale the height of our image view in comparison to the actual size of the image.
We need to scale the height of the image view to the size of the image.
So to do that we're going to go ahead and create a property called scaled height and in order to do
this we need to figure out what the ratio is of the views with care of the width of the view.
We need to find out the ratio of that to do with the image because obviously the image here is much
bigger than my screen and it's getting scaled down to fit.
So we need to find the ratio between the width of the view and the width of the image.
And to do that we can go ahead and type view frame that with and we can actually divide that by the
image.
Right.
But this image property we have and we can pull out the size of that image and get the width property.
Now we actually have a ratio we know maybe the width of the screen here is 10 but the image with is
20.
That means that it's a 1 to 2 ratio.
And what we can actually do with that ratio is we can multiply that by Image dot size dot height.
And that property will make it so that the image view can be the exact same size as the height because
we took the ratio that it's scaled down and we multiply that by the height of the image.
And that way we know what the actual height of the images from this ratio is pretty cool.
So with that said we can actually take our image view here and we can pass in the scaled height.
And when we build and run this you'll see that we get something much different.
Let's pull it open here and boom.
Look at that the image view is the exact same size as the image.
That's exactly what we want.
So let's get rid of this border color here we don't want that.
But what we do want to do is to actually pull this spinner does start animating out and we want to set
it so that it's in our function here we can just consolidate it into one big function.
Now we have our image view setup.
Ok that's cool.
It's showing on the screen.
The spinner is now animating.
But in order to save memory I'm going to set a property on the spinner here so that when it is hidden
it stops animating and that will also reduce the amount of code we need to right.
So type spinner hides when stopped and set that to be equal to true.
So later when we call stop animating it's going to automatically hide.
And I don't need to call this line of code to say is hidden equals true it'll just automatically hide
which is pretty cool.
So build and run it one more time let's verify that everything looks nice and pretty OK the image is
in place.
It's saying finding faces in the spinner is spinning.
Awesome.
This looks so good.
So we are now ready to move on to actually creating our face detection request.
Now that we have a face in the image view and we have set the height of the image view to be exactly
the same size as the image this is going to help us when we place our rectangle to go around the face
so that it knows what to reference for its size.
Very helpful stuff.
Let's head to the next video and let's do that now.