Frames & Bounds

Frames and bounds are both of type CGRect (which is Core Graphic Rectangle).
Frame gives the location and the size of a view in the coordinate system of its superview and bounds gives the location and the size of a view in its own coordinate system.

Advertisements

Hey everyone!

In this post I’d like to write about the differences between frames and bounds.

Frames and bounds are both of type CGRect (which is Core Graphic Rectangle). CGRect is a structure which contains the origin (CGPoint) and size (CGSize) of the rectangle.

If you look at the official Apple documentation, it defines a frame as a property which gives the location (CGPoint) and the size (CGSize) of a view in the coordinate system of its superview whereas bounds is a property which gives the location and the size of a view in its own coordinate system.

From the definitions, the main difference is the coordinate system in which the location and size of a view are defined.

Below is an illustration of the two different coordinate systems in play.

F&B Eg 1.png

  • The white background is the main view and the green view is its subview.
  • The red lines depict the coordinate system of the superview i.e. the white view.
  • The blue lines depict the coordinate system of the green view.

In the above example, the frame and bounds properties of the green view are as follows.

  1. Frame (location and size in superview’s coordinate system) –
    • Location is (87, 120) – 87 pts away and 120 pts below the origin of the superview.
    • Size is (200, 160) – width of 200 and height of 160.
  2. Bounds (location and size in its own coordinate system)
    • Location is (0, 0) – the green view is at the origin in its own coordinate system.
    • Size is (200, 160) – width of 200 and height of 160.

This is when the view is in its identity form. What happens when the view is rotated or transformed?

I’ve built an app to demonstrate how the frame and bounds change. You can download the app here.F&B Eg 2.png

In this example,

  • Bounds of the green view is the green rectangle.
  • Frame of the green view is the rectangle formed by the black lines.

As you can see from the first image, bounds and frame are fundamentally the same when the view is in its regular position.

When you rotate the green view by 45°, the frame and bounds differ significantly. Notice that the bounds property remains the same, that is because when you rotate the green view, the coordinate system of the green view also changes.

So when to use frame and when to use bounds?

Its always safe to use the frame property while modifying the superview, like moving the view inside its superview

Use bounds when you have to change the contents of the view, like positioning of the subviews, or the size of the view.

 

Thanks for reading the post, please comment below if you found this post helpful.

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