UIStackView 中按钮的按比例调整大小

Question

我需要像这张图片一样布局 5 个按钮：

我需要它们在不同的设备上按比例调整大小。

我在一个方法中有这个代码，它设置了一个带有 5 个按钮的视图。

UIStackView *stackView = [[UIStackView alloc]init];

// Add buttons to stackView (buttons are initialised)
[stackView addArrangedSubview:_button1];
[stackView addArrangedSubview:_button2];
[stackView addArrangedSubview:_button3];
[stackView addArrangedSubview:_button4];
[stackView addArrangedSubview:_button5];

stackView.translatesAutoresizingMaskIntoConstraints = false;
[self.view addSubview:stackView];

stackView.axis = UILayoutConstraintAxisVertical;
stackView.distribution = UIStackViewDistributionFillEqually;
stackView.spacing = 5;

//Layout Constraints for stackView
[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;

// 80% of screen height should be used for buttons
CGFloat screenHeightAvailableForButtons = 80/100;
// Calculate multiplier for height of the buttons (5 buttons)
CGFloat buttonMultiplier = screenHeightAvailableForButtons /5;
// 25% of screen width should be used for buttons
CGFloat screenWidthMultiplier =  25/100;

[_button1.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier].active = true;
[_button1.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;

[_button2.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true;
[_button2.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;

[_button3.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true;
[_button3.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;

[_button4.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true;
[_button4.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;

[_button5.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier: screenWidthMultiplier ].active = true;
[_button5.heightAnchor constraintEqualToAnchor: self.view.heightAnchor multiplier: buttonMultiplier].active = true;

此代码返回一个空白视图。我是不是用错了方法？
我无法弄清楚我做错了什么。我需要在目标 c 中以编程方式完成此操作。

谢谢

Answer 1

对于您的情况，您不需要在堆栈视图中为按钮设置约束。堆栈视图会自动处理。

试试这个

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UIStackView *stackView = [[UIStackView alloc]initWithFrame:self.view.bounds];
    stackView.backgroundColor = [UIColor darkGrayColor];
    _button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    [_button1 setTitle:@"Button 1" forState:UIControlStateNormal];
    _button1.translatesAutoresizingMaskIntoConstraints = NO;
    _button1.backgroundColor = [UIColor lightGrayColor];

    _button2 = [UIButton buttonWithType:UIButtonTypeSystem];
    [_button2 setTitle:@"Button 2" forState:UIControlStateNormal];
    _button2.translatesAutoresizingMaskIntoConstraints = NO;
    _button2.backgroundColor = [UIColor lightGrayColor];

    _button3 = [UIButton buttonWithType:UIButtonTypeSystem];
    [_button3 setTitle:@"Button 3" forState:UIControlStateNormal];
    _button3.translatesAutoresizingMaskIntoConstraints = NO;
    _button3.backgroundColor = [UIColor lightGrayColor];


    _button4 = [UIButton buttonWithType:UIButtonTypeSystem];
    [_button4 setTitle:@"Button 4" forState:UIControlStateNormal];
    _button4.translatesAutoresizingMaskIntoConstraints = NO;
    _button4.backgroundColor = [UIColor lightGrayColor];

    _button5 = [UIButton buttonWithType:UIButtonTypeSystem];
    [_button5 setTitle:@"Button 5" forState:UIControlStateNormal];
    _button5.translatesAutoresizingMaskIntoConstraints = NO;
    _button5.backgroundColor = [UIColor lightGrayColor];

    // Add buttons to stackView (buttons are initialised)
    [stackView addArrangedSubview:_button1];
    [stackView addArrangedSubview:_button2];
    [stackView addArrangedSubview:_button3];
    [stackView addArrangedSubview:_button4];
    [stackView addArrangedSubview:_button5];

    stackView.translatesAutoresizingMaskIntoConstraints = false;
    [self.view addSubview:stackView];

    stackView.axis = UILayoutConstraintAxisVertical;
    stackView.distribution = UIStackViewDistributionFillEqually;
    stackView.alignment = UIStackViewAlignmentFill;
    stackView.spacing = 5;

    //Layout Constraints for stackView
    [stackView.layoutMarginsGuide.topAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.topAnchor].active = true;
    [stackView.layoutMarginsGuide.bottomAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.bottomAnchor].active = true;
    // 25% of screen width should be used for buttons
    [stackView.widthAnchor constraintEqualToAnchor:self.view.widthAnchor multiplier:25.0/100.0].active = true;
    [stackView.layoutMarginsGuide.centerXAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.centerXAnchor].active = true;

}