以编程方式将视图添加到 UIScrollView

ins*_*eof 2 xcode uiscrollview autolayout nslayoutconstraint swift3

我已将以下代码添加到我的 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))

}
Run Code Online (Sandbox Code Playgroud)

并且:

override func viewDidLayoutSubviews() {
    scrlMain.contentSize = viewBrochures.bounds.size
}
Run Code Online (Sandbox Code Playgroud)

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

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

joe*_*ern 5

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

  1. 使用自动布局时,不应手动设置任何框架。AutoLayout 会为您完成此操作,并且不喜欢您干预。
  2. 使用 UIScrollViews 和 AutoLayout 时,不应设置 UIScrollView 的contentSize. 只要你的约束设置正确,UIScrollView 就会自动调整它contentSize并滚动它的内容。

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

要使滚动视图正常工作,您必须执行以下操作:

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

您还必须注意子视图不会变得比滚动视图更宽(否则滚动视图也会突然水平滚动)。为此,您必须width对子视图之一设置等于滚动视图宽度的约束。

如果您仍然遇到困难,请查看我不久前写的这篇博文,其中我描述了与您类似的场景。

我还通过一个工作示例创建了这个要点