在竖屏和横屏模式下使用AutoLayout

Question

自动布局虽然非常好，但是对于约束条件让我感到头疼。我在 IB 中设计了纵向模式，但是我无法使期望的横向方向正常工作。

注意当屏幕方向变成横向时，UIImageView 块之间的间距会减小，SAMPLE TEXT 的文本对齐方式会变成右对齐。

目前，我已经添加了一些约束条件使其正常工作。然而，我需要保持 UIImageView 块之间的间距固定，因此在纵向模式下看起来很挤，在横向模式下却很好看（如上图所示）。同样地，当前我的约束条件将文本带到屏幕中央，但它并没有保持右对齐。

使用自动布局是否有可能实现这一点？如果可以，该怎么做呢？非常感谢您的帮助。

- Gaurav Wadhwani

---

为了实现灵活的间距，可能会有用的下一个问题是：http：//stackoverflow.com/questions/17089427/ios-autolayout-vertically-equal-space-to-fill-parent-view和http：//stackoverflow.com/questions/13680303/ios-auto-layout-equal-spaces-to-fit-superviews-width - Mikhail

在运行时处理视图约束，这将非常有用 Autolayout中的运行时更改。 - Kampai

Answer 1

有几种方法可以解决这个问题。一种方法是将3个图像视图放在UIView中。给顶部和底部的图像视图分别设置约束条件，并给中间的图像视图设置一个垂直居中的约束条件。为这个包含视图设置固定的高度和宽度，并将其约束到控制器视图的顶部。为这个包含视图的高度约束创建IBOutlet，并在旋转时进行更改。在下面的例子中，我在竖屏模式下将其高度设置为350：

-(void)updateViewConstraints {
    [super updateViewConstraints];
    if (self.view.bounds.size.height < self.view.bounds.size.width) {
        self.heightCon.constant = self.view.bounds.size.height;
    }else{
        self.heightCon.constant = 350;
    }
}

关于标签，最简单的方法是去除您所拥有的限制（底部和中心X），并在旋转时添加trailing和centerY。

- rdelmar

---

听起来不错。然而，我的视图没有响应-(void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation duration:(NSTimeInterval)duration..我尝试使用NSLog记录interfaceOrientation，但没有任何输出..所以我已经注册了设备的方向通知，但这使得动画变得缓慢..你知道为什么视图没有响应你提到的方法吗？ - Gaurav Wadhwani

@GauravWadhwani，我不知道为什么它没有被调用。我已经更改了我的帖子，将代码放在updateConstraints中。看看是否有效。 - rdelmar

可以了，非常感谢！！！我花了整整一天的时间在这上面。我现在只需要添加这些块并标记你的答案。再次感谢 :) - Gaurav Wadhwani

我们能否使用Xibs来避免编写上述代码呢？ - Naga Mallesh Maddali

@NagaMalleshMaddali，是的，您可以使用xibs（和代码在它们之间切换），但问题特别询问是否可以使用自动布局完成。 - rdelmar

Answer 2

可以使用自动布局实现。如果您希望视图之间的间距根据方向增加或减少，可以使用“小于或等于”或“大于或等于”关系（而不是“等于”）约束，允许距离增长或缩小：

尝试一下，您应该能够得到所需的效果。

- mluisbrown

---

感谢您的回复。我尝试更改了约束条件。但是，一旦我将其更改为除“等于”以外的任何内容，它就会在水平定位方面发出模糊布局警告。 - Gaurav Wadhwani

你需要添加其他约束条件到顶部和底部的UIImageView，这样在它们之间使用<=或>=约束条件时就不会产生歧义。 - mluisbrown

我需要UIImage的位置在垂直方向上是可变的，因此无论我添加什么约束条件，它都必须以<=或=>的形式存在。但是Xcode期望我至少添加一个垂直方向上的固定约束条件。如何添加一个固定的约束条件并保持其灵活性？ - Gaurav Wadhwani

这有点棘手。你需要进行实验，包括约束优先级的调整。但是如果你试着像Xcode一样思考并说“在这里给定的约束条件下，我能否明确地定位这个视图？”会有所帮助。这就像解决逻辑谜题一样，一开始并不总是容易。 - mluisbrown

Answer 3

是的，使用自动布局绝对可以实现这一点。通过一系列步骤，我认为在答案中发布可能过长，您可以保留ImageView之间的间距并保持文本的对齐方式。

基本上，您将不得不固定每个ImageView的一个角，并删除一些约束条件，以便在更改方向时不会自动压缩间距。

如何做到这一点的完整说明（几乎正好是您所要求的）在此教程中有详细解释。您可以在页面中部找到它。

希望这就是您所寻找的。

- CaptJak

---

嘿，目前压缩和文本对齐没有改变。我希望空间可以压缩并且文本对齐可以改变。 - Gaurav Wadhwani

你试过我给的链接了吗？你想压缩哪个空间？从你的问题来看，似乎你不想在横向压缩它们。你真的想要它们被压缩吗？ - CaptJak

是的，我希望这些块在纵向布局时有间隔，在横向布局时压缩以适应图像中显示的方式。我之前尝试了链接但无法解决问题。不过我会再次阅读 :) - Gaurav Wadhwani