iOS Dev: Difference between frame and bound, the easiest explanation you can find nowhere

The view system of iOS has frames and bounds. Sadly, even though it is a concept that is not very difficult, I feel like there are too many tutorials explaining it with too many words. I’ll explain right away in two seconds.

Every View has frame and bounds

View Properties

Quite complex to understand? Don’t worry.

What properties do views must have?

Every view is drawn as Square. It has origin (x, y coordinate system) and size (width, height).

Frame

Frame

Frame indicates the position and size of the view relative to its SuperView. This concept can’t be explained without parent view.

The image view above can be explained with its relativity with superview (mobile phone). The image is positioned at x 40, y 40 and its width has 240, height 380.

Bounds

Bounds

Whenever you create view, every view also creates its own coordinate system.

Frame vs Bounds

frame vs bounds

So every view can have frame and bounds. When you create a view, its position is defined by its parent view, and the created view creates also its own coordinate system.

If you add subview into the newly created view, the subview will have the frame relative to its parent view, and the subview will also have its own coordinate system(bounds).

Code Example to Help You Understand

let imageView = UIImageView(frame: CGRect(x: 40, y: 40, width: 380, height: 240))
imageView.image = UIImage(named: "man")
view.addSubview(imageView) // view is parent view of UIImageView
print(imageView.frame) // frame relative to its parent `view`  => 40, 40, 380, 240
print(imageView.bounds) // bounds coordinate system of its own => 0, 0, 380, 240

ImageView is the subview of view.

When you print the frame of image view, you can see x: 40, y: 40, width: 380, height: 240 is printed.

When you print bounds, you can see x: 0, y: 0, width: 380, height: 240

Let’s add subview to the created ImageView

let imageView = UIImageView(frame: CGRect(x: 40, y: 40, width: 380, height: 240))
imageView.image = UIImage(named: "man")
view.addSubview(imageView) // view is parent view of UIImageView
print(imageView.frame) // frame relative to its parent `view`  => 40, 40, 380, 240
print(imageView.bounds) // bounds coordinate system of its own => 0, 0, 380, 240
let label: UILabel = UILabel(frame: CGRect(x: 20, y: 20, width: 240, height: 40))
imageView.addSubview(label) // imageView is parent view of UILabel
print(label.frame) // frame relative to its parent `imageView` => 20, 20, 240, 240
print(label.bounds) // bounds coordinate system of its own     =>  0, 0, 240, 40

label is the subview of imageView.

When you print the frame of image view, you can see x: 20, y: 20, width: 240, height: 240 is printed.

When you print bounds, you can see x: 0, y: 0, width: 240, height: 240.

Conclusion

• Every view has frame and bounds.
• Frame is defined by the coordinate system of Parent View.
• Bounds is view’s own coordinate system.