如何在Xcode 5 storyboard中使用自动布局指定方形(实际上为圆形)的头像?

时间:2014-04-26 14:24:07

标签: ios xcode sdwebimage nsautolayout

在Xcode 5中是否有一种方法可以指定图像视图应该是正方形 - 无论是纵向还是横向?

是否可以在故​​事板中(启用“自动布局”)或者我是否必须在视图控制器源代码中执行此操作?

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

所以化身界限应该是正方形。当我通过约束(这里为fullscreen

将宽度和高度设置为280时

Xcode screenshot

这有效 - 但仅限于纵向模式:

portrait screenshot

在横向方向,这当然失败了:

landscape screenshot

所以我想知道是否有一个技巧可以让它在横向方面起作用(头像是完美的圆形)?

更新

旋转到横向时,会出现此警告:

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个标签和按钮重叠:

landscape screenshot

我想要实现的目标:

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

更新2:

我已经从图像视图底部添加了比例1:1约束和20px到第一个名称标签(此处为fullscreen):

Xcode screenshot

现在景观还可以,正如我想要的那样:

landscape screenshot

但是肖像模式不合适:宽度不合适:

portrait screenshot

如果我只添加左/右约束,它看起来不太好:

stretched screenshot

3 个答案:

答案 0 :(得分:3)

您可以将图像的宽度固定为280像素,然后按住Ctrl键从图像视图拖动到自身,并选择带有乘数1的宽高比约束。这将使图像视图的高度与其宽度相匹配

答案 1 :(得分:2)

您的观点过度约束;您已将宽度和约束设置为超视图的左右边缘。这在景观中无法满足,因此您必须删除一些约束。 (您可能在日志中遇到此错误?)

我不确定您想要的确切效果,但您可以尝试删除左右边缘约束,而是添加水平居中约束。这样可以让您在两个方向上查看相同的大小。如果您想要不同的东西,请尝试添加更多细节或模拟您想要的横向布局。

答案 2 :(得分:2)

以下是我的表现:

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

    还有我的约束截图,请注意固定宽度在构建时被删除。这只是为了让IB制作正方形而不是0px。

    Constraints