使用自动布局VFL垂直堆叠一组按钮

Question

我正在学习自动布局,我想设置一组垂直堆叠并均匀分布的按钮.我也喜欢固定在视图底部的按钮.使用VFL设置这些约束的好方法是什么？按钮列表将作为UIButtons数组传入.

NSArray *buttons = [button1, button2, button3, button4, ...]
NSMutableArray *allConstraints = [NSMutableArray array]
UIButton *previousButton;

for (UIButton button in buttons) {
    // Buttons take up full width 
    NSArray *constraints = [NSLayoutConstraint
            constraintsWithVisualFormat:@"H:|[button]|"
                                options:0
                                metrics:nil
                                  views:NSDictionaryOfVariableBindings(button);];
    [allConstraints addObjectsFromArray:constraints];

    constraints = [NSLayoutConstraint
            constraintsWithVisualFormat:@"V:|[button]|"
                                options:0
                                metrics:nil
                                  views:NSDictionaryOfVariableBindings(button);];
    [allConstraints addObjectsFromArray:constraints];

    if (!previousButton) {
        NSDictionary *metrics = @{@"padding" : @(10)};

        // Make buttons height
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[-(padding)-previousButton(==button)]"
                                                              options:0
                                                              metrics:metrics
                                                                views:NSDictionaryOfVariableBindings(previousButton, button)];
        [allConstraints addObjectsFromArray:constraints];
    }
    previousButton = button;
}

[self.view addConstraints:allConstraints]

这不能实现我所需要的,因为按钮没有固定到视图的底部.

Answer 1

我会以一种不同的方式做到这一点.我不是在循环中构建约束,而是在循环中构建格式字符串.

-(void)addButtonsWithConstraints:(NSArray *) buttons {
    NSMutableDictionary *views = [NSMutableDictionary new];
    for (int i = 0; i<buttons.count; i++) {
        [buttons[i] setTranslatesAutoresizingMaskIntoConstraints: NO];
        [self.view addSubview:buttons[i]];
        [views setObject:buttons[i] forKey:[NSString stringWithFormat:@"button%d",i]];
    }

    NSMutableString *formatString = [@"V:" mutableCopy];
    for (int i = 0; i<buttons.count-1; i++) {
        [formatString appendFormat:@"[button%d]-10-", i];
    }
    [formatString appendFormat:@"[button%lu]|", buttons.count - 1]; // pins the last button to the bottom of the view
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:formatString options:NSLayoutFormatAlignAllLeft | NSLayoutFormatAlignAllRight metrics:nil views:views]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[button0]|" options:0 metrics:nil views:views]];
}

最后一行将button0设置为视图的整个宽度,上一行中的格式选项使所有按钮对齐其左右边缘.