2011-03-19 09:57:25 8 Comments
I would like to know how to use these properties in the right manner.
As I understand, frame
can be used from the container of the view I am creating.
It sets the view position relative to the container view. It also sets the size of that view.
Also center
can be used from the container of the view I'm creating. This property changes the position of the view relative to its container.
Finally, bounds
is relative to the view itself. It changes the drawable area for the view.
Can you give more info about the relationship between frame
and bounds
? What about the clipsToBounds
and masksToBounds
properties?
Related Questions
Sponsored Content
21 Answered Questions
[SOLVED] Giving UIView rounded corners
- 2009-10-02 13:36:24
- itsaboutcode
- 313907 View
- 564 Score
- 21 Answer
- Tags: ios cocoa-touch uiview
1 Answered Questions
10 Answered Questions
[SOLVED] Cocoa: What's the difference between the frame and the bounds?
- 2009-07-31 00:07:04
- mk12
- 184791 View
- 569 Score
- 10 Answer
- Tags: cocoa cocoa-touch uiview
10 Answered Questions
20 Answered Questions
5 Answered Questions
3 Answered Questions
1 Answered Questions
UIView Frame and Bounds
- 2014-10-17 07:21:01
- DevelopeXCode
- 90 View
- 0 Score
- 1 Answer
- Tags: uiview scrollview frame bounds
1 Answered Questions
How to keep UIscrollview frame fixed but dynamics bounds
- 2015-01-19 10:01:24
- AlexHsieh
- 225 View
- 0 Score
- 1 Answer
- Tags: ios objective-c uiscrollview frame bounds
2 Answered Questions
[SOLVED] Programmatically reveal a UIView
- 2011-08-15 19:20:59
- mag725
- 1251 View
- 3 Score
- 2 Answer
- Tags: objective-c ios animation uiview bounds
6 comments
@NSTNF 2015-04-03 20:46:57
After reading the above answers, here adding my interpretations.
Suppose browsing online, web browser is your
frame
which decides where and how big to show webpage. Scroller of browser is yourbounds.origin
that decides which part of webpage will be shown.bounds.origin
is hard to understand. The best way to learn is creating Single View Application, trying modify these parameters and see how subviews change.@Wael Showair 2015-10-31 19:16:25
There are very good answers with detailed explanation to this post. I just would like to refer that there is another explanation with visual representation for the meaning of Frame, Bounds, Center, Transform, Bounds Origin in WWDC 2011 video Understanding UIKit Rendering starting from @4:22 till 20:10
@Suragch 2015-03-08 06:11:10
This question already has a good answer, but I want to supplement it with some more pictures. My full answer is here.
To help me remember frame, I think of a picture frame on a wall. Just like a picture can be moved anywhere on the wall, the coordinate system of a view's frame is the superview. (wall=superview, frame=view)
To help me remember bounds, I think of the bounds of a basketball court. The basketball is somewhere within the court just like the coordinate system of the view's bounds is within the view itself. (court=view, basketball/players=content inside the view)
Like the frame, view.center is also in the coordinates of the superview.
Frame vs Bounds - Example 1
The yellow rectangle represents the view's frame. The green rectangle represents the view's bounds. The red dot in both images represents the origin of the frame or bounds within their coordinate systems.
Example 2
Example 3
Example 4
This is the same as example 2, except this time the whole content of the view is shown as it would look like if it weren't clipped to the bounds of the view.
Example 5
Again, see here for my answer with more details.
@Mohd Haider 2015-03-26 13:03:53
Thanks Suragch. It is really very clear picture of frame and bound difference. I really appreciate your effort.
@Matt Chuang 2016-01-27 05:21:44
All the stuff that I want to see in one short and concise answer. Thanks!
@Honey 2016-04-16 16:48:04
Awesome! For Example 3: I don't get it. you only moved your frame's origin a little bit, how does that change your image's rotation?
@Suragch 2016-04-16 17:23:30
@asma22, In example 3 I was just trying to show that when you rotate an image the frame changes but the bounds don't. See my fuller answer.
@coolbeet 2014-10-21 05:51:34
I think if you think it from the point of
CALayer
, everything is more clear.Frame is not really a distinct property of the view or layer at all, it is a virtual property, computed from the bounds, position(
UIView
's center), and transform.So basically how the layer/view layouts is really decided by these three property(and anchorPoint), and either of these three property won't change any other property, like changing transform doesn't change bounds.
@Lorenzo B 2012-07-01 14:27:48
Since the question I asked has been seen many times I will provide a detailed answer of it. Feel free to modify it if you want to add more correct content.
First a recap on the question: frame, bounds and center and theirs relationships.
Frame A view's
frame
(CGRect
) is the position of its rectangle in thesuperview
's coordinate system. By default it starts at the top left.Bounds A view's
bounds
(CGRect
) expresses a view rectangle in its own coordinate system.Center A
center
is aCGPoint
expressed in terms of thesuperview
's coordinate system and it determines the position of the exact center point of the view.Taken from UIView + position these are the relationships (they don't work in code since they are informal equations) among the previous properties:
frame.origin = center - (bounds.size / 2.0)
center = frame.origin + (bounds.size / 2.0)
frame.size = bounds.size
NOTE: These relationships do not apply if views are rotated. For further info, I will suggest you take a look at the following image taken from The Kitchen Drawer based on Stanford CS193p course. Credits goes to @Rhubarb.
Using the
frame
allows you to reposition and/or resize a view within itssuperview
. Usually can be used from asuperview
, for example, when you create a specific subview. For example:When you need the coordinates to drawing inside a
view
you usually refer tobounds
. A typical example could be to draw within aview
a subview as an inset of the first. Drawing the subview requires to know thebounds
of the superview. For example:Different behaviours happen when you change the
bounds
of a view. For example, if you change thebounds
size
, theframe
changes (and vice versa). The change happens around thecenter
of the view. Use the code below and see what happens:Furthermore, if you change
bounds
origin
you change theorigin
of its internal coordinate system. By default theorigin
is at(0.0, 0.0)
(top left corner). For example, if you change theorigin
forview1
you can see (comment the previous code if you want) that now the top left corner forview2
touches theview1
one. The motivation is quite simple. You say toview1
that its top left corner now is at the position(20.0, 20.0)
but sinceview2
'sframe
origin
starts from(20.0, 20.0)
, they will coincide.The
origin
represents theview
's position within itssuperview
but describes the position of thebounds
center.Finally,
bounds
andorigin
are not related concepts. Both allow to derive theframe
of a view (See previous equations).View1's case study
Here is what happens when using the following snippet.
The relative image.
This instead what happens if I change
[self view]
bounds like the following.The relative image.
Here you say to
[self view]
that its top left corner now is at the position (30.0, 20.0) but sinceview1
's frame origin starts from (30.0, 20.0), they will coincide.Additional references (to update with other references if you want)
About
clipsToBounds
(source Apple doc)In other words, if a view's
frame
is(0, 0, 100, 100)
and its subview is(90, 90, 30, 30)
, you will see only a part of that subview. The latter won't exceed the bounds of the parent view.masksToBounds
is equivalent toclipsToBounds
. Instead to aUIView
, this property is applied to aCALayer
. Under the hood,clipsToBounds
callsmasksToBounds
. For further references take a look to How is the relation between UIView's clipsToBounds and CALayer's masksToBounds?.@Lorenzo B 2012-12-05 10:08:52
@Rhubarb You are perfectly right. I will point it out in my answer. Thanks.
@nimgrg 2013-06-19 22:03:24
I don't know if I will get an answer but why does the subview move in the negative direction when the bounds origins are changed. Just can't seem to get my head around that bit. Thanks!!
@Lorenzo B 2013-06-20 08:04:10
@nimgrg It seems that the view moves in the negative direction but it's not. Internal coordinates of the superview are changed.
@nimgrg 2013-06-20 08:41:42
forgive my geometric abilities, if the internal coordinates of the superview are changed to origin (30.0, 20.0), does the point (0,0) lie inside of the blue square or outside of it. I am just trying to track down the changes and make sense of it. Thanks for taking time to answer.
@user2568508 2013-08-06 11:08:59
@flexaddicted: Hi, the slide you added says: "View B's middle in its own coordinate space is: bounds.size.width/2+origin.x" -- why is this the case? Since the title says in its own coordinate space, I would say it is: bounds.size.width/2+bounds.origin.x?? Isn't it??
@Lorenzo B 2013-08-06 11:10:30
@user2568508 Yes, in fact it is. ;)
@user2568508 2013-08-06 14:46:16
@flexaddicted: hm got a bit confused now, it seems the slide says bounds.size.width/2+bounds.origin.x -- for some reasons it seems I didn't notice the
bounds
in front of origin.x and hence my comment. Seems the correct answer is: ..+bounds.origin.x@Xiangdong 2015-01-22 18:00:39
In the first picture, how can I tell when a CGPoint(e.g. 141,66) is inside the frame but not in the bounds area? And vise versa?
@Honey 2018-10-06 22:26:59
Developers mostly constrain views using either 1) storyboards (fine) 2) constraints (fine) 3) superview's frame (not fine) 4) I rarely see them use the superview's bounds. So just to conclude you're saying using superview's frame doesn't make sense, because the view may get rotated and instead the superview's bounds is the right approach. That makes sense but I guess since most of the time we're not dealing with views that are rotated we don't rune into unexpected issues. Right? Q: Is there anytime that actually using the superview's bounds would not be what you want? If so when?
@Erben Mo 2012-10-12 00:50:54
I found this image most helpful for understanding frame, bounds, etc.
Also please note that
frame.size != bounds.size
when the image is rotated.@Narendra Kamma 2012-11-20 10:34:23
A picture worth thousand words.
@Ratikanta Patra 2013-05-30 07:13:08
The best possible explanation
@user2568508 2013-08-06 11:09:25
@Erben Mo: Hi, the slide you added says: "View B's middle in its own coordinate space is: bounds.size.width/2+origin.x" -- why is this the case? Since the title says in its own coordinate space, I would say it is: bounds.size.width/2+bounds.origin.x?? Isn't it??
@David 2014-10-15 12:49:28
What is the source of this image? Link?
@preynolds 2015-08-21 05:54:18
@David It's from Stanford's CS193p course on iTunesU found here: www.stanford.edu/class/cs193p/cgi-bin/drupal/downloads-2013-fall