带有 UIView 的 StackView 约束答案

【问题标题】：StackView constraints with UIViews带有 UIView 的 StackView 约束
【发布时间】：2020-10-25 09:22:12
【问题描述】：

我正在尝试在屏幕中间设置一个堆栈视图，左右填充为 20。在里面，我想放置两个自定义 UIViews，但我不知道该怎么做。我尝试给 UIViews 各自的高度和宽度，但我什么也没得到。

我相信堆栈视图具有所有正确的约束。代码如下：

func setupTeamViews() {
    view.addSubview(teamsStackView)
    
    teamsStackView.distribution = .fill
    teamsStackView.axis = .vertical
    teamsStackView.spacing = 20
    teamsStackView.alignment = .fill
    
    NSLayoutConstraint.activate([
        teamsStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
        teamsStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
        teamsStackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        teamsStackView.heightAnchor.constraint(equalToConstant: 420)
    ])
    
    let height = CGFloat((teamsStackView.frame.height / 2) - 20)
    let width = CGFloat((teamsStackView.frame.width - 20))
    
    firstTeamView = ATTeamView(width: width, height: height)
    firstTeamView.changeColor(color: .lightBlue)
    firstTeamView.setTeamName(name: "Tobias")
    firstTeamView.setNewPoints(points: "0")
    
    secondTeamView = ATTeamView(width: width, height: height)
    secondTeamView.changeColor(color: .white)
    secondTeamView.setTeamName(name: "Valen")
    secondTeamView.setNewPoints(points: "0")
    
    teamsStackView.addArrangedSubview(firstTeamView)
    teamsStackView.addArrangedSubview(secondTeamView)
}

stackview 如何与 UIview 一起使用？据我了解，UIView 没有 intrinsicContentSize，但我不知道如何处理。

【问题讨论】：

如果你在 stackview 中添加 UIViews，你需要在属性检查器中检查分布属性。 Stackview 负责子视图的宽度和高度
理想情况下，您不需要提供子视图的宽度和高度限制。
如果您希望您的 chid 视图在由堆栈排列时具有特定大小，您可以子类化 UIView（或 UIView 的任何子类）并覆盖 intrinsicContentSize，返回它想要的大小（可能只是返回当前界限，如果那是您所追求的）。然后就让stack view安排好了。

标签： ios swift xcode uiview uistackview

【解决方案1】：

我的代码不起作用，因为我忘记设置 teamsStackView.translatesAutoresizingMaskIntoConstraints = false

【讨论】：

【解决方案2】：

您可以添加两个容器视图，而不是以编程方式将它们附加到视图控制器，然后使用 alpha 激活它们。

这将使约束更容易，您仍然可以编写任何您想要的额外内容

myView1.alpha = 1 // activate
myView2.alpha = 0 // deactivate

【讨论】：