如何使用自动版式到水平线位置UIButtons（包装，左对齐）？ [英] How to use AutoLayout to position UIButtons in horizontal lines (wrapping, left aligned)?

问题描述

我需要编程在我的应用（iOS 6.0及以上），以创建一对夫妻带着各种宽度UIButtons的。

I need to create a couple of UIButtons with various widths programmatically in my app (iOS 6.0 and above).

我想在一个环绕式显示按钮：从左侧边缘开始，每个按钮应该被彼此相邻水平设置（在一个定义的顺序），如果一个按钮不适合当前线，它应该在previous线下方的左边缘开始新行。

I want to display the buttons in a "wrap around" style: Starting from the left edge, each button should be positioned next to each other horizontally (in a defined order), and if a button does not fit in the current "line", it should start a new line on the left edge below the previous line.

请注意：我不想表/格，因为按钮具有不同的宽度，我想有一个紧挨着​​对方。

Note: I don't want a table/grid, since the buttons have different widths, and I want to have one right next to each other.

我可以手动计算我的code每个按钮的框架，但我应该使用自动版式（以编程方式创建NSLayoutConstraints）呢？我究竟如何，需要设置？

I could manually calculate the frame of each button in my code, but should I use AutoLayout (with programmatically created NSLayoutConstraints) instead? How exactly would I need to set it up?

编辑：通过阅读章iOS 6中通过教程<4中间自动布局后/一>我不知道是否使用纯自动版式可以实现这种环绕功能，我需要。

After reading through Chapter 4 "Intermediate Auto Layout" of "iOS 6 by Tutorials" I am not sure whether using pure AutoLayout could implement this "wrap around" functionality I require.

推荐答案

我目前的解决办法是这样的：没有自动版式，但手动设置正确的约束每个案件（第一个按钮，在一个新行最左边的按钮，其他任何按钮）。

My current solution looks like this: No AutoLayout, but manually setting the correct constraints for each case (first button, leftmost button in a new line, any other button).

（我的猜测是，设置框架为每个按钮，直接会导致更可读code比使用NSLayoutConstraints，反正）

(My guess is that setting the frame for each button directly would result in more readable code than using NSLayoutConstraints, anyway)

NSArray *texts = @[ @"A", @"Short", @"Button", @"Longer Button", @"Very Long Button", @"Short", @"More Button", @"Any Key"];

int indexOfLeftmostButtonOnCurrentLine = 0;
NSMutableArray *buttons = [[NSMutableArray alloc] init];
float runningWidth = 0.0f;
float maxWidth = 300.0f;
float horizontalSpaceBetweenButtons = 10.0f;
float verticalSpaceBetweenButtons = 10.0f;

for (int i=0; i<texts.count; i++) {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button setTitle:[texts objectAtIndex:i] forState:UIControlStateNormal];
    [button sizeToFit];
    button.translatesAutoresizingMaskIntoConstraints = NO;

    [self.view addSubview:button];

    // check if first button or button would exceed maxWidth
    if ((i == 0) || (runningWidth + button.frame.size.width > maxWidth)) {
        // wrap around into next line
        runningWidth = button.frame.size.width;

        if (i== 0) {
            // first button (top left)
            // horizontal position: same as previous leftmost button (on line above)
            NSLayoutConstraint *horizontalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0f constant:horizontalSpaceBetweenButtons];
            [self.view addConstraint:horizontalConstraint];

            // vertical position:
            NSLayoutConstraint *verticalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop              multiplier:1.0f constant:verticalSpaceBetweenButtons];
            [self.view addConstraint:verticalConstraint];


        } else {
            // put it in new line
            UIButton *previousLeftmostButton = [buttons objectAtIndex:indexOfLeftmostButtonOnCurrentLine];

            // horizontal position: same as previous leftmost button (on line above)
            NSLayoutConstraint *horizontalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:previousLeftmostButton attribute:NSLayoutAttributeLeft multiplier:1.0f constant:0.0f];
            [self.view addConstraint:horizontalConstraint];

            // vertical position:
            NSLayoutConstraint *verticalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousLeftmostButton attribute:NSLayoutAttributeBottom multiplier:1.0f constant:verticalSpaceBetweenButtons];
            [self.view addConstraint:verticalConstraint];

            indexOfLeftmostButtonOnCurrentLine = i;
        }
    } else {
        // put it right from previous buttom
        runningWidth += button.frame.size.width + horizontalSpaceBetweenButtons;

        UIButton *previousButton = [buttons objectAtIndex:(i-1)];

        // horizontal position: right from previous button
        NSLayoutConstraint *horizontalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:previousButton attribute:NSLayoutAttributeRight multiplier:1.0f constant:horizontalSpaceBetweenButtons];
        [self.view addConstraint:horizontalConstraint];

        // vertical position same as previous button
        NSLayoutConstraint *verticalConstraint = [NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:previousButton attribute:NSLayoutAttributeTop multiplier:1.0f constant:0.0f];
        [self.view addConstraint:verticalConstraint];
    }

    [buttons addObject:button];
}

这篇关于如何使用自动版式到水平线位置UIButtons（包装，左对齐）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！