Frame Vs Bounds

This is a question I have personally asked multiple times during my iOS development career. Today In this blog will go through some detail about frame and bounds

What is Frame and Bounds?

Frame = a view’s location and size using the parent view’s coordinate system. It is represented as (x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat).

x and y coordinate are represented with respect to parent view.

Bounds = a view’s location and size using it’s own coordinate system. It is represented as (x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat).

bounds x and y coordinate is always 0 (zero). That’s because the bounds don’t know about the parent view.

E.g:

Consider a photo frame/clock on the wall. You can place the frame anywhere on wall. Photo frame size and position of frame on wall is called frame. Photo frame size and photo frame origin (x,y), is called as bounds

• In this example, Yellow border represent the frame of the picture with respect to super view
• Green border represents the bounds of the view
• The red dot in both images represents the origin of the frame or bounds.
• Frame = (x: 0, y: 0, width: 70, height: 140)
• Bounds = (x: 0, y: 0, width: 70, height: 140)

What happens if you change frame to x=40 and y=60 ?

• Frame = (x: 40, y: 60, width: 70, height: 140)
• Bounds = (x: 0, y: 0, width: 70, height: 140)
• Changing the x-y coordinates of the frame moves it in the parent view. So content of view still looks exactly same.
• The bounds have no idea that anything is different.
• If you change frame coordinate system, view size is same in frame and bounds.

What happens if you transform a view using 20 degrees clockwise?

• When view is modified usingtransform property, all transformations are performed relative to the origin point of the view.
• After transform is done, use view.center to move view around parent view.
• Frame = (x: 20, y: 52, width: 180, height: 187) — this is rough values.
• Bounds = (x: 0, y: 0, width: 70, height: 140)
• Bounds value are same even if you transform the view
• Frame value is undefined.

It is important to note that if you transform a view using rotate, scale or do some other transformation, then the frame becomes undefined. That means frame size may vary. In this time you shouldn’t use frame to get the view size but we can use bounds to get exact size of the View.

Both center and frame uses the coordinate system of the parent view.

What happen if we change bounds?

When you change bounds, frame hasn’t moved in the superview. But the content of frame has changed because the origin of the bounds rectangle starts at a different part of the view.

When to use frame and when to use bounds?

• Use frame when you making outward changes, like changing its width or finding the distance between the view and the top of its parent view.
• Use the bounds when you are making inward changes, like drawing things or arranging subviews within the view.
• Use the bounds to get the size of the view if you have done some transfomation on it.

I am happy to share this article with you. If you’ve enjoyed this article, do show support by giving a few claps 👏 . Thanks for your time and make sure to follow me or drop your comment below 👇