swift - 嵌套堆栈 View : Child Stack View is not inside its parent stack view when attaching it programmatically

Question

我正在尝试实现嵌套堆栈 View ，其中一个堆栈 View 位于另一个堆栈 View 内。我的代码基于 here .我当前的代码在下面。

@IBOutlet weak var verticalStackView: UIStackView!
let blueImageView = UIImageView()
blueImageView.backgroundColor = UIColor.blueColor()
blueImageView.image = UIImage(named: "just some image")
blueImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let greenImageView = UIImageView()
greenImageView.backgroundColor = UIColor.greenColor()
greenImageView.image = UIImage(named: "just some image")
// This is just from SnapKit
greenImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let stackView = UIStackView()
stackView.axis = UILayoutConstraintAxis.Horizontal
stackView.distribution = UIStackViewDistribution.EqualSpacing
stackView.alignment = UIStackViewAlignment.Center
stackView.spacing = 16.0
stackView.addArrangedSubview(blueImageView)
stackView.addArrangedSubview(greenImageView)
stackView.translatesAutoresizingMaskIntoConstraints = false;
// This is just from SnapKit
verticalStackView.snp_makeConstraints { (make) in
  make.height.equalTo(70)
}
verticalStackView.addSubview(stackView)

当我尝试运行时，它看起来是这样的。

如您所见，子堆栈 View stackView 在层次结构中位于父堆栈 View (verticalStackView) 之下。但是定位不对。

我对 Swift、AutoLayout 和 StackViews 还很陌生。任何人都可以帮助指出我在这里缺少什么吗？

谢谢!

Answer 1

所以我在阅读之后找到了解决方案..

@IBOutlet weak var verticalStackView: UIStackView!
let blueImageView = UIImageView()
blueImageView.backgroundColor = UIColor.blueColor()
blueImageView.image = UIImage(named: "buttonFollowCheckGreen")
blueImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let greenImageView = UIImageView()
greenImageView.backgroundColor = UIColor.greenColor()
greenImageView.image = UIImage(named: "buttonFollowCheckGreen")
greenImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

let firstLineStackView = UIStackView()
firstLineStackView.axis = UILayoutConstraintAxis.Horizontal
firstLineStackView.distribution = UIStackViewDistribution.Fill
firstLineStackView.alignment = UIStackViewAlignment.Center
firstLineStackView.spacing = 8.0

firstLineStackView.addArrangedSubview(blueImageView)
firstLineStackView.addArrangedSubview(greenImageView)
firstLineStackView.translatesAutoresizingMaskIntoConstraints = false;

let redImageView = UIImageView()
redImageView.backgroundColor = UIColor.redColor()
redImageView.image = UIImage(named: "buttonFollowCheckGreen")
redImageView.snp_makeConstraints { (make) in
  make.height.width.equalTo(34)
}

verticalStackView.addArrangedSubview(firstLineStackView)

我只需要使用 addArrangedSubview而不是 addSubview让自动布局完成剩下的工作。只是为了修复 ImageView 的位置和大小，我还修改了 alignment来自 fill 的 verticalStackView至 leading .