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

因此，正如您将在下面看到的那样，我有一个scrollview，我想将其添加到UIViewControllers根视图中。当我将其限制在顶部，右侧，底部和左侧时，我希望看到红色占据整个屏幕。这显然是可行的，但是我想向滚动视图添加一个将包装所有子视图的子视图。我将如何去做？

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

    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

最佳答案

实际上，这是一个非常好的主意。我总是以这种方式设置我的scrollViews。我通常将其称为view contentView，但这是相同的想法。

您快到了。您还没有给自动版式做任何事情来找出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高度的2倍:

如果将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的顶部到底部以及从一侧到另一侧成链状连接，来建立subviewWrapper的大小。如果这样做，“自动版式”将有足够的信息来计算subviewWrapper的大小。

在此示例中，我向subviewWrapper添加了一个600 x 600的黄色正方形，并将其从每个边缘设置为100点。在没有显式设置subviewWrapper的大小的情况下，自动版式可以确定它是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