Hello hello this is Caleb with Dev slopes dot com and in this video we're going to create our X code
project and we're going to build out the user interface for our face finder app.
So click on Create new X code project and we're going to go ahead and just make this a single view application.
We're going to go ahead and name this face finder.
I'm going to name mine face finder too since I already built a project called Face finder but you will
be able to name it face finder.
Click next and save it wherever you'd like.
I'm just going to put mine on the desktop for now and I'm going to pull this open in full screen.
It's going to give me some issues here so I'll switch to my personal profile.
And now we can go ahead and build out our controller here.
So I'm going to first click on my view and the View Controller go to the assistant editor and I'm going
to set it to have a black background.
I just think that looks pretty cool.
Next I'm going to go ahead and add a spinner and a label to show the indicator of when it's identifying
a face and so to do that.
I'm going to go ahead and type activity for an activity indicator view.
I'm going to change the style of this indicator appear at the top two large white just because that
will look a little better on my screen and I'm going to go ahead and pin this 20 from the bottom and
then I'm going to go ahead and make sure that it is horizontally aligned in the container and that'll
stay right in place.
Next we're going to go ahead and drop in a label like so and I'm going to make.
Well I'm going to put it right here on top of our spinner and I'm going to make the text white so we
can actually see it and then I'm going to change the font from the system font to Avenir next my font
of choice and lets make it medium weight size 18 and let's go ahead and just say finding faces and you
know what just for fun let's put in some face emojis.
How about Beard Man.
Well and how about hair lady.
And let's see what else.
Mr. grandpa.
There we go.
So we have a few different people in there it's finding faces.
And of course now we need to pin this and align it.
So go to the pin menu.
Pinot ate from the activity indicator and then we'll pin this also horizontally in the container and
that will keep that all stuck down near the bottom which is nice and cool.
So open up the assistant editor and we're going to create some outlets for these so that we can animate
them and hide them when we need to.
So right click and drag and we're going to go ahead and just call this spinner.
And then below that we're going to drop the labels so let's go ahead and right click on the label and
drag and we'll call this maybe message label.
Cool.
So there's that.
Those are now able to spin.
And just to give it a quick little test.
Let's go ahead and just say spinner.
Dot start animating and let's build and run this to our simulator here.
Let's see what we get and see how it looks.
You might notice that there's no image view we haven't added it yet.
And that's because we have to do something special with our image of you for this particular circumstance
with using vision.
It's just going to make it easier for us to understand and work with vision.
So we're going to add the image view programmatically but upon first glance it looks like everything
is working properly it's properly animating the label shows up nice and clear.
And with that we're actually done building the user interface for this project.
With the exception of adding the UI image view programmatically we're going to do that in the next video
so let's head over there now and let's get started.