xcode - 以编程方式将 View 添加到 UIScrollView

Question

我已将以下代码添加到我的 UIViewController 中:

override func viewDidLoad() {
    super.viewDidLoad()

    viewBrochures.isUserInteractionEnabled = true
    let brochure1: UIImageView = UIImageView(image: UIImage(named: "image1")!)
    brochure1.translatesAutoresizingMaskIntoConstraints = false
    brochure1.contentMode = .scaleAspectFit
    brochure1.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 400)
    viewBrochures.addSubview(brochure1)
    let brochure2: UIImageView = UIImageView(image: UIImage(named: "image2")!)
    brochure2.translatesAutoresizingMaskIntoConstraints = false
    brochure2.contentMode = .scaleAspectFit
    brochure2.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 400)
    viewBrochures.addSubview(brochure2)
    let brochure3: UIImageView = UIImageView(image: UIImage(named: "image3")!)
    brochure3.translatesAutoresizingMaskIntoConstraints = false
    brochure3.contentMode = .scaleAspectFit
    brochure3.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 400)
    viewBrochures.addSubview(brochure3)
    let brochure4: UIImageView = UIImageView(image: UIImage(named: "image4")!)
    brochure4.translatesAutoresizingMaskIntoConstraints = false
    brochure4.contentMode = .scaleAspectFit
    brochure4.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 400)
    viewBrochures.addSubview(brochure4)


    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure1,
                                                attribute: .trailing,
                                                    relatedBy: .equal,
                                                    toItem: viewBrochures,
                                                    attribute: .trailingMargin,
                                                    multiplier: 1,
                                                    constant: 0))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure1,
                                                  attribute: .leading,
                                                  relatedBy: .equal,
                                                  toItem: viewBrochures,
                                                  attribute: .leadingMargin,
                                                  multiplier: 1,
                                                  constant: 0))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure1,
                                                  attribute: .top,
                                                  relatedBy: .equal,
                                                  toItem: viewBottomButtons,
                                                  attribute: .bottom,
                                                  multiplier: 1,
                                                  constant: 10))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure1,
                                                  attribute: .bottom,
                                                  relatedBy: .equal,
                                                  toItem: brochure2,
                                                  attribute: .top,
                                                  multiplier: 1,
                                                  constant: 10))


    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure2,
                                                  attribute: .trailing,
                                                  relatedBy: .equal,
                                                  toItem: viewBrochures,
                                                  attribute: .trailingMargin,
                                                  multiplier: 1,
                                                  constant: 0))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure2,
                                                  attribute: .leading,
                                                  relatedBy: .equal,
                                                  toItem: viewBrochures,
                                                  attribute: .leadingMargin,
                                                  multiplier: 1,
                                                  constant: 0))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure2,
                                                  attribute: .top,
                                                  relatedBy: .equal,
                                                  toItem: brochure1,
                                                  attribute: .bottom,
                                                  multiplier: 1,
                                                  constant: 10))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure2,
                                                  attribute: .bottom,
                                                  relatedBy: .equal,
                                                  toItem: brochure3,
                                                  attribute: .top,
                                                  multiplier: 1,
                                                  constant: 10))


    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure3,
                                                  attribute: .trailing,
                                                  relatedBy: .equal,
                                                  toItem: viewBrochures,
                                                  attribute: .trailingMargin,
                                                  multiplier: 1,
                                                  constant: 0))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure3,
                                                  attribute: .leading,
                                                  relatedBy: .equal,
                                                  toItem: viewBrochures,
                                                  attribute: .leadingMargin,
                                                  multiplier: 1,
                                                  constant: 0))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure3,
                                                  attribute: .top,
                                                  relatedBy: .equal,
                                                  toItem: brochure2,
                                                  attribute: .bottom,
                                                  multiplier: 1,
                                                  constant: 10))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure3,
                                                  attribute: .bottom,
                                                  relatedBy: .equal,
                                                  toItem: brochure4,
                                                  attribute: .top,
                                                  multiplier: 1,
                                                  constant: 10))


    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure4,
                                                  attribute: .trailing,
                                                  relatedBy: .equal,
                                                  toItem: viewBrochures,
                                                  attribute: .trailingMargin,
                                                  multiplier: 1,
                                                  constant: 0))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure4,
                                                  attribute: .leading,
                                                  relatedBy: .equal,
                                                  toItem: viewBrochures,
                                                  attribute: .leadingMargin,
                                                  multiplier: 1,
                                                  constant: 0))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure4,
                                                  attribute: .top,
                                                  relatedBy: .equal,
                                                  toItem: brochure3,
                                                  attribute: .bottom,
                                                  multiplier: 1,
                                                  constant: 10))
    viewBrochures.addConstraint(NSLayoutConstraint(item: brochure4,
                                                  attribute: .bottomMargin,
                                                  relatedBy: .greaterThanOrEqual,
                                                  toItem: viewBrochures,
                                                  attribute: .bottom,
                                                  multiplier: 1,
                                                  constant: 10))

}

