为按钮提供相等宽度约束时，自动布局设置不正确

Posted 2023-03-15

【中文标题】为按钮提供相等宽度约束时，自动布局设置不正确

【英文标题】：Auto layout not set properly when give equal width constrains to buttons

【发布时间】：2016-10-05 13:30:42

【问题描述】：

我看到了许多解决方案并应用了自动布局约束，但我仍然没有得到想要的解决方案。

当前结果：

给所有按钮的约束：

查看层次结构：

【问题讨论】：

您想要的解决方案是什么？

你能告诉我们你的故事板控制器上是否有警告吗？

@Damien：它没有给出任何警告

@Rajan：希望解决方案与故事板中显示的所有按钮宽度相等

@user2017279 能否显示视图层次结构并显示此设计中所有设备的预览。

【参考方案1】：

假设您想要的是让 3 个按钮彼此相等并使用 Interface Builder 填充屏幕宽度（没有代码，即：不是以编程方式），这是一个解决方案：

您不需要将它们添加到视图中。只需按照以下步骤操作：

让我们从这个开始：

请注意，按钮还没有任何约束，只需将它们添加到视图底部（或者您想要显示它们的任何位置，对于此解决方案，我将它们显示在底部屏幕）。确保它们中的 3 个具有相同的大小。

为橙色按钮添加约束：

添加以下约束： 前导、底部空间和等高。

为蓝色按钮添加约束：

添加以下约束： 尾随、底部空间和等高。

为青色按钮添加约束：

ctrl + 从青色按钮拖动到橙色按钮并添加以下约束：水平间距和垂直居中。

ctrl + 从青色按钮拖动到蓝色按钮并添加以下约束：水平间距。

底部空间和等高。

到目前为止一切顺利，我们几乎完成了！

现在，选择 3 个按钮并添加以下约束：等宽。

您的按钮应如下所示：

现在，您所要做的就是选择两个水平间距约束中的每一个，并将它们的常量设置为 0（来自尺寸检查器）：

你去吧：

我希望这会有所帮助，干杯。

【参考方案2】：

对不起，代码中的解决方案..Swift 3.0：

    let button1 = UIButton()
    let button2 = UIButton()
    let button3 = UIButton()
    let buttons = [button1, button2, button3]
    button1.backgroundColor = .red
    button2.backgroundColor = .blue
    button3.backgroundColor = .green
    buttons.forEach 
        $0.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview($0)
    
    buttons.forEach 
        let cnt1 = NSLayoutConstraint(item: $0, attribute: .centerY, relatedBy: .equal, toItem: view, attribute: .centerY, multiplier: 1, constant: 0)
        let cnt2 = NSLayoutConstraint(item: $0, attribute: .height, relatedBy: .equal, toItem: view, attribute: .height, multiplier: 0.2, constant: 0)
        view.addConstraints([cnt1, cnt2])
    
    let cnt1 = NSLayoutConstraint(item: button1, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: 0)
    let cnt2 = NSLayoutConstraint(item: view, attribute: .trailing, relatedBy: .equal, toItem: button3, attribute: .trailing, multiplier: 1, constant: 0)
    let cnt3 = NSLayoutConstraint(item: button2, attribute: .width, relatedBy: .equal, toItem: button1, attribute: .width, multiplier: 1, constant: 0)
    let cnt4 = NSLayoutConstraint(item: button3, attribute: .width, relatedBy: .equal, toItem: button2, attribute: .width, multiplier: 1, constant: 0)
    let cnt5 = NSLayoutConstraint(item: button2, attribute: .leading, relatedBy: .equal, toItem: button1, attribute: .trailing, multiplier: 1, constant: 0)
    let cnt6 = NSLayoutConstraint(item: button3, attribute: .leading, relatedBy: .equal, toItem: button2, attribute: .trailing, multiplier: 1, constant: 0)
    view.addConstraints([cnt1, cnt2, cnt3, cnt4, cnt5, cnt6])

【参考方案3】：

您是否要在水平方向布置三个高度和宽度相等的按钮？我认为你可以在不使用 UIViews 的情况下实现这一点。我设置了如下约束。

这是一个模拟器截图。