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
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 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
Whenever you create view, every view also creates its own coordinate system.
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.