iOS 9 Autolayout: A centered square [duplicate] - ios

Question

This question already has answers here:
How to make a square view resize with its superview using auto layout
(4 answers)
Closed 7 years ago.
This seems like it should be easier that it currently is being.
I am trying to center a UIView with an aspect ratio of 1:1 (A square) in any iOS device it is drawn in, regardless of orientation.
For detail:
My view has a draw that updates on a timeInterval. I was using a full screen view and computing my square on each draw. On orientation change the whole view went to hell. I assumed that if the view was square, I could trust the orientation change animation.
My constraints have been failing repeatedly, which is why this seems like it should be easier:
View (Square)
Constraints
aspect 1:1
Constraints
View.centerX = centerX
View.centerY = centerY
View.leading ≥ leadingMargin + 5 # 800
View.top ≥ Top Layout Guide.bottom + 5 # 800
trailingMargin ≥ View.trailing + 5 # 800
Bottom Layout Guide.top ≥ View.bottom + 5 # 800
I have the Content Hugging Prioity at 250
I have the content Compression Resistance at 750
This leaves the constraint errors:
- Missing Constraint: Need constrains for: X position or width
- Missing Constraint: Need constrains for: Y position or height
My confusion is that I can't lock into one dimension because on rotation I need to lock into the other.
As mentioned... this seems like it should be easier.
Center a Square UIView with a border of 5 at the thinner dimension.
(5 to the sides in portrait, 5 to the top and bottom in landscape)
Suggestions warmly appreciated, Explanations would be beyond helpful.

Answer 1

Here is an approach that I just put together. I couldn't do it entirely in IB, but at least the run-time code is limited to activating/deactivating constraints rather than having to add/remove or compute/change any sizes.
In my storyboard I have an inner UIView with the following constraints
Center X
Center Y
Leading space to superview = 5, priority = 999
Trailing space to superview = 5, priority = 999
Top space to superview=5, priority=1000
Bottom space to superview=5, priority=1000
I created IBOutlets for the last four constraints and this is my view controller -
class ViewController: UIViewController {
#IBOutlet var leadingConstraint: NSLayoutConstraint!
#IBOutlet var trailingConstraint: NSLayoutConstraint!
#IBOutlet var topConstraint: NSLayoutConstraint!
#IBOutlet var bottomConstraint: NSLayoutConstraint!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
self.setConstraintsForSize(self.view.frame.size)
}
override func viewWillTransitionToSize(size: CGSize, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {
self.setConstraintsForSize(size)
}
func setConstraintsForSize(size:CGSize) {
if (size.width > size.height) {
self.leadingConstraint.active=false;
self.trailingConstraint.active=false;
self.topConstraint.active=true;
self.bottomConstraint.active=true;
} else {
self.leadingConstraint.active=true;
self.trailingConstraint.active=true;
self.topConstraint.active=false;
self.bottomConstraint.active=false;
}
}
}
This works on iPhone and iPad, including iPad in windowed/splitscreen mode

Answer 2

The square needs to specify its size.
Square centerX = Parent centerX
Square centerY = Parent centerY
At this point, the view is centered, but there's nothing to let autolayout determine the size of the view.
Square width = 200
Square aspect = 1
If you want the square to be a portion of the parent's width, that's straightforward as well.
Square width = Parent width * 0.5 //or any other multiplier
You'll need to adjust the width constraint depending on how you want the square to look in landscape.
To have "the largest square possible", you can programmatically set the width constraint to min(parentWidth, parentHeight) and adjust on orientation.
Alternatively, leading, trailing, centerX, centerY, and aspect should get you similar results. Any set of constraints needs to be able to logically determine position and size without ambiguity.
Update:
In IB:
Square centerX = Parent centerX
Square centerY = Parent centerY
Square aspect = 1
In code:
if parent width > parent height
Square width = parent height - 2 * margin
else
Square width = parent width - 2 * margin
Adjust this on rotation