Adaptive Layout with Trait Collection in Swift iOS - ios

Question

I'm trying to layout a UIView on screen to be at the top at an aspect ratio of 16:9 when device is in portrait mode, and to be full screen when device is in landscape mode (like a video player screen). I decided to use size classes. Here is how i was able to achieve it but i'm not satisfied with the the implementation and there are some bugs. Here is my code:
override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
super.traitCollectionDidChange(previousTraitCollection)
if traitCollection.verticalSizeClass == .compact {
localPlayerView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}
}
override func viewWillLayoutSubviews() {
if traitCollection.verticalSizeClass == .compact {
localPlayerView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}
if traitCollection.horizontalSizeClass == .compact {
localPlayerView.removeFromSuperview()
view.addSubview(localPlayerView)
let height = view.frame.width * 9 / 16
localPlayerView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: height)
collectionView.anchor(top: localPlayerView.bottomAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
localPlayerView.layoutIfNeeded()
}
}
I had to remove the localPlayerView from superview and add it back to get the desired result because, it was still constraining to full superview width when i switch back to portrait.
How can I improve this code to achieve the same result?

Answer 1

Everytime you give the localPlayerView new constraints defining its size and position, you have to remove/deactivate the old constraints. In your code it seems that you are always just adding new constraints, which will result in unsatisfiable constraints and then problems in layout - morever, if you remove the player from the superview and then add it again, that will remove those constraints - that only confirms my hypothesis. You have to be careful to always have non-conflicting constraints.
Just a broad guidelines as how you can do it. Define two properties in the viewController:
var portraitConstraints: [NSLayoutConstraint] = []
var landscapeConstraints: [NSLayoutConstraint] = []
Then, once the view is loaded (e.g., in viewDidLoad) populate them accordingly:
portraitConstraints = [
// here create all the constraints that are needed to properly define position and size of the player when in portrait
]
landscapeConstraints = [
// all the constraints for landscape
]
NSLayoutConstraint.activate(portraitConstraints) // activate these as default
Then in the traitCollectionDidChange detect if you are in landscape or in portrait (I omit this code, you can find SO questions about that), and just activate the proper constraints (and deactivate old ones):
let inLandscape = // code to detect current orientation
if inLandscape {
NSLayoutConstraint.deactivate(portraitConstraints)
NSLayoutConstraint.activate(landscapeConstraints)
} else {
NSLayoutConstraint.deactivate(landscapeConstraints)
NSLayoutConstraint.activate(portraitConstraints)
}