UIImageView retains the Storyboard "preview screen bounds" on different devices - Frame not updating based on screen size

Question

When I run my app in simulator, the height and weight still get for my storyboard preview choose phone.

Should not be choose which kind of simulator?

ex: storyboard preview choose iPhoneSE then the image view

weight = 96

height = 92

storyboard preview choose iPhone8 then the image view

weight = 112.5

height = 108.5

but when I storyboard preview choose iPhoneSE and simulator no matter choose which like iPhone 8, iPhoneX...

weight = 96

height = 92

Why?

Most weird thing is the same simulator when I choose different storyboard preview, I get different size...

print(self.img.frame.height)
print(self.img.frame.width)

Answer 1

I had this exact same issue, and I do not think it comes across well in the description above. To recreate it, take the following steps:

Setup:

1) Start a new 'Single View App' in Xcode. I am currently using Xcode 10.2.1

2) Go into Storyboards and add a UIView object with some sort of backgroundColor so that it is visible

3) Give this new view some auto contraints, such as a leading, trailing, centerY, and an aspect ratio of 1:1. Just make sure to not give it a fixed height or width.

4) In ViewController.swift, add an IBOutlet variable such as 'myView' for this UIView and connect it so that it is easy to reference.

5) In viewDidLoad(), add a print statement to the effect of,

print("Bounds of myView: \(myView.bounds)")

Testing the issue:

Now, back in Interface Builder, set the preview, or 'View as' at the bottom to something like 'iPhone SE'. Then, at the top, where you choose the simulator, also choose 'iPhone SE'. Now run the app.

In the console, you will see your print statement with the bounds of the view, and everything will look fine visually.

Now, change the Interface Builder's preview 'View as' option to something like 'iPhone 8', but keep the simulator option on iPhone SE Again, run the app in the 'iPhone SE' simulator.

Just like before, visually everything is okay thanks to autolayout. However, the bounds information printed in the console is different. This instead matches the 'iPhone 8', or whatever device was chosen for preview in Interface Builder.

For an even more obvious example, choose something like an iPad Pro for the Interface Builder, and again run it on iPhone SE simulator. Again visually everything is okay, but the bounds information in the console is way off. It is tied to the Interface Preview and not to the device being tested.

The problems arise when you are writing code which uses the bounds information of an object under autolayout constraints which do not have a fixed width and height.

Solution:

In ViewController.swift, add the following after the viewDidLoad() method

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    print("Bounds of myView in viewDidLayoutSubviews: \(myView.bounds)")
  }

Now, no matter what preview option we use in Interface Builder, the simulator logs the correct bounds information at this point in the lifecycle.

So, for any projects which make use of the bounds or frame property in code for such a view as the one in this example, should place any code refrencing that bounds within the viewDidLayoutSubviews() method.