UIView Frame vs Bounds

UIView Frame vs Bounds

When working with views and trying to configure the layout for an application, it’s important to know the difference between a view’s bounds and frames. Many developers get confused between the frame and bounds and when they should use the two properties. The main reason is because many developers do not know the difference between the two. So, in order to understand the difference, let’s understand the definition and properties of a view.

First, what is a view? A view is a subclass of UIView which represents a rectangular area that draws and handles events in that area. It has just one superview (UIView), but it can contain as many subviews, which are stored in an NSArray. The order of its subviews stored in the array determines how those views are displayed. For example, the subviews stored later in the array will appear on top of the other subviews stored earlier in the array.

A view has three properties that determine its location and size.

image from Jonah Williams

The frame (CGRect) is the coordinates and dimensions of its rectangular boundary relative to its superview.

The bounds (CGRect) is the coordinates and dimensions of its rectangular boundary relative to its own view.

The center (CGPoint) is the center coordinates of itself relative to its superview.

A common misassumption is that a view’s frame size (width and height) should always be equal to its bounds size (width and height). This may be true in most cases, however, a view can also be transformed and rotated too. In the example below, when the view is rotated 45 degrees, the size of its bounds remain at 200 x 250. But, the size of its frame increased to 320 x 320 to contain the rotated view.

image from Stanford University

In conclusion, a frame is used to draw a view in relation to its superview. The bounds are used to draw within a view’s own space.

Thanks to Gan Chau


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: