Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
In Interface Builder, we built the visual components of our app inside a view. Views are an important component of all apps and in this video we’re going to learn about the role views play in iOS and the different type of views.
Teacher's Notes:
-
0:00
In our previous video we added a label to our app by adding it to the view.
-
0:04
What does that even mean?
-
0:06
What is a view?
-
0:07
In iOS, that is in iPhone and
-
0:10
iPad apps, you use Windows and Views to present content on the screen.
-
0:15
Each app has at least one window and acts as a container for
-
0:19
many different views that make up your app.
-
0:22
A view manages a rectangular area within this window in your app.
-
0:27
Views are not only responsible for drawing content on the screen, but also for
-
0:31
handling user interaction, like when we touch our screen, and
-
0:35
managing the layout of any sub-views within the view.
-
0:38
Views are instances of the UIView class, and
-
0:41
you can use views as building blocks when you build your app.
-
0:45
UIView even has specialized views that lets you put text, images, and
-
0:50
other types of content on the screen.
-
0:53
If your app is still running in the simulator,
-
0:55
you can press the Stop button to stop execution.
-
0:59
Let's go back to our main.storyboard file in interface builder.
-
1:03
Now, in addition to being able to see how our app is visually laid out,
-
1:07
we can also look at the view hierarchy or the lay out order of our views.
-
1:13
In the bottom left corner, you'll see an icon for the document outline.
-
1:18
Click it and we get a nice list view of what's going on.
-
1:23
Here is our base view, the one that sits right above our application window.
-
1:28
Right below that in the list is the label we just added.
-
1:32
So, remember how we said that UIView has specific views for
-
1:35
displaying text amongst other things?
-
1:38
Well, the label we just added here has a class of UILabel but
-
1:42
it inherits from UIView a second.
-
1:45
Our label is also a subview of this main view, and we see that in our
-
1:49
view hierarchy because the label is nested or contained in the main view.
-
1:55
When I first started building iPhone apps I thought that apps had a single view.
-
1:59
That's obviously not the case, as you can see here.
-
2:02
Think of views as building blocks where you use
-
2:05
multiple views in different hierarchies, to build how your App looks on the screen.
-
2:11
Now, App still looks a little sparse.
-
2:13
So, lets go ahead and add some more stuff.
-
2:16
In the utility panel, back here in the object library, search for a button.
-
2:22
I'm gonna bring it on here, but
-
2:23
let's space things out a bit more, let's move the label up,
-
2:27
exact positioning doesn't matter yet, and let's center our button on the screen.
-
2:33
There we go, now we want to change the text of the button to something other than
-
2:37
the default button text as well.
-
2:40
Similar to how we changed the text for our label.
-
2:43
We need to go to the attributes inspector in the utilities area.
-
2:47
Under the Title option we have a text field that
-
2:50
let's us change the button title.
-
2:53
So let's set it to Show Another Fun Fact.
-
2:56
Like before, we need to resize our button to fit our text.
-
3:00
Now, we could click the button and drag just like we did before.
-
3:04
But Interface Builder offers a bit more fine-tuned control over
-
3:09
size and positioning.
-
3:11
Select the button and
-
3:13
in the Utility Inspector click on this second icon from the right.
-
3:17
This is the Size Inspector and
-
3:20
gives you a bit more fine-tuned control over positioning and size.
-
3:24
Let's change the width of our button to 180 points and leave the height at 30.
-
3:30
We need to reposition the button back in the center.
-
3:34
And now let's run our app again.
-
3:37
Awesome.
-
3:38
We now have a button and a label on the screen.
-
3:41
And you can even click this button.
-
3:43
Hm, but nothing happens when we click it.
-
3:46
Join me in the next video to find out how to make that work.
You need to sign up for Treehouse in order to download course files.
Sign up