Hey everybody what's going on.
Caleb with slopes dot com and in this video we're going to build out the user interface for our Rick's
name or app.
So go ahead and pull open your X code project just like we left it in the last video and we're going
to go ahead and actually get rid of did receive memory warning and open up Main storyboard.
OK.
So go ahead and click on the background view here and click on the attributes and specter like so and
we're going to change the background.
I use this green color which if you want to know it's six dbspace C6 three right there.
And you can use that if you want.
You can use a different color you could use an image view whatever you want.
It's up to you.
But now what we're going to do is we're going to drag on a couple UI labels.
Textfield and a button.
So go ahead and type UI label and we're going to need one on top to display the message type your name
below.
We're going to need one below to say names and then one to also hold all the names.
Then we're going to need a UI textfield will drag that unlike so and then beneath that we're going to
need a UI button and drag that on blow like so.
Now the reason I'm doing this is we're going to put these into a stacked view.
So go ahead and drag to select them all and click the stack button.
Beautiful.
So now what we want to do is we're going to go ahead and pin this 120 from the top and let's go 20 from
the left.
Whoops that's not 20.
We're going to go 20.
From the left 20 from the right.
And let's give it a fixed height of 250 K.
Press enter or click add four constraints.
And as you can see we're having some trouble here.
So we're going to change the text or not text fields but the labels here to be center oriented.
We're also going to change their font to custom and then change the family to Avenir next.
OK.
That's pretty cool.
And let's bump it up to size 20 maybe 18.
Yeah 18 is better.
And let's set the color to be white like so then on the button we want to scroll down and set the background
color of the button to be white.
And we're going to go ahead and set the text color to be Green K but we should change it from the system
font which is ugly to Avenir next which is pretty.
So change it to size 18.
And then instead of being regular let's use dummy bold K and change the button text to say submit in
all caps.
That just looks cool.
Now of course our textfield is really stretched out and I actually remove the background color in my
app and just replaced it with clear color.
And we're going to keep the same border.
We're going to change the font from system to custom.
The family will be Avenir next size 18 and regular's fine.
Let's go ahead and center this and set some placeholder text that says enter your name dot dot dot.
All right.
And that's fine and dandy but we need to make sure that this is not as giant as it is.
And so I'm actually going to put some spacing between each element 20 to be exact.
And as you can see it spaces out much better.
Looks a lot nicer.
So for this label go ahead and type a default message of type your name below just like that.
And then these labels can be changed to say names and nothing's going to happen to this label and this
label we actually can go ahead and clear out and press ENTER that's going to be empty from the beginning.
So now that we have done this we can go ahead and let me see if I can zoom in at all.
I don't think it will let me.
OK.
Anyway we're going to go ahead and set up some Iby outlets for this.
So go ahead and click on the assistant editor and all we need to do is right click from each of these
and create an IB outlet.
So this is going to be hello label because we'll say hello and then match it to whatever name is there.
We're going to right click and drag and make this baby name and tree text field and make sure you connect
it.
This will be a button.
So we're going to make it an outlet.
We'll just call this submit button.
Then this one we're going to ignore because we never change it.
But the one beneath that is where we're going to go ahead and create another outlet and call this names
label just like that.
OK that's pretty easy.
And now we have our UI totally built that that was pretty easy rider told you this app is not very complicated
but it was the whole point is this to show you how to use our X. swift with certain UI elements.
OK there are some really helpful things we can do and we're going to dive into that in the very next
video so let's go ahead and head over that way now and we're going to start coding this app using our
swift and our X cocoa Acia they're.