When rotating simulation, content does not resize. Xcode 11

Question

When I run my app simulation in Xcode 11, it works fine (portrait or landscape). But when I rotate, it doesn't resize to the appropriate constraints I set for that orientation.

Sim in portrait

Sim in Landscape after rotation

Image of constraints

If I stop the app from running in the background and route the simulation then open it, then it works fine.

How can I resize the content while the device rotates?

Answer 1

I think your problem lays in your height and width constraints.

Try removing MCC.width = 812 and MCC.height = 376. The remaining constraints you have set for your label will keep it in the centre of your Video layer view.

Also try removing height = 2000 on your Video Layer view as the remaining constraints you have set should keep it bound to the edges of its view.

The problem with setting height and width constraints explicitly is when you rotate the device the height and width of the device changes. For example when you run your app (starting in portrait) you have a max height of 896 and width of 414 points on an iphone 11. But when you rotate it to landscape those values swap so you now have a max height of 414pt and a width of 896 points.

Run your app in portrait, after you rotate it have a look in Debug -- View Debugging -- Capture View Hierarchy (in the Xcode menu not the simulator menu). I think you will find that your Video layer is extending past the superView

Do you want your Video layer content to cover the whole screen? if so in the attributes inspector set Content Mode to Aspect Fill this will clip some of the content. If you want all of the content visible set it to Aspect Fit.

Answer 2

You will either have to use constraints or auto-layout to pin the subviews (text, image, those subviews that aren't displayed properly after rotation to the parent view (the main UIView of your UIViewController for example).

There are plenty of places you can do so. These are some of the examples:

• In Interface Builder: You'd need to either use

  1. auto-layout to define how each subview can stretch, and where to anchor the subview. Use the following to achieve this:
  2. use constraints to do the pinning and anchoring:

  How to add

  

  How to Inspect

  

• In code: You can use

  1. constraints to pin your view to superview.

      titleLabel.translatesAutoresizingMaskIntoConstraints = false
      titleLabel.leadingAnchor.constraint(equalTo: closeButton.trailingAnchor, constant: 30).isActive = true
      titleLabel.topAnchor.constraint(equalTo: closeButton.topAnchor).isActive = true
      titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -15).isActive = true
      titleLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
  

  2. Using Frames and sizes:

  titleLabel.frame = mySuperView.frame
  

  For code layout/constraints, if you're anchoring the view, I found it best to add it when adding the subview to the superview (in viewDidLoad or init...), but if you're working with sizes (widthAnchor and heightAnchor), OR if you're using frames and size, layout update methods (layoutSubviews, didLayoutSubviews, transition..., ...) are the best place, as they get updated when rotation changes.

NOTE: I used xcode 11.7 to make the screenshots, xcode 12 changed some icons so they will look slightly different. However, functionality is the same.