ios - 皱缩的布局

Question

我有以下设计的 View Controller :

@interface ViewController ()

@property (nonatomic, strong) IBOutlet UILabel *l1;
@property (nonatomic, strong) IBOutlet UILabel *l2;
@property (nonatomic, strong) IBOutlet UITextField *input1;
@property (nonatomic, strong) IBOutlet UITextField *input2;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view removeConstraints:self.view.constraints];

    for (UIView *view in @[self.l1, self.l2, self.input1, self.input2])
        [view setTranslatesAutoresizingMaskIntoConstraints:NO];

    NSDictionary *views = @{ @"l1" : self.l1, @"l2" : self.l2,
                             @"input1": self.input1, @"input2" : self.input2,
                             @"topLayout" : self.topLayoutGuide};

    NSArray *constraints;
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[l1]-[input1]"
                                                          options:NSLayoutFormatAlignAllCenterY
                                                          metrics:nil
                                                            views:views];
    [self.view addConstraints:constraints];
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[l2]-[input2]"
                                                          options:NSLayoutFormatAlignAllCenterY
                                                          metrics:nil
                                                            views:views];
    [self.view addConstraints:constraints];
    NSString *v1 = @"V:|-20-[input1]-[input2]";
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:v1
                                                          options:0
                                                          metrics:nil
                                                            views:views];
    [self.view addConstraints:constraints];
    NSString *v2 = @"V:|-20-[l1]-[l2]";
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:v2
                                                          options:0
                                                          metrics:nil
                                                            views:views];
    [self.view addConstraints:constraints];
}

@end

结果如下:

如果我简单地更改 v1 和 v2 以使用 topLayoutGuide:

NSString *v1 = @"V:[topLayout]-20-[input1]-[input2]";
NSString *v2 = @"V:[topLayout]-20-[l1]-[l2]";

屏幕看起来像这样被揉成一团:

当我停止在我的水平约束上使用 NSLayoutFormatAlignAllCenterY 时，我可以让它消失，但是我的行不再正确排列:

为什么会出现这个问题，在仍然使用 topLayoutGuide 的同时让行正确排列的正确方法是什么？

Answer 1

简而言之，问题是您不了解 Storyboard/ Nib 通过自动布局生成的约束与您的代码生成的约束之间的关系。因此，您的约束总是不好(即使视觉布局看起来是正确的)。顶部布局指南的问题只会导致约束的不良情况在视觉上变得更加明显。

但是，我不想重复这一点(即您的代码做错的所有事情)；我宁愿直接跳到正确的方法。准备好？只需按照以下步骤操作:

1. 在您的代码中，删除这一行(这实际上是 90% 问题的原因):

   [self.view removeConstraints:self.view.constraints];
   

2. 在 Storyboard中:

   一个。给所有四个元素(两个标签和两个文本字段)每个一个左(前导)约束和一个顶部约束。

   选择您刚刚创建的所有八个约束，并在属性检查器中选中“在构建时删除”框。

现在您的代码将完全按照您的期望工作。

正如我所说，我不想详细说明这是为什么，但基本上我已经指示您做的是在自动布局下的 Storyboard / Nib 中创建 View 并应用于那些的正确方法仅查看代码中生成的约束。

---

请注意，您也可以删除此行:

for (UIView *view in @[self.l1, self.l2, self.input1, self.input2])
    [view setTranslatesAutoresizingMaskIntoConstraints:NO];

它没有坏处，但也没有好处，因为这些 View 已经没有将它们的自动调整掩码转换为约束。

---

最后一点:我们刚刚所做的一切都非常愚蠢，因为您可以采用两种更常用的方法之一:

• 我们本可以在 Storyboard/nib 中生成所有这些约束，然后简单地删除所有您的代码。

• 或者，恰恰相反，我们可以从 Storyboard/nib 中删除 subview 并在代码中创建 subview (并在代码中将它们添加到 self.view)。

其中任何一个都意味着您的代码可以正常工作(删除所有约束的部分除外，这始终是一个灾难性的想法)。但是，我向您展示了如何做您想做的事情，只是为了支持假设。