添加视图来UIScrollView的编程

Question

我加入以下代码到我的UIViewController：在

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

注意，我安装我的UIScrollView和我的容器视图（viewBrochures）：

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)) 

} 

而且还故事板已经有了，我只需要将图像添加到容器中，然后能够垂直滚动它们，因为它们不适合屏幕。在scrollview的容器视图中，我已经有2个其他视图需要在这些新图像之上（图像需要在2个视图之下，并且所有这些视图一起（2个视图+图像）需要在滚动视图中一起滚动）。这些其他2个视图已经添加到故事板中，没有问题。正如你所看到的，我已经创建了图像并以编程的方式向它们添加了约束。我为每张图片添加了4个约束条件，一个用于引导，一个用于尾随，一个用于顶部，另一个用于底部。最上面的图像被限制在视图底部的上方，而最底层的图像被限制在容器视图的底部，使用了更大的句柄限制。我也在SO上看到，在向代码中的scrollview添加图像时，需要将“translatesAutoresizingMaskIntoConstraints = false”添加到图像，但我不确定它在做什么以及是否需要它。

所以这段代码适用于添加图片，但问题是scrollview根本不会滚动。我不确定这是否是这样做的正确方法，所以请随时向我建议任何其他选项。正如你所看到的，我使用了自动布局和布局约束。如果您能看到我的实施有任何问题，请注意任何建议和/或更正。

Answer 1

有你的方法有两个主要问题：

1. 当使用自动版式的工作，你不应该手动设置任何帧。 AutoLayout可以为您做到这一点，并且在您干涉时不喜欢它。
2. 使用UIScrollViews和AutoLayout时，您不应该设置UIScrollView的contentSize。只要您的约束设置正确，UIScrollView将自动调整它的contentSize并滚动其内容。

此外，你并不真的需要viewBrochures容器视图（除非它是图像的容器除外）。您可以简单地将您的2个以上视图和所有图像添加为UIScrollView的直接子视图。

为了使您的滚动视图的工作，你必须做到以下几点：

1. 最上面的子视图必须有一个顶部约束与UIScrollView的
2. 所有其它子视图必须与底部约束顶约束他们上面
3. 子视图最底部的子视图必须有一个底部约束与UIScrollView的

你还必须要小心，做子视图不会变得更宽，您的滚动视图（或滚动视图会突然滚动水平）。要做到这一点，你必须设置一个width约束的一个子视图等于滚动视图的宽度。

如果你仍然有困难使它的工作看看这个blogpost我写了一段时间之前，我描述了一个类似的情况比你的。