还有:

override func viewDidLayoutSubviews() {
    scrlMain.contentSize = viewBrochures.bounds.size
}

请注意，我已经在 Storyboard中设置了 UIScrollView 和容器 View (viewBrochures)，我只需要向容器添加图像，然后能够垂直滚动它们，因为它们不适合屏幕。在 ScrollView 的容器 View 中，我已经有 2 个其他 View 需要位于这些新图像上方(图像需要位于 2 个 View 下方，并且所有 View 一起(2 个 View + 图像)需要在 ScrollView 中一起滚动)。其他 2 个 View 已添加到 Storyboard 中，没有任何问题。正如您所看到的，我已经创建了图像并以编程方式向它们添加了约束。我为每个图像添加了 4 个约束，一个用于前导，一个用于尾随，一个用于顶部，一个用于底部。我将最顶部的图像限制在正上方 View 的底部，将最底部的图像限制在容器 View 的底部，使用greaterThanOrEqual 约束。我还在某处看到，在代码中将图像添加到 ScrollView 时，需要向图像添加“translatesAutoresizingMaskIntoConstraints = false”，但我不确定它到底做什么以及是否需要。

所以这段代码适用于添加图像，但问题是 ScrollView 根本不会滚动。我不确定这是否是正确的方法，所以请随时向我建议任何其他选择。正如您所看到的，我使用了自动布局和布局约束。如果您能看到我的实现是否有任何问题，任何建议和/或更正将不胜感激。

Answer 1

您的方法有两个主要问题:

1. 使用自动布局时，不应手动设置任何框架。 AutoLayout 会为您做这件事，并且不喜欢您干预。
2. 使用 UIScrollViews 和 AutoLayout 时，不应设置 UIScrollView 的 contentSize。只要您的约束设置正确，UIScrollView 就会自动调整其 contentSize 并滚动其内容。

此外，您实际上并不需要 viewBrochures 容器 View (除非它除了作为图像容器之外还执行其他任何操作)。您只需将上述 2 个 View 和所有图像添加为 UIScrollView 的直接 subview 即可。

要使 ScrollView 正常工作，您必须执行以下操作:

1. 最顶层的 subview 必须具有 UIScrollView 的顶部约束
2. 所有其他 subview 必须具有顶部约束以及其上方 subview 的底部约束
3. 最底部的 subview 必须具有 UIScrollView 的底部约束

您还必须注意 subview 不会变得比 ScrollView 更宽(否则 ScrollView 也会突然水平滚动)。为此，您必须在 subview 之一上设置等于 ScrollView 宽度的宽度约束。

如果您仍然遇到困难，请查看此 blogpost我前段时间写过一篇文章，其中描述了与您类似的场景。

我还创建了这个gist并附有一个工作示例。