UIScrollView 内的嵌套 UIStackViews:未填充容器的宽度?

Question

我正在尝试使用UIScrollView内的嵌套UIStackView以编程方式创建一个 3x33 的UIButton网格。外UIStackView有垂直轴，而内UIStackView有水平轴和distribution = .fillEqually。

如果我没有封闭UIScrollView，按钮可以正确填充屏幕的宽度。但是，在滚动视图中，按钮仅占屏幕宽度的一半。

下面是一个代码示例。在 IB 中，ViewController的view属性已设置为UIScrollView实例。

class ViewController: UIViewController {
var stackView: UIStackView!
override func viewDidLoad() {
super.viewDidLoad()
title = "No Filling :("
stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .vertical
stackView.spacing = 5
view.addSubview(stackView)
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-[stackView]-|", options: .alignAllCenterX, metrics: nil, views: ["stackView": stackView!]))
view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[stackView]|", options: .alignAllCenterY, metrics: nil, views: ["stackView": stackView!]))
for _ in 1...33 {
let hView = UIStackView()
hView.translatesAutoresizingMaskIntoConstraints = false
hView.axis = .horizontal
hView.distribution = .fillEqually
hView.spacing = 5
stackView.addArrangedSubview(hView)
stackView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[hView]|", options: .alignAllCenterX, metrics: nil, views: ["hView": hView]))
for i in 1...3 {
let button = UIButton(type: .system)
button.setTitle("Button (i)", for: .normal)
hView.addArrangedSubview(button)
button.layer.borderWidth = 1
button.layer.cornerRadius = 7
}
}
}
}

Answer 1

您希望 scrollView 的内容宽度是 scrollView 本身的宽度，以便它填充屏幕并垂直滚动。

为此，您需要确定滚动视图内容的宽度。 现在，它的宽度来自三个按钮的固有尺寸。

您需要添加一个约束，明确使滚动视图的内容(堆栈视图 + 左右偏移量(等于滚动视图的宽度：

view.addConstraints(NSLayoutConstraint.constraints(
withVisualFormat: "H:|-20-[stackView]-20-|", options: .alignAllCenterX,
metrics: nil, views: ["stackView": stackView!]))
view.addConstraints(NSLayoutConstraint.constraints(
withVisualFormat: "V:|[stackView]|", options: .alignAllCenterY,
metrics: nil, views: ["stackView": stackView!]))
stackView.widthAnchor.constraint(equalTo: view.widthAnchor, constant: -40).isActive = true

注意：调整constant-40是左偏移和右偏移量的总和(各20(。 为了使 scrollView 不水平滚动：stackView.width + 20 + 20 == scrollView.width或等效地，stackView.width == scrollView.width - 40约束指定的内容。