iOS
UIScrollView AutoLayout

ScrollableController

UIScrollViewでAutolayoutを使用すると、内容やサブビューのサイズに応じて適切にサイズが変更されません。

コンテンツが大きすぎて表示領域に収まらないときにUIScrollViewを自動的にスクロールさせるには、 ContentViewと、 UIScrollViewがそのコンテンツのサイズと親の幅と高さを決定するための制約を追加する必要がありますビュー。

import Foundation
import UIKit

class ScrollableController : UIViewController {
    
    private var scrollView: UIScrollView!
    private var contentView: UIView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //Setup
        self.initControls()
        self.setTheme()
        self.layoutScrollView()
        self.layoutContentView()
        
        //Add child views
        self.addChildViews()
    }
    
    func initControls() {
        self.scrollView = UIScrollView()
        self.contentView = UIView()
    }
    
    func setTheme() {
        self.scrollView.backgroundColor = UIColor.blue()
        self.contentView.backgroundColor = UIColor.orange()
    }
    
    func layoutScrollView() {
        self.view.addSubview(self.scrollView)
        
        let views: NSDictionary = ["scrollView": self.scrollView]
        var constraints = Array<String>()
        
        //Constrain the scrollView to our controller's self.view.
        constraints.append("H:|-0-[scrollView]-0-|")
        constraints.append("V:|-0-[scrollView]-0-|")
        
        for constraint in constraints {
            self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        self.scrollView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func layoutContentView() {
        self.scrollView.addSubview(self.contentView)
        
        let views: NSDictionary = ["contentView": self.contentView, "view": self.view]
        var constraints = Array<String>()
        
        //Constrain the contentView to the scrollView.
        constraints.append("H:|-0-[contentView]-0-|")
        constraints.append("V:|-0-[contentView]-0-|")
        
        for constraint in constraints {
            self.scrollView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        //Disable Horizontal Scrolling by making the contentView EqualWidth with our controller's self.view (ScrollView's parentView).
        self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:[contentView(==view)]", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        
        self.contentView.translatesAutoresizingMaskIntoConstraints = false
    }
    
    func addChildViews() {
        //Init
        let greenView = UIView()
        let whiteView = UIView()
        
        //Theme
        greenView.backgroundColor = UIColor.green()
        whiteView.backgroundColor = UIColor.orange()
        
        //Layout -- Child views are added to the 'ContentView'
        self.contentView.addSubview(greenView)
        self.contentView.addSubview(whiteView)
        
        let views: NSDictionary = ["greenView": greenView, "whiteView": whiteView];
        var constraints = Array<String>()
        
        //Constrain the greenView to the contentView with a height of 400 and 15 spacing all around.
        constraints.append("H:|-15-[greenView]-15-|")
        constraints.append("V:|-15-[greenView(400)]")
        
        //Constrain the whiteView below the greenView with 15 spacing all around and a height of 500.
        constraints.append("H:|-15-[whiteView]-15-|")
        constraints.append("V:[greenView]-15-[whiteView(500)]-15-|")
        
        for constraint in constraints {
            self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: constraint, options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views as! [String : AnyObject]))
        }
        
        greenView.translatesAutoresizingMaskIntoConstraints = false
        whiteView.translatesAutoresizingMaskIntoConstraints = false
    }
}

これで、greenView（高さ400）+ whiteView（高さ500）が画面よりも大きくなっていることがわかりました。これにより、ScrollViewのcontentSizeが両方のビューに収まるようになり、垂直方向にスクロールできます。

contentViewとself.view EqualWidth制約を使用して水平スクロールを無効にしself.view

ストーリーボードによるUIScrollViewの動的コンテンツサイズ

ストーリーボードでスクロールビューを使用している間は、スクロールビューに表示されるビューの数に応じてコンテンツサイズを計算する方が、プログラムで静的な値を指定するよりも優れています。

コンテンツサイズを動的に取得する手順は次のとおりです。

ステップ1 ：

ストーリーボードで表示するスクロールビューを追加し、先頭、末尾、上端、下端の制約を追加します（すべての値はゼロです）。

ステップ2 ：

直接スクロールビューに必要なビューを直接追加しないでください。まず、スクロールビューに1つのビューを追加します（これはすべてのUI要素のコンテンツビューになります）。このビューに以下の制約を追加します。

1. 先頭、末尾、上端および下端の制約（すべての値はゼロ）。

2. 同じ高さ、同じ幅をメインビューに追加します（つまり、スクロールビューを含みます）。同じ高さの場合、優先順位を低く設定します。 （これはコンテンツサイズを設定するための重要なステップです）。

3. このコンテンツビューの高さは、ビューに追加されたビューの数に応じて決まります。最後のビューを1つのラベルに追加し、Yの位置が420で高さが20の場合、コンテンツビューは440になります。

ステップ3：要件に応じてコンテンツビュー内に追加したすべてのビューに制約を追加します。