ios - 以编程方式自动垂直布局 ios 时出错

Question

我正在以编程方式创建 View ，其中有两个 subview ，我为此设置了高度和宽度约束， 我想要的是这样的，

UIView (variable height)
[10px gap]
UIView (fix height 40)

但是我得到了:

我的代码是:

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIView *button1, *button2 ;
    button1=[UIView new];
    button2=[UIView new];
    button1.backgroundColor=[UIColor redColor];
    button2.backgroundColor=[UIColor yellowColor];
    button1.translatesAutoresizingMaskIntoConstraints=button2.translatesAutoresizingMaskIntoConstraints=NO;

    [self.view addSubview:button1];
    [self.view addSubview:button2];
    NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(button1,button2);

    NSArray *constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button1]-|"
                                                                   options:0
                                                                   metrics:nil
                                                                     views:viewsDictionary];

    [self.view addConstraints:constraints];

    constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[button1]-10-[button2]-|"
                                                          options: NSLayoutFormatAlignAllLeft
                                                          metrics:nil
                                                            views:viewsDictionary];

    [self.view addConstraints:constraints];
}

编辑 第二次尝试

- (void)viewDidLoad
{
    [super viewDidLoad];
    UIView *button1, *button2 ;
    button1=[UIView new];
    button2=[UIView new];
    button1.backgroundColor=[UIColor redColor];
    button2.backgroundColor=[UIColor yellowColor];
    button1.translatesAutoresizingMaskIntoConstraints=button2.translatesAutoresizingMaskIntoConstraints=NO;

    [self.view addSubview:button1];
    [self.view addSubview:button2];

 [self.view addConstraint:[NSLayoutConstraint constraintWithItem:button1
                                                                 attribute:NSLayoutAttributeLeading
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.view 
                                                                 attribute:NSLayoutAttributeLeft
                                                                multiplier:1.0
                                                                  constant:25.0]];

//    [self.view  addConstraint:[NSLayoutConstraint constraintWithItem:button1
//                                                                 attribute:NSLayoutAttributeWidth
//                                                                 relatedBy:NSLayoutRelationEqual
//                                                                    toItem:nil
//                                                                 attribute:NSLayoutAttributeNotAnAttribute
//                                                                multiplier:1.0
//                                                                  constant:100]];

    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:button1
                                                          attribute:NSLayoutAttributeTrailing
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeRight
                                                         multiplier:1.0
                                                           constant:-25.0]];


    [self.view  addConstraint:[NSLayoutConstraint constraintWithItem:button1
                                                                 attribute:NSLayoutAttributeTop
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:self.view 
                                                                 attribute:NSLayoutAttributeTop
                                                                multiplier:1.0
                                                                  constant:30]];

    [self.view  addConstraint:[NSLayoutConstraint constraintWithItem:button1
                                                                 attribute:NSLayoutAttributeBottom
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:button2
                                                                 attribute:NSLayoutAttributeBottom
                                                                multiplier:1.0
                                                                  constant:-30.0]];






    //// Yellow

    /// Left
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:button2
                                                          attribute:NSLayoutAttributeLeading
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeLeft
                                                         multiplier:1.0
                                                           constant:25.0]];

    //Right
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:button2
                                                          attribute:NSLayoutAttributeTrailing
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeRight
                                                         multiplier:1.0
                                                           constant:-50.0]];




    [self.view  addConstraint:[NSLayoutConstraint constraintWithItem:button2
                                                           attribute:NSLayoutAttributeTop
                                                           relatedBy:NSLayoutRelationEqual
                                                              toItem:button1
                                                           attribute:NSLayoutAttributeTop
                                                          multiplier:1.0
                                                            constant:30]];

//    [self.view  addConstraint:[NSLayoutConstraint constraintWithItem:button2
//                                                           attribute:NSLayoutAttributeBottom
//                                                           relatedBy:NSLayoutRelationEqual
//                                                              toItem:self.view
//                                                           attribute:NSLayoutAttributeBottom
//                                                          multiplier:1.0
//                                                            constant:-30.0]];

    [self.view  addConstraint:[NSLayoutConstraint constraintWithItem:button2
                                                                 attribute:NSLayoutAttributeHeight
                                                                 relatedBy:NSLayoutRelationEqual
                                                                    toItem:nil
                                                                 attribute:NSLayoutAttributeNotAnAttribute
                                                                multiplier:1.0
                                                                  constant:100]];
}

我得到了:

Answer 1

常规 View 没有任何固有大小，并且您没有向系统提示 View 应该有多大，因此按钮 1 首先布局，至少有 10 点备用， View 2 结束高 0 点，宽 0 点。

要更正此问题，请确保为两个 View 都提供了一些水平规则，而不仅仅是其中一个 View 。其次，确保让系统了解高度。如果您希望 View 大小相等，则需要告诉系统。为按钮 2 添加另一个水平约束:

constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[button2]-|" options:0 metrics:0 views:viewsDictionary];
[[self view] addConstraints:constraints];

然后为 View 添加高度约束，在这种情况下，通过添加(==button1) 大小信息调整垂直约束以使 View 高度相等:

constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[button1]-10-[button2(==button1)]-|"
                                                      options:0
                                                      metrics:nil
                                                        views:viewsDictionary];

现在您应该看到两个 View ，红色在顶部，黄色在底部，它们占据了相等的垂直空间，它们之间有 10p 的空间，并在容器 View 的每一侧延伸到 20 点。

要手动创建这些相同的约束(我不推荐这样做)，您可以这样做:

UIView* view = [self view]; // for brevity
NSMutableArray* manualConstraints = [NSMutableArray array];
NSLayoutConstraint* b1_top = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
[manualConstraints addObject:b1_top];
NSLayoutConstraint* b1_left = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeLeading multiplier:1 constant:20];
[manualConstraints addObject:b1_left];
NSLayoutConstraint* b1_right = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-20];
[manualConstraints addObject:b1_right];
NSLayoutConstraint* b1_bottom = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:button2 attribute:NSLayoutAttributeTop multiplier:1 constant:-10];
[manualConstraints addObject:b1_bottom];
NSLayoutConstraint* b2_left = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeLeading multiplier:1 constant:20];
[manualConstraints addObject:b2_left];
NSLayoutConstraint* b2_right = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeTrailing relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeTrailing multiplier:1 constant:-20];
[manualConstraints addObject:b2_right];
NSLayoutConstraint* b2_bottom = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:view attribute:NSLayoutAttributeBottom multiplier:1 constant:-20];
[manualConstraints addObject:b2_bottom];
NSLayoutConstraint* b2_height = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];
[manualConstraints addObject:b2_height];
// Add all constraints
[view addConstraints:manualConstraints];