iOS 9 Autolayout: A centered square

Question

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