StackView 中未保持大小约束的按钮答案

【问题标题】：Buttons not maintaining size constraints in StackViewStackView 中未保持大小约束的按钮
【发布时间】：2017-09-26 02:16:45
【问题描述】：

我正在编写实现自定义控件 iOS 教程（我会链接它，但我不能使用两个以上的链接）。

我现在在 StackView 中生成了 5 个按钮。我为每个按钮实现了这些约束：

button.translatesAutoresizingMaskIntoConstraints = false
button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
button.widthAnchor.constraint(equalToConstant: 44.0).isActive = true

我完全按照指定输入了所有代码，但是当我运行应用程序时，按钮垂直和水平填充堆栈视图：

如果我将StackView的alignment属性设置为Top，可以防止按钮垂直拉伸，但最后一个按钮还是水平拉伸：

我尝试了许多不同的方法来防止最后一个按钮被拉伸但无济于事。在控制台中，我看到大小约束被覆盖，但我不知道是什么。

我希望这些按钮在 StackView 中保持指定的高度和宽度 (44)。关于如何做到这一点的任何想法？如果需要，我可以提供更多信息。

【问题讨论】：

你可以尝试删除这个button.translatesAutoresizingMaskIntoConstraints = false吗？
不幸的是我已经尝试过了，它给出了相同的结果。
你的堆栈视图的属性是什么？
希望this 是您想要的。如果不是，请告诉我。
使用Fill Equally 或Fill Proportionally 尝试堆栈视图的Distribution 属性。

标签： ios xcode uistackview

【解决方案1】：

试试这个，它工作正常。

-(void)makeFiveButton {

UIButton *button1 = [[UIButton alloc]init];
button1.backgroundColor = [UIColor greenColor];
UIButton *button2 = [[UIButton alloc]init];
button2.backgroundColor = [UIColor redColor];
UIButton *button3 = [[UIButton alloc]init];
button3.backgroundColor = [UIColor yellowColor];
UIButton *button4 = [[UIButton alloc]init];
button4.backgroundColor = [UIColor purpleColor];
UIButton *button5 = [[UIButton alloc]init];
button5.backgroundColor = [UIColor brownColor];



UIStackView *stackView = [[UIStackView alloc]init];
stackView.axis = UILayoutConstraintAxisHorizontal;
stackView.distribution = UIStackViewDistributionFill;
stackView.alignment = UIStackViewAlignmentFill;
stackView.spacing = 10;


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

button1.translatesAutoresizingMaskIntoConstraints = NO;
button2.translatesAutoresizingMaskIntoConstraints = NO;
button3.translatesAutoresizingMaskIntoConstraints = NO;
button4.translatesAutoresizingMaskIntoConstraints = NO;
button5.translatesAutoresizingMaskIntoConstraints = NO;
stackView.translatesAutoresizingMaskIntoConstraints = NO;


[button1.heightAnchor constraintEqualToConstant:44].active = true;
[button1.widthAnchor constraintEqualToConstant:44].active = true;

[button2.heightAnchor constraintEqualToConstant:44].active = true;
[button2.widthAnchor constraintEqualToConstant:44].active = true;

[button3.heightAnchor constraintEqualToConstant:44].active = true;
[button3.widthAnchor constraintEqualToConstant:44].active = true;

[button4.heightAnchor constraintEqualToConstant:44].active = true;
[button4.widthAnchor constraintEqualToConstant:44].active = true;

[button5.heightAnchor constraintEqualToConstant:44].active = true;
[button5.widthAnchor constraintEqualToConstant:44].active = true;

[stackView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = true;
[stackView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = true;

}

【讨论】：

对不起目标 C。
查看您的代码，除了我没有将堆栈视图本身的 translatesAutoresizingMaskIntoConstraints 属性设置为 false 之外，我的代码是相同的。这解决了调整大小的问题，但使所有按钮都出现在窗口顶部。我必须为窗口中其他元素的堆栈视图间距添加约束，现在它可以完美运行。谢谢！
为异常令人愉悦的 Objective-C 代码点赞。

【解决方案2】：

一切都会好起来的，如果你遵循手册

【讨论】：

这很有帮助。

【解决方案3】：

我遇到了类似的问题，但选择的答案对我不起作用。我能够通过将对齐设置为前导和分布设置为 equalSpacing 来修复它：

private func setupButtons() {
    // My Fix
    self.alignment = .leading
    self.distribution = .equalSpacing

    for _ in 0..<5 {
        let button = UIButton()
        button.backgroundColor = UIColor.red
        button.translatesAutoresizingMaskIntoConstraints = false
        button.heightAnchor.constraint(equalToConstant: 44.0).isActive = true
        button.widthAnchor.constraint(equalToConstant: 44.0).isActive = true
        button.addTarget(self, action: #selector(RatingControl.ratingButtonTapped(button:)), for: .touchUpInside)
        addArrangedSubview(button)
    }
}

或通过 IB：

【讨论】：