如何在启用自动布局的 Xcode 5 故事板中指定方形（实际上是圆形）头像？

Question

Xcode 5 中有没有一种方法可以指定图像视图应该是方形的——无论是纵向还是横向？

是否可以在情节提要中（启用“自动布局”）或者我必须在视图控制器源代码中这样做？

我已经准备好了a simple test app for iPhone。在顶部它应该显示一个圆形的用户头像，所以我通过 CocoaPods 使用 SDWebImage 和 NZCircularImageView。

所以头像边界应该是方形的。当我通过约束（此处为fullscreen）将其宽度和高度设置为 280 时，

这可行 - 但仅限纵向模式：

虽然在横向上，这当然会失败：

所以我想知道是否有一个技巧可以使它在横向上也能工作（头像是完美的圆形）？

更新：

当旋转到横向时，有这个警告：

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.

所以按照 Jesse 的建议，我已经移除了多余的约束（图像视图的左侧和右侧）并添加了水平对齐以将图像视图保持在中间。

但是我仍然不知道如何在横向模式下缩小图像视图 - 这样它就不会与视图底部的 2 个标签和按钮重叠：

我想要达到的目标：

• 在顶部有一个圆形（即它的边界应该是方形）头像
• 2 个标签和按钮应始终在底部可见
• 头像应该增长以占用任何可用空间

更新 2：

我添加了比例 1:1 约束以及从图像视图底部到名字标签的 20 像素（此处为 fullscreen）：

现在的风景还可以，和我想要的完全一样：

但是纵向模式不行：宽度不适合：

如果我只是添加左/右约束，它看起来并不好：

Answer 1

您可以将图像的宽度固定为 280 像素，然后 ctrl 从图像视图拖动到自身并使用乘数 1 选择纵横比约束。这将使您的图像视图的高度与其宽度匹配

Answer 2

这是我的做法：

1. 将比率设置为1:1。
2. 将水平左右间距设置为>= 约束。
3. 将顶部空间设置为固定值
4. 将图像到第一个标签的垂直间距设置为>=约束
5. 使标签固定在底部
6. 水平居中图像。

这是我的约束的屏幕截图，请注意固定宽度在构建时被删除。这只是为了让 IB 把正方形做成 0px 以外的东西。

Answer 3

您的观点受到了过度限制；您已将宽度和约束设置为超级视图的左右边缘。这在横向上无法满足，因此您必须消除一些约束。 （您可能在日志中收到关于此的错误？）

我不确定您到底想要什么效果，但您可以尝试移除左右边缘约束，而是添加水平居中约束。这将使您在两个方向上查看相同的大小。如果您想要不同的东西，请尝试添加更多细节或您想要的横向布局模型。