在視圖控制器寬度上水平均勻分布UIButton的最簡單方法是什么？

Question

我看了很多答案，看起來都很復雜！ 最近我看到了這個答案，雖然我不想把我的按鈕放在視圖中。

我有6個UIButton，它們都是相同的尺寸。 我想將它們均勻地水平分布在我的根視圖控制器的整個寬度和底部。

|                                      |
|                                      |
|  [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

在這個問題中討論了許多不錯的自動布局解決方案：

在容器視圖中均勻分隔多個視圖

基本上它可以是很多手動約束定義代碼，可以方便地包裝在類別擴展中以進行封裝/重用。

Answer 7

我剛剛使用制圖在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到右邊最近的鄰居）。 即使您從縱向更改為橫向，按鈕也會在整個過程中保持相等的間距。