添加視圖來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我寫了一段時間之前，我描述了一個類似的情況比你的。