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 UIImageViewprint(imageView.frame) // frame relative to its parent `view`  => 40, 40, 380, 240print(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 UIImageViewprint(imageView.frame) // frame relative to its parent `view`  => 40, 40, 380, 240print(imageView.bounds) // bounds coordinate system of its own => 0, 0, 380, 240let label: UILabel = UILabel(frame: CGRect(x: 20, y: 20, width: 240, height: 40))imageView.addSubview(label) // imageView is parent view of UILabelprint(label.frame) // frame relative to its parent `imageView` => 20, 20, 240, 240print(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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
KD Knowledge Diet

Software Engineer, Mobile Developer living in Seoul. I hate people using difficult words. Why not using simple words? Keep It Simple Stupid!