垂直使用自动布局VFL堆栈按钮阵列 [英] Vertically stack an array of buttons using auto layout VFL

问题描述

我正在学习汽车的布局，我想设置一组按钮被垂直堆叠并间隔均匀。我也想被钉在视图底部的按钮。什么是一个很好的方式设置这些限制与VFL？按钮列表将被传递作为UIButtons的阵列

I'm learning auto layout and I'd like to setup a set of buttons to be vertically stacked and evenly spaced. I'd also like the buttons pinned to the bottom of the view. What's a good way to setup these constraints with VFL? The button list will be passed in as an array of 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]

这并没有达到我需要的东西的按钮没有得到固定在视图的底部。

This doesn't achieve what I need as the buttons don't get pinned to the bottom of the view.

推荐答案

你好，这可能会帮助你。

Hi this might help you out

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堆栈按钮阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！