In our previous video we added a label to our app by adding it to the view.

What does that even mean?

What is a view?

In iOS, that is in iPhone and

iPad apps, you use Windows and Views to present content on the screen.

Each app has at least one window and acts as a container for

many different views that make up your app.

A view manages a rectangular area within this window in your app.

Views are not only responsible for drawing content on the screen, but also for

handling user interaction, like when we touch our screen, and

managing the layout of any sub-views within the view.

Views are instances of the UIView class, and

you can use views as building blocks when you build your app.

UIView even has specialized views that lets you put text, images, and

other types of content on the screen.

If your app is still running in the simulator,

you can press the Stop button to stop execution.

Let's go back to our main.storyboard file in interface builder.

Now, in addition to being able to see how our app is visually laid out,

we can also look at the view hierarchy or the lay out order of our views.

In the bottom left corner, you'll see an icon for the document outline.

Click it and we get a nice list view of what's going on.

Here is our base view, the one that sits right above our application window.

Right below that in the list is the label we just added.

So, remember how we said that UIView has specific views for

displaying text amongst other things?

Well, the label we just added here has a class of UILabel but

it inherits from UIView a second.

Our label is also a subview of this main view, and we see that in our

view hierarchy because the label is nested or contained in the main view.

When I first started building iPhone apps I thought that apps had a single view.

That's obviously not the case, as you can see here.

Think of views as building blocks where you use

multiple views in different hierarchies, to build how your App looks on the screen.

Now, App still looks a little sparse.

So, lets go ahead and add some more stuff.

In the utility panel, back here in the object library, search for a button.

I'm gonna bring it on here, but

let's space things out a bit more, let's move the label up,

exact positioning doesn't matter yet, and let's center our button on the screen.

There we go, now we want to change the text of the button to something other than

the default button text as well.

Similar to how we changed the text for our label.

We need to go to the attributes inspector in the utilities area.

Under the Title option we have a text field that

let's us change the button title.

So let's set it to Show Another Fun Fact.

Like before, we need to resize our button to fit our text.

Now, we could click the button and drag just like we did before.

But Interface Builder offers a bit more fine-tuned control over

size and positioning.

Select the button and

in the Utility Inspector click on this second icon from the right.

This is the Size Inspector and

gives you a bit more fine-tuned control over positioning and size.

Let's change the width of our button to 180 points and leave the height at 30.

We need to reposition the button back in the center.

And now let's run our app again.

Awesome.

We now have a button and a label on the screen.

And you can even click this button.

Hm, but nothing happens when we click it.

Join me in the next video to find out how to make that work.