在纵向和横向中使用自动布局

Question

自动布局，尽管它很好，但让我为约束而发疯。我在 IB 中设计了纵向模式，但无法获得所需的横向模式。

请注意，当方向更改为横向时，UIImageView 块之间的间距会减小，SAMPLE TEXT 的文本对齐方式会更改为右对齐。

目前，我为它添加了一些约束条件。但是，我需要保持 UIImageView 块之间的空间是固定的，因此它在纵向上看起来很拥挤，而在横向上看起来很好。我需要它在纵向上均匀分布并在横向上压缩（如上图所示）。同样，目前我的约束会显示文本，但不会将其保持在屏幕中心并右对齐。

自动布局可以实现吗？如果是这样，怎么做？非常感谢您的帮助。

Answer 1

有几种方法可以解决这个问题。一种方法是将您的 3 个图像视图包含在 UIView 中。分别将顶部和底部图像视图约束赋予顶部和底部，并赋予中间一个 centerY 约束。给这个封闭的视图一个固定的高度和宽度，以及对控制器视图顶部的约束。为这个封闭视图创建一个高度约束的 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;
    }
}

至于标签，最简单的方法是移除你的约束（bottom 和 centerX），并在旋转时添加 trailing 和 centerY。

Answer 2

是的，可以使用自动布局来完成。如果您希望视图之间的间距根据方向增加和/或减少，您可以使用小于或等于或大于或等于关系（而不是等于）作为约束，这允许距离增加或缩小：

玩弄它，你应该能够得到你想要的。

Answer 3

是的，使用自动布局绝对可以做到这一点。通过一系列我认为可能太长而无法作为答案发布的步骤，您可以保留 ImageView 之间的间距并保持文本的对齐方式相同。

基本上，您必须固定每个 ImageView 的一个角并移除一些约束，以便在您更改方向时它不会自动压缩间距。

有关如何执行此操作的完整说明（几乎正是您所要求的）is explained in this tuorial。你可以在页面的一半左右找到它。

希望这就是您想要的。