UIScrollView 如何将充当容器的子视图约束到所有其他视图？

Question

如下所示，我有一个滚动视图，我想将它添加到 UIViewControllers 根视图中。当我将它限制在顶部、右侧、底部和左侧时，我希望看到红色占据整个屏幕。这显然有效，但我想在滚动视图中添加一个子视图来包装所有子视图。我该怎么做呢？

我已经添加了视图并设置了相同的约束，但这次它们是从包装视图设置到 UIScrollView 的边界，并且蓝色背景颜色不会显示在任何地方。如果这是一个坏主意，也请随时指出，但我认为我可以将它限制在底部，它会根据需要自动扩展滚动视图内容大小。当我在没有包装器的情况下在滚动视图中拥有所有子视图并且最后一个视图会扩展内容大小时，这似乎可行。

    scrollView = UIScrollView(frame: view.bounds)

    scrollView?.showsVerticalScrollIndicator = true
    scrollView?.backgroundColor = .red

    scrollView?.translatesAutoresizingMaskIntoConstraints = false

    view.addSubview(scrollView!)

    scrollView?.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    scrollView?.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    scrollView?.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
    scrollView?.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true

    //setup wrapper view
    let subviewWrapper = UIView()

    subviewWrapper.translatesAutoresizingMaskIntoConstraints = false

    scrollView?.addSubview(subviewWrapper)

    subviewWrapper.backgroundColor = .blue

    subviewWrapper.topAnchor.constraint(equalTo: (scrollView?.topAnchor)!).isActive = true
    subviewWrapper.leftAnchor.constraint(equalTo: (scrollView?.leftAnchor)!).isActive = true
    subviewWrapper.rightAnchor.constraint(equalTo: (scrollView?.rightAnchor)!).isActive = true
    subviewWrapper.bottomAnchor.constraint(equalTo: (scrollView?.bottomAnchor)!).isActive = true

Answer 1

其实这是一个非常好的想法。我总是以这种方式设置我的滚动视图。我通常把视图称为contentView，其实是同一个思路。

你快到了。你还没有给 Auto Layout 任何东西来确定你的 subviewWrapper 的大小。到目前为止，您设置的约束将 subviewWrapper 固定到 scrollView 内容区域的边缘，但这只是确定了一个事实，即作为 subviewWrapper 增长，scrollView 的内容大小将扩大。目前，您的 subviewWrapper 具有 0 宽度和 0 高度，这就是您看不到蓝色的原因。

以下是 3 个示例，说明如何确定 subviewWrapper 的大小。

注意：以下每个示例都是完全独立的。分别查看每一个，当你尝试它们时，记得删除上一个示例添加的约束。

---

示例 1：将 subviewWrapper 设为 1000 x 1000：

设置约束以使您的 subviewWrapper 1000 x 1000 并且您将看到蓝色并且它会双向滚动。

subviewWrapper.widthAnchor.constraint(equalToConstant: 1000).isActive = true
subviewWrapper.heightAnchor.constraint(equalToConstant: 1000).isActive = true

---

示例 2：仅垂直滚动，内容大小为 scrollView 高度的 2X：

如果您将 subviewWrapper 的宽度设置为等于 scrollView 的宽度，则它只会垂直滚动。如果您将 subviewWrapper 的高度设置为 scrollView 高度的 2 倍，那么您的蓝色区域将是 scrollView 高度的两倍。

subviewWrapper.widthAnchor.constraint(equalTo: scrollView!.widthAnchor, multiplier: 1.0).isActive = true
subviewWrapper.heightAnchor.constraint(equalTo: scrollView!.heightAnchor, multiplier: 2.0).isActive = true

---

示例 3：由其子视图设置的 subviewWrapper 的大小：

您还可以通过添加子视图来确定 subviewWrapper 的大小，这些子视图的大小完全指定并从 subviewWrapper 的顶部到底部以链的形式连接，从一边到另一边。如果您这样做，Auto Layout 将有足够的信息来计算您的 subviewWrapper

的大小

在本例中，我在 subviewWrapper 中添加了一个 600 x 600 的黄色正方形，并将其设置为距离每个边缘 100 个点。在没有为 subviewWrapper 显式设置大小的情况下，Auto Layout 可以确定它是800 x 800。

let yellowSquare = UIView()

yellowSquare.translatesAutoresizingMaskIntoConstraints = false
yellowSquare.backgroundColor = .yellow
subviewWrapper.addSubview(yellowSquare)

yellowSquare.widthAnchor.constraint(equalToConstant: 600).isActive = true
yellowSquare.heightAnchor.constraint(equalToConstant: 600).isActive = true

yellowSquare.topAnchor.constraint(equalTo: subviewWrapper.topAnchor, constant: 100).isActive = true
yellowSquare.leadingAnchor.constraint(equalTo: subviewWrapper.leadingAnchor, constant: 100).isActive = true
yellowSquare.trailingAnchor.constraint(equalTo: subviewWrapper.trailingAnchor, constant: -100).isActive = true
yellowSquare.bottomAnchor.constraint(equalTo: subviewWrapper.bottomAnchor, constant: -100).isActive = true