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

时间:2017-02-10 09:11:14

标签: xcode uiscrollview swift3 autolayout nslayoutconstraint

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

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

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

1 个答案:

答案 0 :(得分:1)

您的方法存在两个主要问题:

  1. 使用AutoLayout时,不应手动设置任何帧。 AutoLayout会为您做到这一点,并且在您干涉时不喜欢它。
  2. 使用UIScrollViews和AutoLayout时,不应设置UIScrollView' contentSize。只要正确设置了约束,UIScrollView就会自动调整其contentSize并滚动其内容。
  3. 此外,您并不需要viewBrochures容器视图(除非它作为图像的容器除外)。您只需将上面的2个视图和所有图像添加为UIScrollView的直接子视图。

    要使滚动视图有效,您必须执行以下操作:

    1. 最顶层的子视图必须具有UIScrollView
    2. 的顶部约束
    3. 所有其他子视图必须具有顶部约束,并且上面的子视图具有底部约束
    4. 最底层的子视图必须具有UIScrollView
    5. 的底部约束

      您还必须注意子视图不会变得更宽,滚动视图(或滚动视图突然也会水平滚动)。为此,您必须在其中一个子视图上设置width约束,该约束等于滚动视图的宽度。

      如果你仍然有困难让它工作看看我前面写过的blogpost,我描述了一个与你相似的场景。

      我还用一个工作示例创建了这个gist