ios - UIScrollView 如何将充当容器的 subview 约束到所有其他 View ？

Question

正如您将在下面看到的那样，我有一个 ScrollView ，我想将它添加到 UIViewControllers Root View 中。当我将它限制在顶部、右侧、底部和左侧时，我希望看到红色占据整个屏幕。这显然有效，但我想向将包装所有 subview 的 ScrollView 添加一个 subview 。我该怎么做呢？

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

    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

实际上这是一个非常好的想法。我总是这样设置我的 ScrollView 。我通常将 View 称为 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 高度的两倍。 p>

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

---

示例 3:subviewWrapper 的大小由其 subview 设置:

您还可以通过向其添加 subview 来确定您的 subviewWrapper 的大小，这些 subview 的大小已完全指定，并且从 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