在视图控制器宽度上水平均匀分布UIButton的最简单方法是什么？

Question

我看了很多答案，看起来都很复杂！最近我看this answer虽然我不想把我的按钮放在视图中。

我有6个UIButtons，它们都是相同的尺寸。我想在整个宽度和根视图控制器的底部均匀地水平分隔它们。

|                                      |
|                                      |
|  [b1]  [b2]  [b3]  [b4]  [b5]  [b6]  |
________________________________________

以编程方式实现此目的的最简单方法是什么？

Answer 1

我认为这比接受答案的链接更简单。好的，首先让我们创建一些按钮：

UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
button1.translatesAutoresizingMaskIntoConstraints = NO;
[button1 setTitle:@"Btn1" forState:UIControlStateNormal];

...为6个按钮做6次，但是你喜欢然后将它们添加到视图中：

[self.view addSubview:button1];
[self.view addSubview:button2];
[self.view addSubview:button3];
[self.view addSubview:button4];
[self.view addSubview:button5];
[self.view addSubview:button6];

将一个按钮修复到视图的底部：

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:0]];

然后告诉所有按钮宽度相等，并在宽度上均匀分布：

NSDictionary *views = NSDictionaryOfVariableBindings(button1, button2, button3, button4, button5, button6);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[button1][button2(==button1)][button3(==button1)][button4(==button1)][button5(==button1)][button6(==button1)]|" options:NSLayoutFormatAlignAllBottom metrics:nil views:views]];

结果：

Answer 2

UIStackView是在iOS9中引入的。

https://developer.apple.com/documentation/uikit/uistackview

Answer 3

我知道这个问题有点陈旧，但我已经在iOS上编程了几年了，不喜欢使用autolayout。所以我编写了一个辅助方法来水平均匀地分隔UIButtons并将它们垂直居中在UIView中。这适用于菜单栏。

- (void) evenlySpaceTheseButtonsInThisView : (NSArray *) buttonArray : (UIView *) thisView {
    int widthOfAllButtons = 0;
    for (int i = 0; i < buttonArray.count; i++) {
        UIButton *thisButton = [buttonArray objectAtIndex:i];
        [thisButton setCenter:CGPointMake(0, thisView.frame.size.height / 2.0)];
        widthOfAllButtons = widthOfAllButtons + thisButton.frame.size.width;
    }

    int spaceBetweenButtons = (thisView.frame.size.width - widthOfAllButtons) / (buttonArray.count + 1);

    UIButton *lastButton = nil;
    for (int i = 0; i < buttonArray.count; i++) {
        UIButton *thisButton = [buttonArray objectAtIndex:i];
        if (lastButton == nil) {
            [thisButton setFrame:CGRectMake(spaceBetweenButtons, thisButton.frame.origin.y, thisButton.frame.size.width, thisButton.frame.size.height)];
        } else {
            [thisButton setFrame:CGRectMake(spaceBetweenButtons + lastButton.frame.origin.x + lastButton.frame.size.width, thisButton.frame.origin.y, thisButton.frame.size.width, thisButton.frame.size.height)];
        }

        lastButton = thisButton;
    }
}

只需将此方法复制并粘贴到任何视图控制器中即可。然后，为了访问它，我首先创建了我想要的所有按钮，然后使用数组中的所有按钮调用方法，以及我想要的UIView。

[self evenlySpaceTheseButtonsInThisView:@[menuButton, hierarchyMenuButton, downButton, upButton] :menuView];

此方法的优点是您不需要自动布局，并且它非常容易实现。缺点是，如果您的应用程序在横向和纵向中工作，则需要确保在旋转视图后再次调用此方法。

Answer 4

我通常会这样做：

int numButtons = 6;
float gap = 10.0f;
float y = 50.0f;
float width = (self.view.frame.size.width - gap * (numButtons + 1)) / numButtons;
float height = 60.0f;
for (int n=0;n<numButtons;n++) {
    float x = gap * (n+1) + width * n;
    UIButton *button = [self.buttons objectAtIndex:n]; //Or get button some other way/make button.
    [button setFrame:CGRectMake(x,y,width,height)];
}

您可以将numButtons设置为行中所需的多个按钮，如果您有一个按钮数组，则可以将其设置为该数组的length。

y就是你想要的任何y坐标，高度和间隙也是如此，这是按钮之间的空间。宽度只是根据屏幕宽度和每个按钮之间所需的间隙空间计算每个按钮的宽度。

Answer 5

您可以将标签/按钮/视图作为数组发送到此方法并排列按钮帧。

-(void)arrangeViewsXposition:(NSArray*)anyView y:(CGFloat)y width:(CGFloat)width height:(CGFloat)height mainViewWdith:(UIView*)mainview {
int count = (int)anyView.count;
CGFloat widthTemp = mainview.bounds.size.width, temp1 = widthTemp-(width*count),space = temp1/(count+1);
for (int i = 0; i<count; i++) {
    UIView *btnTemp = (UIView*)[anyView objectAtIndex:i];
    if (btnTemp) {
        btnTemp.frame = CGRectMake(space+((space+width)*i), y, width, height);
    }
}
}

像这样调用这个方法：

[self arrangeViewsXposition:@[btnSave,btnCancel] y:5 width:80 height:30 mainViewWdith:footerView];

Answer 6

在这个问题中讨论了许多不错的自动布局解决方案：

Evenly space multiple views within a container view

基本上它可以是很多手动约束定义代码，可以方便地包装在类别扩展中以进行封装/重用。

Answer 7

我刚刚使用Cartography在Swift中做了这个。

func disributeEvenlyAcrossWithCartography(views: [UIView], enclosingBox: UIView, spacer: CGFloat = 10.0) {
    var priorView = UIView() // never null
    for (index, view) in views.enumerate() {
        constrain(view, priorView, enclosingBox) { view, prior, enclosingBox in
            view.height == enclosingBox.height
            view.centerY == enclosingBox.centerY
            if index == 0 {
                view.width == enclosingBox.width / CGFloat(views.count) - spacer
                view.left == enclosingBox.left
            } else {
                view.left == prior.right + (spacer + spacer / CGFloat(views.count - 1))
                view.width == prior.width
            }
        }
        priorView = view
    }
}

结果有5个视图和一个小间隔：

Answer 8

这是我在Stackoverflow上的第一篇文章。这个网站非常有助于我快速掌握Xcode和swift。无论如何，下面是我对上述问题的快速修复。

分别固定最左侧按钮和最右侧按钮。 在每个按钮之间创建“虚拟”标签。将所有“虚拟”标签设置为相等的宽度。对于每个“虚拟”标签，添加约束（0到左边最近的邻居，0到右边最近的邻居）。即使您从纵向更改为横向，按钮也会在整个过程中保持相等的间距。