如何向放置在 UIStackView 中的以编程方式创建的 UIButton 添加约束

Posted 2023-02-27

【中文标题】如何向放置在 UIStackView 中的以编程方式创建的 UIButton 添加约束

【英文标题】：How do I add constraints to a programmatically created UIButton placed in a UIStackView

【发布时间】：2016-11-02 14:16:37

【问题描述】：

我有一个简单的垂直UIStackView，在第三个子视图中，我想放置我以编程方式创建的UIButton。我可以这样做，但按钮会扩展到子视图的完整宽度和高度，而不是我在代码中设置的大小。我使用情节提要创建了UIStackView，但我以编程方式添加了此按钮，因此我可以更好地控制按钮的外观。

  let doThisButton = UIButton(frame: CGRect(x: 0, y: 0, width: 50, height: 40))
  doThisButton.setTitle("Let's do this.", forState: .Normal)
  doThisButton.setTitleShadowColor(UIColor.blackColor(), forState: .Highlighted)
  doThisButton.translatesAutoresizingMaskIntoConstraints = false
  doThisButton.layer.cornerRadius = 3
  doThisButton.layer.backgroundColor = UIColor(hexString: "b7b7b7").CGColor
  doThisButton.layer.borderWidth = 0

  liftLogStackView.addArrangedSubview(doThisButton)

在 Apple 的文档中，我找到了 UILayoutGuide，这似乎可行，但现在我不这么认为了。我试过这个：

  let container = UILayoutGuide()
  doThisButton.addLayoutGuide(container)

  doThisButton.leadingAnchor.constraintEqualToAnchor(container.leadingAnchor, constant: 8.0).active = true
  doThisButton.trailingAnchor.constraintEqualToAnchor(container.trailingAnchor, constant: 8.0).active = true

  liftLogStackView.addArrangedSubview(doThisButton)
  container.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor).active = true

并没有什么不同。

很多 SO 搜索都没有找到任何特定于我的问题的答案，所以我希望有人能提供帮助。提前致谢。

【参考方案1】：

另一种解决方案是将这个UIButton 打包到UIView 中。然后UIView 将伸出并占据所有需要的位置。 UIButton 将保持您定义的大小。现在您可以根据容器视图定义约束。

我做了一个简短的 Playground 示例：

import UIKit
import PlaygroundSupport

class TestViewController : UIViewController 
    override func viewDidLoad() 
        super.viewDidLoad()

        title = "Test"

        self.view.frame = CGRect(x: 0, y: 0, width: 320, height: 480)
        self.view.backgroundColor = UIColor.brown

        let stackview = UIStackView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))
        stackview.axis = .vertical
        stackview.distribution = UIStackViewDistribution.fillEqually

        let text = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 20))
        text.text = "Hello, i am a label"
        text.backgroundColor = UIColor.green

        let containerView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 100))
        containerView.backgroundColor = UIColor.red
        containerView.addSubview(text)

        stackview.addArrangedSubview(containerView)

        let text2 = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 20))
        text2.text = "Hello, i am another label"
        text2.backgroundColor = UIColor.orange

        stackview.addArrangedSubview(text2)

        self.view.addSubview(stackview)
    


let testController = TestViewController()
PlaygroundPage.current.liveView = testController.view
testController

【讨论】：

感谢@Prine 的帮助。我对这件事还有一个问题，所以如果你有机会看看我刚刚发布的这个新问题 (link)，我将不胜感激。

【参考方案2】：

您需要更改UIStackView 的对齐方式。默认情况下，它设置为子视图将填充垂直于轴的维度。在你的情况下，宽度。

liftLogStackView.alignment = .center

这将适用于UIStackView 中的所有子视图，这可能不是您想要的。在这种情况下，只需将按钮作为子视图添加到另一个 UIView 中，然后将该视图添加到 UIStackView。然后，您的新视图将是全宽的，但您可以将按钮限制为您想要的任何大小。

另外，我建议阅读UIStackView Documentation。那里有很多关于如何设置布局的有用信息。