Что такое Auto Layout и как использовать constraints?

Auto Layout и Constraints

Что такое Auto Layout

Auto Layout — это система констрейнтов (ограничений), которая позволяет описать расположение и размер элементов UI относительно друг друга и экрана. Это адаптивный подход, работающий на всех размерах экранов.

Основные концепции

View Hierarchy:

Superview (контейнер)
    ↓
Subview (элемент)
    ↓
Constraints (ограничения)

Edges, Anchors, Frame:

• leading/trailing (горизонтальные края)
• top/bottom (вертикальные края)
• centerX/centerY (центр)
• width/height (размеры)

Создание Constraints программно

let label = UILabel()
view.addSubview(label)

// Отключаем autoresizing masks
label.translatesAutoresizingMaskIntoConstraints = false

// Создаём констрейнты через NSLayoutConstraint
NSLayoutConstraint.activate([
    label.topAnchor.constraint(equalTo: view.topAnchor, constant: 20),
    label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
    label.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
    label.heightAnchor.constraint(equalToConstant: 44)
])

Используя NSLayoutConstraint Anchors (предпочтительно)

let button = UIButton()
view.addSubview(button)
button.translatesAutoresizingMaskIntoConstraints = false

NSLayoutConstraint.activate([
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    button.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    button.widthAnchor.constraint(equalToConstant: 200),
    button.heightAnchor.constraint(equalToConstant: 50)
])

Используя Visual Format Language (VFL)

let views = ["label": label, "button": button]
let metrics = ["margin": 16, "spacing": 8]

// Горизонтальные констрейнты
let horizontal = NSLayoutConstraint.constraints(
    withVisualFormat: "H:|-(margin)-[label]-(margin)-|",
    options: [],
    metrics: metrics,
    views: views
)

// Вертикальные констрейнты
let vertical = NSLayoutConstraint.constraints(
    withVisualFormat: "V:|-(margin)-[label]-(spacing)-[button]",
    options: [],
    metrics: metrics,
    views: views
)

NSLayoutConstraint.activate(horizontal + vertical)

Приоритеты констрейнтов

let constraint = label.heightAnchor.constraint(equalToConstant: 50)
constraint.priority = .required  // 1000 (обязательный)
constraint.isActive = true

// Или
let flexibleHeight = label.heightAnchor.constraint(greaterThanOrEqualToConstant: 20)
flexibleHeight.priority = .defaultHigh  // 750
flexibleHeight.isActive = true

Стандартные приоритеты:

• .required = 1000 (обязательный)
• .defaultHigh = 750
• .defaultLow = 250

Типы констрейнтов

// Equal (равенство)
label.widthAnchor.constraint(equalTo: button.widthAnchor)

// Greater than or equal (больше или равно)
label.heightAnchor.constraint(greaterThanOrEqualToConstant: 44)

// Less than or equal (меньше или равно)
label.widthAnchor.constraint(lessThanOrEqualToConstant: 300)

// Multiplier (множитель)
label.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5)

Практический пример: адаптивный layout

class ViewController: UIViewController {
    let imageView = UIImageView()
    let titleLabel = UILabel()
    let descriptionLabel = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupLayout()
    }
    
    func setupLayout() {
        [imageView, titleLabel, descriptionLabel].forEach {
            view.addSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        NSLayoutConstraint.activate([
            // Image View
            imageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            imageView.widthAnchor.constraint(equalToConstant: 200),
            imageView.heightAnchor.constraint(equalToConstant: 200),
            
            // Title Label
            titleLabel.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: 20),
            titleLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            titleLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            
            // Description Label
            descriptionLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 12),
            descriptionLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            descriptionLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            descriptionLabel.bottomAnchor.constraint(lessThanOrEqualTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
        ])
    }
}

Обновление констрейнтов

var heightConstraint: NSLayoutConstraint?

func updateHeight(to newHeight: CGFloat) {
    heightConstraint?.constant = newHeight
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

Safe Area

// Использовать safeAreaLayoutGuide для避免notch
NSLayoutConstraint.activate([
    button.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20),
    button.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20)
])

Ключевые правила

✅ Всегда устанавливай translatesAutoresizingMaskIntoConstraints = false ✅ Используй Anchors — проще, чем Visual Format ✅ Используй Safe Area для notch devices ✅ Используй layoutIfNeeded() для анимации изменений ❌ Не смешивай Auto Layout и frame-based подходы ❌ Не забывай про safeAreaLayoutGuide

Auto Layout — основа для создания адаптивных интерфейсов. Правильное использование констрейнтов обеспечивает корректный вид на всех устройствах.