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
We often talk about a view's frame and bounds, but they are two different things. In this video we understand the distinction between the two and how they help display and manipulate a view.
-
0:00
Before we resolve any of these layout issues,
-
0:03
we need to understand how our views are sized and positioned in the first place.
-
0:07
So far in the past, we've added constraints to our views, but
-
0:11
never fully looked at how exactly the system knows where to place them.
-
0:15
Let's imagine this is an apple working with a blank canvas so
-
0:18
far that just contains a single base view.
-
0:21
The origin of this view is at the top left at zero zero.
-
0:25
Now, we add a sub view to this view.
-
0:28
How do we understand the layout and size of this view,
-
0:31
the sub view, relative to the rest of the screen?
-
0:34
When we talk about the size and position of a view,
-
0:37
we're typically talking about it in terms of the coordinate space of its super view.
-
0:42
The size and layout of a view
-
0:45
in its super views coordinate space is known as a views frame.
-
0:49
And is defined by a CGRect.
-
0:52
CGRect is a struct.
-
0:54
A c struct mind you, not a swift native struct
-
0:57
that encapsulates information about a view's origin and size.
-
1:01
A view's frame is a rectangle,
-
1:04
the smallest rectangle, that fully encloses a view.
-
1:08
Why do I say a smallest rectangle?
-
1:09
Well, you'll understand in a second.
-
1:11
The origin of a view's frame is the distance from the top left
-
1:16
of the super view's origin.
-
1:17
And the size of the frame is the size of the underlying view.
-
1:21
In this example, the frame of our sub view is 100, 200, 200, 200.
-
1:27
It's important to know that frame is actually not a stored property
-
1:30
on the view but a computed one.
-
1:33
When we learned about computed properties,
-
1:35
we learned that they could have getters and setters.
-
1:38
When you set of view's frame,
-
1:39
it actually changes a couple of their underlying properties of the view.
-
1:44
What properties does changing the frame change?
-
1:47
Well the first is the view center.
-
1:49
Every view has a center property that identifies the center of the view.
-
1:54
But does so in its super view's coordinate space.
-
1:57
In this example, the view center is 200, 300.
-
2:01
So, center defines a view's location in its super view.
-
2:04
Well, what about the size?
-
2:06
This is defined by a view's bounds.
-
2:09
Bounds is also a rect, again a CGRect, with both an origin and size.
-
2:14
The difference between the bounds and
-
2:16
frame is that the bounds is a rect in the view's own coordinate space
-
2:21
where the frame is a rect in the super view's coordinate space.
-
2:25
So bounds defines the size of the view in its own coordinate space.
-
2:29
In this case, our bound size is 200 200,
-
2:31
which for now matches exactly our frame size.
-
2:36
The bounds' origin, which is within the view's own coordinate space is 0,0.
-
2:41
Right now, we're going to just ignore the bounds' origin
-
2:44
because it isn't used in computing the frame.
-
2:46
When computing the frame,
-
2:48
there are several properties that are taken into account.
-
2:51
But when you change a view's frame, it changes a view's center and
-
2:54
bounds property only.
-
2:56
Remember that frame and center are defined in these super view's coordinate space,
-
3:00
while bounds is in the view's own coordinate space.
-
3:03
Now, despite what this example may indicate, bounds and
-
3:06
frame are not always the same thing.
-
3:09
To see how they differ, let's apply a transformation to our view and
-
3:13
scale it down 50%.
-
3:15
When we apply a transformation, we don't actually change the views bounds or
-
3:18
its size but we do change the views frame.
-
3:22
This is because transformation is also used in the computation of a view's frame.
-
3:27
The dotted line represents our old frame.
-
3:30
And the new frame is now 150, 250, 100,100.
-
3:34
So this is a simple case that highlights how the frame differs from the bounds.
-
3:39
While the underlying views, size and therefore bounds is the same,
-
3:43
the frame that displays the actual view inside the coordinate space of its
-
3:48
super view is now 50% smaller around the view's center.
-
3:52
Okay, now what would happen if we applied a rotation to our view?
-
3:56
Let's rotate our view 45 degrees around the center.
-
3:59
Here is what it would look like.
-
4:01
Now, our frame is 59, 59, 282, 282.
-
4:06
While the bounds is still 0, 0, 200, 200.
-
4:09
So what's going on with the frame here?
-
4:12
Remember, we said that the frame is the smallest rectangle that encloses a view.
-
4:17
Because the view is diagonally positioned within the super view,
-
4:20
there isn't a one to one mapping between the frame and bounds right now.
-
4:24
In this case, the bounds is still the original bounds, but
-
4:27
the frame is completely different.
-
4:29
When you position a view on screen, you position it and
-
4:33
size it always within the super view space.
-
4:36
Keep that in mind.
-
4:37
So even though bounds and center really determine the position and size.
-
4:41
We primarily interact with the frame and
-
4:44
then let it determine how to change the underlying properties.
-
4:48
The only time we'll worry about actually manipulating bounds, center, and
-
4:51
transform properties is when we're applying transformations to our view.
-
4:55
So for now all you need to know is that if you want to
-
4:58
change how a view is positioned and
-
5:00
sized on screen, you're going to change the frame of the view because that is how
-
5:04
the view is represented in its super view's coordinate space.
-
5:08
Now that you know about a view's frame, let's try and
-
5:10
manipulate these values ourselves in code to sort out our layout problems.
You need to sign up for Treehouse in order to download course files.
Sign up