iOS
UIScrollView AutoLayout

ScrollableController

При использовании Autolayout с UIScrollView он НЕ изменяет размер в зависимости от размера его содержимого или подсмотров.

Чтобы получить автоматическую прокрутку 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) больше нашего экрана. Это приведет к тому, что contentSize ScrollView будет расти, чтобы соответствовать представлениям BOTH, позволяя ему прокручивать по вертикали.

Мы отключили горизонтальную прокрутку с EqualWidth ограничения EqualWidth на contentView и self.view

Размер динамического содержимого UIScrollView с помощью раскадровки

При использовании scrollviews в раскадровке лучше рассчитать размер контента в соответствии с количеством представлений, присутствующим в scrollview, а не указывать размер содержимого программно со статическим значением.

Ниже приведены шаги по динамическому увеличению размера содержимого.

Шаг 1 :

Добавьте Scrollview для просмотра в раскадровке и добавьте основные, конечные, верхние и нижние ограничения (Все значения равны нулю).

Шаг 2 :

Не добавляйте непосредственно виды, которые вам нужны, прямо в scrollview. Сначала добавьте одно представление в scrollview (это будет наш просмотр содержимого для всех элементов интерфейса). Добавьте ниже ограничения на это представление.

1. Ведущие, конечные, верхние и нижние ограничения (Все значения равны нулю).

2. Добавьте равную высоту, равную ширину в Основной вид (т. Е. Содержащий прокрутку). Для равной высоты установите приоритет на низкий. (Это важный шаг для настройки размера контента).

3. Высота этого содержимого будет соответствовать количеству просмотров, добавленных в представление. скажем, если вы добавили последнее представление, это одна метка, а его позиция Y - 420, а высота - 20, тогда ваш контент будет 440.

Шаг 3: добавьте ограничения ко всем представлениям, которые вы добавили в виде содержимого, в соответствии с вашим требованием.