How to Constrain a Square View with Auto Layout in iOS

Using Auto Layout, what initially seems easy can be more complicated. Auto Layout always requires you to be very explicit. This can be an extremely powerful thing in cases where you may want a greater level of control. On the other hand, constraining simple views can require a lot of constraints.  For example, I may want a view to be a perfect square and be as large as possible in its container view whether the device is rotated in portrait or landscape. To demonstrate, consider these two examples:

You can see the purple area of the screen is a separate UIView that I want to be as large as possible and also still be a perfect square. This is how I want the view to behave when I rotate the device to portrait and landscape.

Initial Attempt with No Regard for Rotation

If my app only worked in portrait mode, then the constraints I need would be very simple. The width of the square is the limiting factor when only drawing in portrait mode.

To tell Auto Layout how large the square should be, all I need to do is pin the left and right edge of my purple view to the left and right edge of my containing view. Next I center the purple UIView horizontally and vertically within the container. Finally I apply a 1:1 aspect ratio on the UIView which constrains the view to be a perfect square. Below is what the final constraints look like in Xcode.

This works fine in portrait mode, but look what happens when I try to rotate the device:

When I rotate the device, Auto Layout cannot satisfy two of my constraints: one that specifies that the purple view be square (1:1 aspect ratio) and the other that pins the left and right edge of the square to the super view (specifying the size of the square).

A Square View that Responds to Portrait and Landscape

The first two constraints that I need to remove, from my previous example, is the left and right edge constraints. These will not work in landscape mode because the view is now constrained in the vertical direction not horizontal. I need a way to tell the purple UIView how big it needs to be.

The only way to handle this situation is to use constraints with different priority. What this does is basically tell iOS which constraints to break first when two are conflicting. I am going to setup the constraints again, but I will use two different priorities for the constraints.

Required Priority Constraints (value = 1000)

The following constraints cannot be broken in portrait or landscape mode:

1. Align Center X (center view in container)
2. Align Center Y (center view in container)
3. 1:1 Ratio to container view (make the width and height equal or square)
4. Width of the purple view has to be less than or equal to the container view
5. Height of the purple view has to be less than or equal to the container view

High Priority Constraints (value = something less than 1000)

The following constraints are not required, but Auto Layout will try to abide by them. Their value can be set to any value less than 1,000. I set my priority to 750 because that was a convenient option to pick from the dropdown list in interface builder. What these constraints do is maximize the size the square to be the larger of the width or height of the containing view (whichever is smaller).

1. Width of the purple view is equal to the containing view
2. Height of the purple view is equal to the containing view

Below is what the final constraints look like in Xcode:

Notice that the two “Equal Width/Height to: Superview” constraints have a dotted line to indicate they are not required constraints.  Below is the detail of the equal height constraint with a priority of 750:

Final Result

Below is the view behaving correctly in portrait and landscape: