Bounds vs Frame Swift for iOS developer

***I use English to practice communication.

Hello JARNBOY come back. This session caused by I suspect process work of Frame and Bounds.

Then this blog will tell about difference between Frame and Bounds and caution if you set frame wrong on view life cycle in Swift.

Contents

• Difference between Frame and Bounds
• Caution

Difference between Frame and Bounds

Bounds refers to the views own coordinate system while Frame refers to the views parent coordinate system.

So above message is explain everything in article about difference haha, But I will show you in my workshop for see and understand the same thing.

First I create print for log look size and location of target view want to do some thing like this

I try to create UIView() one view add subview by reference location and size of orangeView for look difference when use frame and bounds

My Figma draw flow

Frame

This is what the Apple documentation says:

The frame rectangle, which describes the view’s location and size in its superview’s coordinate system.

My Figma draw flow

Bounds

The bounds rectangle, which describes the view’s location and size in its own coordinate system.

My Figma draw flow

If you notice about the location of the frame. When using the frame the x and y properties will represent where it is located within the parent view. If we rotate our view, the x and y coordinates will change.

If we don’t start changing the view or rotating it etc, the width and height will be the same as the bounds, but when we start doing things like rotation then it will all change.

You can think of the frame as a picture frame. The frame will be framing the view. So if we rotate the view, the frame will adjust its size in order to fit the rectangle, the same happens with the x and y coordinates. The frame will change because it try and wrap as tightly as possible around the view as you can see in the above image, the red border is perfectly sized to hold the orange rectangle.

Caution

I find caution some point when you want to use location of view to do something if you call location of frame but your storyboard view sample simulate view you create the location each device iPhone size screen is not same like this case

In storyboard you may be use iPhone 11 for simulate view create then if we figure size width and height and set center vertical and horizontal of superview of orangeView but I run test by iPhone 14 Pro

Result will get this same below picture.

What’s happen? This problem caused by size and location of orangeView in screen iPhone 11 not same orangeView in screen iPhone 14 Pro.

How to Fix that I will share two way

1. if you like config view by location point x, y you may be not figure width and height in constrain you can use AutoLayout for config size but this solution need set center (in my case want to orangeView display on center view)

2. If you need use constraint to figure size orangeView you can play with ViewLifeCycle by you can set border when View is ready to display in my case you add subview in ViewDidAppear

Then result of solution one or two will success like this.

Conclusion

bounds refers to the views coordinate system while the frame refers to the superviews coordinate system. Depending on the type of work that you are doing, this can have a big impact, but luckily it is something that should be quite obvious.

You can see source code my demo workshop on Github : FrameVsBoundsDemo

Best Regrads.
Papon Supamongkonchai
iOS Developer

Reference

Difference between Frame and Bounds in Swift