Hey everyone this is Caleb with devah slopes dot com.
And in this video we're going to build out the interface of our app that will use our animal classifier
model that we built in the previous videos.
So let's go ahead and pull open X code here and we're going to begin by creating a new X code project
so click on that button there and we're going to just go ahead and create a single view application.
Double click it and let's just name it animal classifier app.
That's kind of boring.
You can name it whatever you want but that's what I'm going with so click next and save it wherever.
I'm just going to use my desktop.
So save it and let's pull this up in full screen.
There we go.
And looks like it's given me some issues so let's switch it to that personal profile for a local device
building and let's build out our UI.
So we're going to go ahead and head right into our story board here.
And if you don't already know the object library is way up here at the top now in X code 10.
You can also pull it up by doing shift command L and it pulls it up a little shortcut there.
But we're going to need ourselves an image view.
And so I'm going to go ahead and hold option and drag an image view onto the screen there and what that's
going to do is it's going to keep the object library up in place which is kind of nice and I'm going
to just stretch this image view here to keep it in place.
We're also going to need a toolbar that's what it's called.
And I'm going to drag that down to the bottom of my app.
Beyond that we're going to need a UI visual effect view with blar.
We're going to use that to put our label on so it looks kind of cool and pretty with the image behind
it so that we can read the text legibly the blurred view will make it a little easier to read the text
and that text is going to be found in AUI label.
So I'm going to go ahead and just kind of drag this in here.
Scale it up the way I want which is like that and get rid of the object library.
Now we're going to go ahead and pin this using some constraints.
So go ahead and click that image view and then click the pin button down at the bottom of the screen
here and we're going to pin zero from the top left right and bottom and I'm going to also go ahead and
pin this toolbar zero from the left zero from the bottom and zero from the right.
And let's just leave it as it is will pin it right there.
Very cool.
The label we can go ahead and also pin.
Well looks like it's going to penetrate from all sides so we can do that by just clicking these little
red lines.
We can add that the way we want it there and it's not going to look pretty until we actually select
this visual effect view and pin it.
Let's do maybe 20.
From the left 20 from the right and 20 from the bottom.
And we're going to go ahead and give it a fixed height.
How about 80.
When we add that you'll see our label will adjust to match the constraints and we're going to actually
do some editing on the text now so click on the label then go to the assistant editor and we're going
to go ahead and change the font here to custom.
And let's go ahead and change it to Avenir next.
Let's make it medium and size 18 should be good.
Then we're going to go ahead and change this to minimum font size because there will be a little bit
more text that appears and we want to make sure that it can scale properly so it all fits on the label.
Now currently we have one line meaning one line of text can fit in here but I'm going to want up to
three lines because we're going to not only you know say classification at the top but below that we're
going to print out the most likely classification and then beneath that the second most likely So let's
up the lines to 3 and let's update this to have centered text.
And we're going to actually change the words here to say press the camera button to choose an image
and there will of course need to be a camera button in this place.
So let's select that bar button item and we're going to choose Custom.
And scroll down to camera.
And as you can see we get a neat little camera button.
But I really would like this to have kind of a dark theme to it instead of this white and this gray.
And so I'm going to select the bar here and I'm going to change the tint to B.
Let's do.
Well let's see how black looks.
Yeah.
That looks pretty cool.
And it is translucent so there will be a bit of see through next to it.
And this blue button though is a little intense.
I'm going to change the color to be white so it stands out a little better.
And then the this image view I think I also Well you know I really should put some kind of image in
here maybe a default image or you know instructions but instead I'm just going to go ahead and change
the background to be black.
And now any image that is added will replace that of course but.
Yeah.
So that's a pretty good start.
I believe we have the UI built now we need to actually link it up to our controller here but I don't
like that this is just called View Controller so let's just change this to classifier controller.
And then of course we're going to want to change it everywhere that that is relevant including the file
name.
And then in the storyboard you'll see it's still referencing the old view controller file here so we'll
just paste the name in there and push enter and it will update.
And now we can successfully link these to that view controller file.
So to do that go ahead and click the assistant editor button and now we're going to create some outlets
and actions for our buttons and labels and everything else.
So to do that go ahead and right click and drag from the I am a Jew and we're going to put an outlet
right above the view did load override.
And I'm going to name this image view like so that's perfect.
And now we're going to go ahead and drag from here with a right click and we'll just call this classification
label just like that.
What else are we going to need.
We need to change that data.
We need to.
We need an action for our button here.
So if we right click and drag from the camera button and drop it like so it's automatically going to
identify that button as needing an action.
And so we can just go ahead and say camera button was pressed and connect that and within there we get
a nice little function where we can tell what we want to happen when we push the button.
So that should do it for connecting all of the things that we need to actually modify.
But there's something that I want to do and it's not necessary but it's more just for fun.
And we're going to create a custom subclass of UI visual effect view and we're going to give it some
custom corner rounding with a new feature and iOS 12.
So to do that right click on our folder here click new file and it's going to be a cocoa touch class.
It will subclass from UI visual effect.
And then that's view at the very end.
We're going to call this the rounded visual effect view and we'll save that into our project like so.
And now we're going to get rid of this boilerplate stuff and we're going to call a function called Awake
from NIB and it's it's actually an override of that function.
But essentially we can put view set up code here for how we want this subclass to look and it will update
that.
So in order to actually do that we're going to need to first tell it how much we want to round the corners
and to find that we type self Lehre Dom corner radius and I'm going to set it to be 10.
That's a nice round corner but not too round.
Then we're going to call self.
Clip's to bounds.
And we're going to set that to be true and that's actually going to make the cut around the corners
on the outside edge.
But there is a cool new feature called masked corners and what it's going to do is it's going to allow
me to pick which corners I round so maybe I want one corner to be rounded maybe I want three of them
to be rounded and in order to actually change this I type self layer mask corners and it needs to be
given an array and inside of that array there are several options.
I can use I can type dot layer min x min y corner and it'll round the corner on the smallest x value
in the smallest y value for a given shape and the rest will do the same thing but for the various max
and min values.
So what I'm going to do is I'm going to do Max x and Max y comma.
Then I'm going to do min x and min y so will have opposite corners rounded and then the other two will
not be rounded.
So we're now done with this sub class and we need to go set its value in the storyboard.
So click on the storyboard click on the visual effect view.
And when you do that.
Make sure you don't click the label when you click on the visual effect view you'll see that its class
is just the default UI visual effect view.
But I want it to be rounded.
Visual effect view.
So push enter.
And at this point we can now build our application to the simulator and check it out.
So let's click run and it's going to go ahead and build our app compile our code and launch the simulator
which should pop up any second.
There it is.
And we should be able to test this out and see how we did.
We'll see how our UI looks and if we need to change anything
so here we go it's pop and open here.
And let's take a look at our user interface see how we did OK.
Perfect.
Check this out.
We have an image view in the back.
We have our bar down here that we can't really see because it's super dark.
We have our image.
We have our label and look at this.
We have one corner around it.
And the other corner around it and these two are not just kind of a cool effect.
You can customize corner rounding using the masked corners feature.
I don't know about you guys but I want to move on to the next video and begin using our cool core M-L
features.
Let's head over there now and let's do it.