How to specify square (actually round) avatar in Xcode 5 storyboard with Auto Layout on?

Question

Is there a way in Xcode 5 to specify that an image view should be square - both in portrait and landscape orientations?

Is it possible in the Storyboard (with "Auto Layout" on) or do I have to do it in the view controller source code?

I have prepared a simple test app for iPhone. On the top it should display a round user avatar, so I am using SDWebImage and NZCircularImageView through CocoaPods.

So the avatar bounds should be square. When I set its width and height to 280 through constraints (here fullscreen),

this works - but in portrait mode only:

While in the landscape orientation this of course fails:

So I wonder if there is a trick to make it work (the avatar be perfectly round) in landscape orientation as well?

UPDATE:

When rotating to landscape, there is this warning:

2014-04-26 17:57:00.967 MyPhone[1220:60b] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) 
(
    "<NSLayoutConstraint:0x8c82e10 H:[NZCircularImageView:0x8c82a70(280)]>",
    "<NSLayoutConstraint:0x8c87640 H:[NZCircularImageView:0x8c82a70]-(20)-|   (Names: '|':UIView:0x8c86870 )>",
    "<NSLayoutConstraint:0x8c876a0 H:|-(20)-[NZCircularImageView:0x8c82a70]   (Names: '|':UIView:0x8c86870 )>",
    "<NSAutoresizingMaskLayoutConstraint:0x8d48410 h=--& v=--& V:[UIView:0x8c86870(480)]>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x8c82e10 H:[NZCircularImageView:0x8c82a70(280)]>

Break on objc_exception_throw to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

So as suggested by Jesse I have removed the redundant constraints (to the left and right of the image view) and added horizontal alignment to keep the image view in the middle.

However I still don't know how to shrink the image view when in landscape mode - so that it doesn't overlap the 2 labels and the button on the bottom of the view:

What I am trying to achieve:

• Have a round (i.e. its bounds should be square) avatar on the top
• The 2 labels and the button should always be visible at the bottom
• The avatar should grow to take any available space

UPDATE 2:

I've added ratio 1:1 constraint and also 20px from the image view bottom to the first name label (here fullscreen):

The landscape is ok now, exactly as I wanted it to be:

But the portrait mode is not ok: the width does not fit:

And it doesn't look good if I just add the left/right constraints:

Answer 1

Here's how I have done it:

1. Set the ratio to be 1:1.
2. Set horizontal right and left spacing as a >= constraint.
3. Set top-space as a fixed value
4. Set vertical spacing from the image to first label as >= constraint
5. Make the label fixed on the bottom
6. Center the image horizontally.

And heres a screenshot of my constraints, note that the fixed width is removed at build time. This is only to make IB make the square something other than 0px.

Answer 2

You may pin width of your image to 280px and then ctrl drag from image view to itself and choose aspect ratio constraint with multiplier 1. This will make height of your image view match to it's width

Answer 3

Your view is over-constrainted; you have set both the width and constraints to the left and right edges of the superview. This can't be satisfied in landscape, so you'll have to remove some constraints. (You're probably getting an error about this in the log?)

I'm not sure exactly what effect you want, but you could try removing the left and right edge constraints and instead adding a horizontal centering constraint. This will keep you view the same size in both orientations. If you want something different, try adding some more details or a mock up of the landscape layout you want.