Let's reference back to our design and see what we need to do.

We have three main UI elements to create.

The Did you know text up top.

Our fun fact text in the middle.

And the button down at the bottom that,

when we tap it, will show another fun fact.

Let's start with the fun fact text in the middle.

If you click on this icon up top that looks like a square inside of a circle,

that will open up what's called the object library.

If we scroll down, we can see some of Apple's stock UI elements that might

look familiar if you've used iOS devices before.

Like a slider, a switch, an activity indicator, and so on.

The object library comes packed with a lot of UI elements that we can use right out

of the box.

What we're looking for is a label to display text.

We could scroll through everything in the list, but

there are quite a few objects here.

So instead, we can just search for the name.

So in this case, we want a label.

Now, all we're gonna do is drag and drop it into our view.

So let's click, and drop.

Perfect, easy, right?

We can see that our label is selected, so now if we look over in our attributes

inspector, we can see some attributes that are specific to a label.

We wanna change what text is shown by the label.

So if we come here where it says Label, underneath where it says Text here,

we can type in a random fact as some dummy text for now.

Let's hit Enter.

And you'll see your label automatically updates in the interface builder.

Now, let's make sure our label is centered in the middle of our U,

just like in our design.

If we click and

drag our label near the middle of the screen, we'll see some lines appear.

These lines indicate that our label is being centered vertically and

horizontally.

So once we have both lines showing up, we know our label's in the right spot.

Next up, let's get our button onto the screen.

We need to grab one from our Object Library again.

This time, let's do it a little differently.

Xcode has a lot of really useful shortcuts that can help improve our workflow.

To open up the Object Library with a keyboard shortcut,

use the combination of Cmd+Shift+L.

Nice.

Let's search for our button, and drag and drop it underneath our label.

So button.

And just like before, let's drag and drop.

On our design, we see that this button needs to say show another random fact.

With our button selected here, let's check out the Attributes Inspector again.

If you're ever wondering what kind of attributes you can change on a UI element,

the Attributes Inspector is a great place to check.

It looks like buttons can have things like titles, text colors, and images.

I wanna change the title of the button, which is currently set to Button, and

change it to Show Another Fun Fact.

And hit Enter.

Finally, we need another label for our Did you know text above our fun fact label.

How about this?

Go ahead and try to do this on your own.

Post the video, and once you've tried to do it yourself, un-pause and

we'll continue along together again.

Remember, practice makes perfect.

So give it a go.

All right, so again,

I'll pull up the Object Library using the Cmd+Shift+L shortcut.

Search for a label, and drag and drop it above our fun fact text.

Over in the Attributes Inspector,

with the label selected, let's change this text to Did you know.

Hopefully, you were able to do it.

If not, don't worry, this will all become second nature eventually.

Finally, let's move our label into the center.

There we go.

And I wanna center the alignment of the text.

So in the Attributes Inspector, if we look right here, we can see Alignment.

And let's hit this button here to center our alignment.

We've done some really great work here.

I wanna see how our app is looking on the simulator.

But now that we've got some UI elements on the screen and not just a background

color, we really need to make sure that the simulator that we've selected in our

tool bar is the same size as the screen we've been viewing the Interface Builder.

Let me show you why.

If we look at this button down at the bottom,

we can see that it says here that we're currently viewing as an iPhone 8.

The iPhone 8 is a 4.7 inch screen size,

which means that we've been designing specifically for a 4.7 inch screen.

If we select another device by clicking here, and

selecting the iPhone SE, which is much smaller,

the screen size shrinks down and our UI is all out of place now.

Selecting an iPad really shows this off.

Let's scroll out a little bit here by hitting this minus button.

And you can see that our UI elements are nowhere near the center.

This is because we didn't give any guidelines for what our UI element should

do to adapt when it's being displayed on different phone sizes.

Luckily for us, there are some really awesome ways to make sure that our UI

works on all different screen sizes.

But for now, for simplicity's sake, let's put our preview back to the size that we

designed our UI on, which in my case was the 4.7 inch iPhone 8.

Up top, let's make sure that our simulator is a 4.7 inch model.

So I've got the iPhone 8 selected here, and let's run the app.

And there it is.

We've had our two text labels and our button down here at the bottom.

You can even tap on this button, and

it will give you a nice little animation showing it's being interacted with.

Our button doesn't do anything useful when we tap it yet.

So up next, we'll be hooking up our UI to some code.