Question

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

我添加了视图，我设置了相同的约束，除了这次它们从包装器视图设置到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

Answer 1

实际上这是一个非常好的想法。我总是以这种方式设置我的scrollViews。我通常称视图为 contentView ，但它的想法是一样的。

你快到了。您还没有给出自动布局任何内容来确定 subviewWrapper 的大小。到目前为止，您设置的约束将 subviewWrapper 固定到 scrollView 的内容区域的边缘，但这只是确定了 subviewWrapper < / em>增长，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 中添加了一个黄色的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

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

1 个答案: