Auto Layout: що це, адаптивна верстка інтерфейсів iOS

Що таке Auto Layout?

Auto Layout — це адаптивна система верстки Apple, яка використовує математичні обмеження (constraints) для позиціонування UI-елементів. На відміну від фреймової верстки (frame-based layout), де кожен елемент має фіксовані координати x, y, width, height, Auto Layout описує відношення між елементами: «кнопка знаходиться на відстані 8pt від правого краю батька» або «ширина текстового поля дорівнює половині ширини екрану». Механізм заснований на алгоритмі Cassowary, розробленому в University of Washington (Greg J. Badros, 1999) і впровадженому Apple в iOS 6. Cassowary розв'язує систему лінійних нерівностей з пріоритетами — Required (1000), Default High (750), Default Low (250) — що дозволяє керувати конфліктами обмежень. Auto Layout підтримує три типи розмірів: intrinsic (власний розмір елемента, що визначається вмістом), explicit (явно заданий constraint) та compressible/stretchable (гумовий режим через Content Hugging Priority та Compression Resistance Priority).

Intrinsic Content Size та пріоритети

Кожен UI-елемент в Auto Layout має Intrinsic Content Size — природний розмір, що визначається його вмістом. Для UILabel це залежить від тексту та шрифту, для UIImageView — від розмірів зображення. Content Hugging Priority (опір розтягуванню) та Compression Resistance Priority (опір стисненню) керують поведінкою елемента при зміні доступного простору. Стандартні значення: 251 для hugging та 749 для compression resistance. Якщо два елементи конкурують за простір, пріоритет визначає, який з них розтягнеться першим. Розуміння цих пріоритетів — ключ до усунення Ambiguous Layout (неоднозначного розташування), який Xcode підсвічує в налагоджувачі.

Анатомія Constraint

Constraint описується рівнянням: view1.attribute = multiplier × view2.attribute + constant. Атрибути включають leading, trailing, top, bottom, centerX, centerY, width, height, firstBaseline, lastBaseline. Multiplier використовується для пропорційних відношень (ширина view1 = 0.5 × ширина superview). Constant задає фіксований відступ (leading = superview.leading + 16). Інструменти Interface Builder дозволяють задавати constraints візуально через Ctrl-перетягування, але складні макети вимагають програмного створення через NSLayoutConstraint або VFL (Visual Format Language), який Apple рекомендує замінювати на NSLayoutConstraint з iOS 9.

Як працюють Constraints в iOS

Система constraints розв'язується як задача лінійного програмування: Cassowary-алгоритм знаходить оптимальне розташування всіх елементів, що задовольняє всі обмеження з урахуванням їхніх пріоритетів. Якщо constraints суперечать один одному, виникає Unsatisfiable Layout — виняток, який Xcode логує з детальним описом конфлікту. Якщо constraints недостатньо для визначення позиції хоча б одного елемента, виникає Ambiguous Layout — елементи відображаються в довільному положенні. Apple рекомендує мінімальний набір: для кожного елемента повинні бути задані position (x, y) та size (width, height) — явно або через intrinsic content size. Constraints можуть бути першокласними: ведучий елемент (наприклад, superview) та ведений (дочірній view) створюють ієрархію.

Алгоритм Cassowary та пріоритети

Cassowary використовує метод Sequential Quadratic Programming для розв'язання систем лінійних нерівностей. Кожен constraint має пріоритет від 1 до 1000. Required (1000) — обов'язкове обмеження; якщо його не можна виконати, додаток падає з NSConstraintException. Default High (750) — рекомендаційне; Default Low (250) — найменш важливе. При конфлікті Cassowary послаблює обмеження з нижчим пріоритетом. Наприклад, якщо два елементи вимагають фіксованої ширини, а екран занадто вузький, послаблюється constraint з меншим пріоритетом. В Xcode Debug View Hierarchy (інструмент налагодження, доступний з Xcode 6) підсвічуються лише проблеми з Required constraints — решта обробляються без помилки.

UIStackView: автоматичне керування Constraints

UIStackView — контейнер, представлений в iOS 9 (2015), який автоматично створює та керує constraints для вкладених arrangedSubviews. UIStackView підтримує дві осі: горизонтальну та вертикальну. Налаштування distribution визначають розподіл простору: fill (заповнення пропорційно hugging priority), fillEqually (рівні розміри), fillProportionally (пропорційно intrinsic content size), equalSpacing (рівні відступи), equalCentering (рівні відстані між центрами). Alignment задає вирівнювання поперек осі: fill, leading, center, trailing (для горизонтальної) або fill, top, center, bottom (для вертикальної). UIStackView автоматично керує spacing, вирівнюванням за базовою лінією та адаптацією до Dynamic Type.

import UIKit

class StackViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let stack = UIStackView()
        stack.axis = NSLayoutConstraint.Axis.vertical
        stack.distribution = .fillEqually
        stack.spacing = 8
        stack.translatesAutoresizingMaskIntoConstraints = false
        
        let label = UILabel()
        label.text = "Auto Layout Guide"
        label.font = UIFont.preferredFont(forTextStyle: .headline)
        
        let button = UIButton(type: .system)
        button.setTitle("Apply", for: .normal)
        
        stack.addArrangedSubview(label)
        stack.addArrangedSubview(button)
        view.addSubview(stack)
        
        NSLayoutConstraint.activate([
            stack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            stack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            stack.leadingAnchor.constraint(greaterThanOrEqualTo: view.leadingAnchor, constant: 16),
            stack.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor, constant: -16)
        ])
    }
}

Код створює вертикальний UIStackView з двома елементами (UILabel та UIButton), розподіленими рівномірно (fillEqually) з відступом 8pt. Стек центрується по екрану з відступами від країв не менше 16pt. translatesAutoresizingMaskIntoConstraints = false обов'язковий при програмному створенні constraints — без нього Auto Layout не працює. В IT Sectr UIStackView використовується в 80% екранів iOS-проектів для побудови адаптивних форм, списків налаштувань та карток.

Вкладені Stack Views

UIStackView можуть бути вкладеними: горизонтальний стек всередині вертикального — стандартний патерн для складних макетів. Зовнішній стек керує рядками, внутрішній — колонками всередині рядка. Комбінація axis, alignment та distribution на кожному рівні дає практично безмежну гнучкість без єдиного ручного constraint. Apple рекомендує використовувати UIStackView як основний інструмент layout в UIKit, вдаючись до ручних NSLayoutConstraint лише для випадків, не покритих стеком: перекривні view, точне позиціонування по пікселях, кастомна анімація bounds.

NSLayoutConstraint: програмне створення обмежень

NSLayoutConstraint — програмний API для створення окремих обмежень у коді. Кожен constraint створюється через ініціалізатор з параметрами: item, attribute, relatedBy, toItem, attribute, multiplier, constant. З iOS 9 Apple представила Anchor API — більш читабельний синтаксис через властивості view.leadingAnchor, view.trailingAnchor, view.topAnchor, view.bottomAnchor, view.centerXAnchor, view.centerYAnchor, view.widthAnchor, view.heightAnchor. Anchor API автоматично встановлює relatedBy = .equal та використовує First Item/Second Item з Anchor, скорочуючи код на 40% порівняно з класичним NSLayoutConstraint.

import UIKit

class ConstraintViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let childView = UIView()
        childView.backgroundColor = .systemBlue
        childView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(childView)
        
        NSLayoutConstraint.activate([
            childView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 24),
            childView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
            childView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
            childView.heightAnchor.constraint(equalToConstant: 120),
            childView.bottomAnchor.constraint(lessThanOrEqualTo: view.bottomAnchor, constant: -24)
        ])
    }
}

Код позиціонує childView з відступами від safeAreaLayoutGuide (top) та країв екрану (leading/trailing). lessThanOrEqualTo для bottom гарантує, що view не вийде за нижню межу. Anchor API викидає виняток на етапі компіляції, якщо anchors несумісні (наприклад, leadingAnchor змішується з rightAnchor), що запобігає помилкам часу виконання. Apple рекомендує Anchor API як стандарт для програмного Auto Layout починаючи з iOS 9.

Safe Area та Layout Margins в Auto Layout

Safe Area — область екрану, яка не перекривається системними елементами: Dynamic Island, Notch, Status Bar, Home Indicator, закругленими кутами. В iOS 11 Apple замінила topLayoutGuide/bottomLayoutGuide на safeAreaLayoutGuide, який автоматично адаптується під орієнтацію пристрою та наявність вирізу екрану. Layout Margins — внутрішні відступи view за замовчуванням (16pt на iOS, 20pt на iPadOS). Для UILayoutGuide можна задати кастомні directionalLayoutMargins з урахуванням RIGHT-TO-LEFT локалізації. Auto Layout автоматично враховує safe area при використанні safeAreaLayoutGuide в anchors.

Адаптація під Dynamic Island та Notch

На пристроях з Dynamic Island (iPhone 14 Pro та новіше) та Notch (iPhone X–13) Safe Area виключає 44pt зверху в портретній орієнтації (59pt з Dynamic Island в активному стані). Home Indicator додає 34pt знизу. Для коректної адаптації всі top-constraints повинні прив'язуватися до safeAreaLayoutGuide.topAnchor, а не до view.topAnchor. Bottom-constraints — до safeAreaLayoutGuide.bottomAnchor або view.bottomAnchor з запасом на Home Indicator. В IT Sectr ми тестуємо всі екрани на симуляторах iPhone SE (2022), iPhone 14 Pro Max та iPad Pro 12.9″ — трьох пристроях, що покривають всі варіанти safe area.

Типові помилки Auto Layout

Найбільш часті помилки при роботі з Auto Layout: забутий translatesAutoresizingMaskIntoConstraints = false, конфліктуючі Required constraints (пріоритет 1000), Ambiguous Layout (недостатньо constraints для визначення позиції), некоректний Content Hugging Priority для UILabel з багаторядковим текстом та змішування leading/trailing з left/right anchors. Xcode 15+ відображає layout issues в Runtime Issue Navigator та пропонує автоматичні виправлення. Для складних макетів використовуйте Debug View Hierarchy: жовті мітки вказують на ambiguous layout, червоні — на unsatisfiable.