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设置为视图的整个宽度，上一行中的格式选项使所有按钮对齐左右边缘。

Answer 2

嗨，这可能会帮助你

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

for (UIButton *button in buttons) {
    [button setTranslatesAutoresizingMaskIntoConstraints:NO];
    // Buttons take up full width
    NSArray *constraints = [NSLayoutConstraint
                            constraintsWithVisualFormat:@"H:|[button]|"
                            options:0
                            metrics:nil
                            views:NSDictionaryOfVariableBindings(button)];
    [allConstraints addObjectsFromArray:constraints];
    if (!previousButton) {
    constraints = [NSLayoutConstraint
                   constraintsWithVisualFormat:@"V:|->=10-[button(65)]"
                   options: 0
                   metrics:nil
                   views:NSDictionaryOfVariableBindings(button)];
                [allConstraints addObjectsFromArray:constraints];
    }
    if (previousButton) {
        NSDictionary *metrics = @{@"padding" : @(10)};

        // Make buttons height
        constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[previousButton]-(20)-[button(65)]"
                                                              options:0
                                                              metrics:metrics
                                                                views:NSDictionaryOfVariableBindings(previousButton, button)];
        [allConstraints addObjectsFromArray:constraints];
    }
    previousButton = button;
}
NSArray *constraints = [NSLayoutConstraint
                        constraintsWithVisualFormat:@"V:[previousButton]-10-|"
                        options:0
                        metrics:nil
                        views:NSDictionaryOfVariableBindings(previousButton)];
[allConstraints addObjectsFromArray:constraints];
[self.view addConstraints:allConstraints]

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

2 个答案: