Hey guys what's going on this is Caleb with slopes.
And in this video we're going to build the UI of our app and we're also going to create some custom
view subclasses to make it look really nice and pretty.
So go ahead and pull open your X code project just like you might have expected.
And basically what we're going to do is we're going to start by dragging in a UI view.
First of course make sure that you're in main but storyboard blah blah blah you probably know that already
but once you're in there we're going to start by dragging on a UI view just like so.
Go ahead and pull the corners down so that it fits the entire frame of the View Controller and then
click the constraints button or the pin button rather.
And we're going to pin it zero from the top right bottom and left so that it stays exactly on the screen
and it stays exactly the size of the screen.
Click Add for constraints and this is going to be the view that houses our camera view.
If you think about when you go into your camera if you record a video recorder the entire frame of the
screen that's going to be basically what our app will do.
So that's that very cool camera view is in place and you know what I'm going to add some other views
on top of this.
So to let us see it easier.
I'm just going to change the color for now to kind of this green color so that we can see the other
views that I drop on on top of it.
OK.
So now that that views in place go ahead and drag on another view here.
OK.
And that looks good.
And we're going to go ahead and pull this so that it is about that wide.
You see how it snaps there on those lines.
That's good.
And I'm going to make it about 60 points tall.
Yeah that looks good.
Let's go ahead and click the pin button.
And we're going to actually pin this 20 from the left 20 from the right.
And let's do 30 from the top just to put it a little bit below the status bar.
I'm going to give it a fixed height of 60 and add four constraints.
All right.
That looks pretty good.
That's in place next.
What do we need to do.
We're going to go ahead and we're going to add a button.
That's right.
Because in our app we're going to be able to turn on and off the flash at will and that's that's exactly
what we need to do.
So let's go ahead and put this here.
We're going to go ahead and pin this just like we did with the view up top We're going to pin it 20
from the left.
We're also going to pin it 20 from the bottom.
OK.
And don't give it a size constraint yet.
Just go ahead and add those two constraints and now we're going to do is we're going to change this
font or not the font but the text rather to say flash off.
That will be the default setting so we can go ahead and just have it say off.
When we first launch the app that's fine.
We're going to change the font because the system font is just ugly.
Change it to Avenir next that's the font that I really like.
If you've seen any of my other courses you know that I love Avenir next.
And go ahead and set it to be demi bolds so we can see it.
Nice and clear and blue is not a great color for what we're doing.
So I think we should set it to be.
Yeah I really like.
Well no I don't like that.
What would be a better color.
Let's do the slopes red.
If you're wondering does slopes red is d 8 4 7 1 e.
That's the hexadecimal value.
So with that set go ahead and scroll down in the attributes and Specter and we're going to get this
button a white background and then we're going to stretch it out a little bit so that there's a little
bit of cushioning on the left and right side.
Whoops.
And I just messed that up there but we're going to go ahead and click this button which updates the
frames and.
Oh right.
Sorry.
No wonder it's not staying in place.
Let's go ahead and give it a fixed width but let's make it.
Maybe not.
Let's give it five on either side so let's give it a width of 85.
There we go.
That looks pretty good.
So now we have a little bit of cushioning on the left and right side and it will also stay in place
which That's what we want.
Right.
Very cool.
So next let's go ahead and let's drag on a UI image view and we're going to put it in this position
right here.
And you know what we're going to actually want it to be about the same size or I guess orientation as
our screen.
So I'm just going to go ahead and eyeball there.
That's fine that looks pretty good.
And we're going to set it to be aspect Phil. Anyway so it doesn't really matter.
So go ahead and let's give it some constraints now.
So select the image click the pin button and we're going to make it 20 from the bottom and 20 from the
left let's give it a fixed width and height and add four constraints.
Very cool.
You know what guys our UI is pretty much done now.
We're going to do is we're going to connect it all connect all the elements to our view controller so
that we can interact with them and use them.
But we actually forgot one little thing we need to you eye labels.
Of course this bar up here is going to display what item our app thinks that it took a picture of.
So we need to actually add the labels so we can have that text it's kind of important.
So let's go ahead and drag on to you I labels the top label is going to be changed of course to Avenir.
Next my favorite font.
And let's go ahead and set that to be demi bold so it stands out a little bit and a size 18 is pretty
good.
Let's change the font color to be deft slopes red and let's make it a little whip's little bit wider
and let's center it.
OK.
Now I'm called up yet center the text.
Very good.
All right.
Next we're going to go ahead and we are going to make this a little bit bigger.
We're going to center it.
We're going to change the font to a custom font and select Avenir next.
And let's make it smaller Let's make it a size 12.
And we're also going to make this Demi bold.
OK.
Now if you're wondering about the lining up of all of these don't worry we're going to put them in a
stack view in just a moment.
But for now let's go ahead and let's select both of these and let's let's put them in a stack.
All right.
So yeah I clicked the stack.
You button down at the bottom and it put them into a nice little stack view of course.
This is inside of this view.
And so we're going to go ahead and drag it to the sides so that it snaps.
You see those little grids.
Lovely.
And what we're going to do is we're going to pin it and we're going to actually make it.
Let's let's go ahead and do eight.
All around.
So eight from the top eight from the left from the right and eight from the bottom nice k.
So let's go ahead and let's set a default message for when the app loads and what I think sounds good
is maybe the names of items
captured will appear here.
Now you notice that's a little too big and sometimes you get more than just one word return.
Like for instance you might take a picture of your closet you might get wardrobe closet bureau or something
like that.
So if there is not enough space we need to make sure that the font can scale.
So go ahead and click.
Minimum font size.
And we're going to make size 10 be the minimum font so it'll automatically scale down to fit.
Pretty cool.
And you know what for this label we're just going to say confidence and we're going to just leave a
space.
Now that will fill in automatically and we're going to actually make it hidden until we have scanned
an image.
But for now just garden type confidence and you know what.
Let's make that a little smaller maybe.
Let's do a size 10.
I think size 10 looks pretty good.
And you know what.
With that done let's go ahead and connect this to our view controller.
So go ahead and click the assistant editors so that we can see both at the same time.
Get rid of did receive memory warning.
Anybody got time for that.
I mean seriously though.
And we're basically going to right click and drag from each of these elements and create an IP outlet.
So go ahead and right click and drag from the UI image view.
We're going to just call this maybe capture image view OK whatever we capture We'll go there.
Let's go ahead and right click and create an outlet for this UI button.
Let's call this flash button.
Let's go ahead and right click and drag from this label Let's call this identification label because
that's where what we identify shows up right click and drag here we'll call this confidence label.
And of course we almost forgot.
Right click from our green view here and we're going to call this camera view.
All right so now we need to do is basically create some custom view subclasses so that we can round
the edges of this nice little view around the edges of our button and image view and also add a nice
drop shadow on it just really improves what the app looks like it makes it look a little more professional.
So go ahead and click on your view folder here.
Right click and we're not going to create a new group sorry but create a new file.
OK.
It's of course going to be a cocoa touch class.
And let's start with you view.
So we're going to make it a subclass of you I view and I'm going to call it rounded rounded shadow view
OK the language of course is swift.
And once you've done that go ahead and just click Create and it'll automatically make you a nice subclass
of you.
You can't get rid of this boilerplate code.
And what we're going to do is we're actually going to go ahead and call awake from NIB and we're going
to just modify for properties K three properties to make a shadow and one property to round the corner
radius.
So to begin go ahead n type self dot layer dot shadow color and the shadow color.
I like to use is dark grey and of course we need to convert that to a C.G. color and let's get this
assistant editor out of the way so we have the full screen.
There we go.
All right.
So dark grey and to use this as a color for a shadow.
We need to convert it into a Siggi color.
All right.
Next self top layer.
And what we're going to modify is the shadow radius.
You can see that here now it's the blur radius in points used to render the layers shadow.
So if we give it a value it will blur the shadow at a certain amount so obviously a bigger number is
more blurry less of a number is more sharp.
The number that I like to use is 15.
You can try anything else that you'd like.
I just like 15.
All right.
So we have shadow color we have a shadow radius.
Next we're going to move on to shadow opacity WIPs shadow opacity is part of the layer.
So self-taught layer that shadow opacity.
And we're going to set it to be 75 percent opaque.
We don't want it to be so intense that it's what we want it to be subtle you don't want it to be very
intense.
Cake is supposed to kind of just be in the background out of the way.
OK.
So 75 percent opacity for the shadow.
And finally call self dot layer and this is where we're going to modify the corner radius to give it
that nice rounded Pille shape.
So go ahead and type self-taught layer dot corner radius and in order to do this we're going to go ahead
and calculate the the height of the view and then from that view we're going to cut it in half and then
around that much.
If you think about it if we had a square and you were to start in the middle of the top of the square
and round down to the middle of the other side and did that all the way around it would make a perfect
circle.
So we're basically doing that but only on the left and right sides of our rectangle view.
So go ahead and type self layer frame that height you know what I don't know if I actually need the
layer there I might just be able to get away with self-doubt framed that height yet.
So could do that self-trust framed up height and then divided by 2.
Believe it or not this will round the corners to make a perfect kill shape.
Pretty cool.
So now we need to do is set up our storyboards so that it knows to use this class and to do that all
we need to do is to go into maned that storyboard select the view here that white view and we are going
to go ahead and set its identity in the identity Inspektor to be rounded shadow view.
OK that's easy enough.
But there's one thing we need to do in camera AVC if we look here.
Camera view is coming in as a huge view not rounded châteaux view.
So we need to change it here as well.
So just start by typing and autocomplete will help you supercool that way.
Now it's good to go.
So that is now set up as rounded châteaux view.
Although wait a minute sorry our camera view is now it needs to be rounded.
We actually never even made a connection for that view.
Let's do that now.
My mistake.
So go into your view controller again.
Sneaky little view trying to get out of doing his job.
Right click and drag and let's create this let's just call this rounded label view.
Very cool.
All right.
So going back now to our controller we can see that it is of type rounded shadow view supercool.
OK that's great.
There are no other views we need to round and give a shadow but we do need to round the corners of our
button and give it the same shadow so.
Believe it or not we're basically going to pass in the same thing in a week from Nibbe.
OK.
So I don't normally do this but I am going to for this case because we need to create a separate class
for the button.
So I'm going to copy this awake from NIB override.
I'm going to create a new file and a new cocoa touch class but this time it's going to be a subclass
of UI button.
We're going to call it round it shadow button click next.
Then click Create.
And what we can do is we can replace this boilerplate code here with our awake from NIB function.
And just like that we can go into our storyboard select our button and then change the class and the
identity inspector to rounded shadow button.
OK very cool.
And let's think what do we need to do now.
K in camera VC we need to change the button to be rounded shadow button and the last thing we need to
do is to round the edges of our image view as well as give it a shadow so we're going to do the same
exact thing.
New File Cocco touch class UI image view image.
We're going to call this rounded shadow in image view.
OK very good.
Create it going faster.
We've done this already.
Replace that boilerplate code with awake from NIB and our shadow creation and quarter radius modifications
although we need to pause here for a second our image view we don't want to make it like a pill on the
sides that'll actually kind of make it look like a football or Arnold's head if you watch Hey Arnold.
But anyway what we want it to look like is just nicely rounded corners so I'm actually going to make
it match the corner radius or the shadow radius of the shadow.
So let's give it a corner radius of 15 for the image view then go back to the storyboard and we're going
to repeat the same process we have been.
Click image view change the class to the one we just made rounded shadow image view go to camera AVC
change it to rounded shadow image view and let's go see if it worked.
Let's go ahead and build this to an iPhone 7 and let's go see how we did.
Let's make sure that our UI is looking pretty and that'll be that will be up for this video.
Looks like it built to pull up in my sim here.
And I'll center it by the way.
I just love the new simulator in code 9.
It's super cool all these buttons actually work.
You can see as I hover over them they move power button volume on volume off you can really do everything.
It's very cool.
All right so cool look at this it works.
We have a nice rounded view with a shadow.
We have a nice rounded button with a nice pillowy shadow.
And of course our image view is not showing up because we don't have an image yet but the override awake
from NIB stuff that we just did.
It worked here and I know that it will work there.
So let's go ahead and let's move on to the next video where we're going to be starting to make the camera
view work.
We're going to go ahead and add a tap gesture so that you can take a photo.
And we're also going to display that photo in the image view.
So let's go ahead and head over to the next video.
Awesome job with this one.