Auto Layout: co to je, adaptivní rozvržení rozhraní iOS

Co je Auto Layout?

Auto Layout — je adaptivní rozvrhovací systém Apple, který používá matematická omezení (constraints) pro umísťování UI prvků. Na rozdíl od rámcového rozvržení (frame-based layout), kde každý prvek má pevné souřadnice x, y, width, height, Auto Layout popisuje vztahy mezi prvky: «tlačítko je 8pt od pravého okraje rodiče» nebo «šířka textového pole je rovna polovině šířky obrazovky». Mechanismus je založen na algoritmu Cassowary, vyvinutém na University of Washington (Greg J. Badros, 1999) a implementovaném Apple v iOS 6. Cassowary řeší systém lineárních nerovností s prioritami — Required (1000), Default High (750), Default Low (250) — což umožňuje správu konfliktů omezení. Auto Layout podporuje tři typy velikostí: intrinsic (přirozená velikost prvku určená obsahem), explicit (explicitně zadané constraint) a compressible/stretchable (elastický režim přes Content Hugging Priority a Compression Resistance Priority).

Intrinsic Content Size a priority

Každý UI prvek v Auto Layout má Intrinsic Content Size — přirozenou velikost určenou svým obsahem. Pro UILabel závisí na textu a písmu, pro UIImageView — na rozměrech obrázku. Content Hugging Priority (odolnost proti natažení) a Compression Resistance Priority (odolnost proti stlačení) řídí chování prvku při změně dostupného prostoru. Standardní hodnoty: 251 pro hugging a 749 pro compression resistance. Pokud dva prvky soutěží o prostor, priorita určuje, který se natáhne jako první. Pochopení těchto priorit je klíčem k odstranění Ambiguous Layout (nejednoznačného rozvržení), které Xcode zvýrazňuje v debuggeru.

Anatomie Constraint

Constraint je popsán rovnicí: view1.attribute = multiplier × view2.attribute + constant. Atributy zahrnují leading, trailing, top, bottom, centerX, centerY, width, height, firstBaseline, lastBaseline. Multiplier se používá pro proporcionální vztahy (šířka view1 = 0.5 × šířka superview). Constant definuje pevný odstup (leading = superview.leading + 16). Nástroje Interface Builder umožňují vizuální nastavení constraints přetažením s Ctrl, ale složitá rozvržení vyžadují programové vytvoření přes NSLayoutConstraint nebo VFL (Visual Format Language), který Apple doporučuje nahradit NSLayoutConstraint od iOS 9.

Jak fungují Constraints v iOS

Systém constraints je řešen jako úloha lineárního programování: Cassowary algoritmus najde optimální umístění všech prvků, splňující všechna omezení s ohledem na jejich priority. Pokud si constraints vzájemně odporují, vzniká Unsatisfiable Layout — výjimka, kterou Xcode loguje s podrobným popisem konfliktu. Pokud constraints nestačí k určení polohy alespoň jednoho prvku, vzniká Ambiguous Layout — prvky se zobrazí v libovolné poloze. Apple doporučuje minimální sadu: pro každý prvek musí být určeny position (x, y) a size (width, height) — explicitně nebo přes intrinsic content size. Constraints mohou být first-class: vedoucí prvek (např. superview) a závislý (podřízený view) vytvářejí hierarchii.

Cassowary algoritmus a priority

Cassowary používá metodu Sequential Quadratic Programming pro řešení systémů lineárních nerovností. Každý constraint má prioritu od 1 do 1000. Required (1000) — povinné omezení; pokud jej nelze splnit, aplikace spadne s NSConstraintException. Default High (750) — doporučené; Default Low (250) — nejméně důležité. Při konfliktu Cassowary uvolňuje omezení s nižší prioritou. Například, pokud dva prvky vyžadují pevnou šířku a obrazovka je příliš úzká, uvolní se constraint s nižší prioritou. V Xcode Debug View Hierarchy (ladičský nástroj dostupný od Xcode 6) zvýrazňuje pouze problémy s Required constraints — ostatní jsou zpracovány bez chyby.

UIStackView: automatická správa Constraints

UIStackView — kontejner představený v iOS 9 (2015), který automaticky vytváří a spravuje constraints pro vnořené arrangedSubviews. UIStackView podporuje dvě osy: horizontal (horizontální rozvržení) a vertical (vertikální). Nastavení distribution určuje rozložení prostoru: fill (vyplnění proporcionálně k hugging priority), fillEqually (stejné velikosti), fillProportionally (proporcionálně k intrinsic content size), equalSpacing (stejné mezery), equalCentering (stejné vzdálenosti mezi středy). Alignment určuje zarovnání napříč osou: fill, leading, center, trailing (pro horizontal) nebo fill, top, center, bottom (pro vertical). UIStackView automaticky spravuje spacing, baseline alignment a přizpůsobení 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 = "Průvodce Auto Layout"
        label.font = UIFont.preferredFont(forTextStyle: .headline)
        
        let button = UIButton(type: .system)
        button.setTitle("Použít", 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)
        ])
    }
}

Kód vytváří vertikální UIStackView se dvěma prvky (UILabel a UIButton), rovnoměrně rozloženými (fillEqually) s odstupem 8pt. Stack je vycentrován na obrazovce s okraji od okrajů alespoň 16pt. translatesAutoresizingMaskIntoConstraints = false je povinný při programovém vytváření constraints — bez něj Auto Layout nefunguje. V IT Sectr je UIStackView používán v 80% obrazovek iOS projektů pro stavbu adaptivních formulářů, seznamů nastavení a karet.

Vnořené Stack View

UIStackView mohou být vnořeny: horizontální stack uvnitř vertikálního — standardní vzor pro složitá rozvržení. Vnější stack spravuje řádky, vnitřní — sloupce uvnitř řádku. Kombinace axis, alignment a distribution na každé úrovni poskytuje prakticky neomezenou flexibilitu bez jediného ručního constraint. Apple doporučuje používat UIStackView jako hlavní nástroj rozvržení v UIKit, přičemž k ručním NSLayoutConstraint se uchyluje pouze pro případy, které stack nepokrývá: překrývající se view, přesné umístění na pixely, vlastní animace bounds.

NSLayoutConstraint: programové vytváření omezení

NSLayoutConstraint — programové API pro vytváření jednotlivých omezení v kódu. Každý constraint je vytvořen přes inicializátor s parametry: item, attribute, relatedBy, toItem, attribute, multiplier, constant. Od iOS 9 Apple představil Anchor API — čitelnější syntaxi přes vlastnosti view.leadingAnchor, view.trailingAnchor, view.topAnchor, view.bottomAnchor, view.centerXAnchor, view.centerYAnchor, view.widthAnchor, view.heightAnchor. Anchor API automaticky nastavuje relatedBy = .equal a používá First Item/Second Item z Anchor, čímž zkracuje kód o 40% ve srovnání s klasickým 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)
        ])
    }
}

Kód umísťuje childView s okraji od safeAreaLayoutGuide (top) a okrajů obrazovky (leading/trailing). lessThanOrEqualTo pro bottom zaručuje, že view nepřekročí spodní hranici. Anchor API vyhazuje výjimku ve fázi kompilace, pokud jsou anchory nekompatibilní (např. leadingAnchor je smíchán s rightAnchor), čímž předchází runtime chybám. Apple doporučuje Anchor API jako standard pro programový Auto Layout od iOS 9.

Safe Area a Layout Margins v Auto Layout

Safe Area — oblast obrazovky nepokrytá systémovými prvky: Dynamic Island, Notch, Status Bar, Home Indicator, zaoblené rohy. V iOS 11 Apple nahradil topLayoutGuide/bottomLayoutGuide safeAreaLayoutGuide, který se automaticky přizpůsobuje orientaci zařízení a přítomnosti výřezu obrazovky. Layout Margins — výchozí vnitřní okraje view (16pt na iOS, 20pt na iPadOS). Pro UILayoutGuide lze nastavit vlastní directionalLayoutMargins s ohledem na RIGHT-TO-LEFT lokalizaci. Auto Layout automaticky zohledňuje safe area při použití safeAreaLayoutGuide v anchorech.

Přizpůsobení Dynamic Island a Notch

Na zařízeních s Dynamic Island (iPhone 14 Pro a novější) a Notch (iPhone X–13) Safe Area vylučuje 44pt shora na výšku (59pt s Dynamic Island v aktivním stavu). Home Indicator přidává 34pt zdola. Pro správné přizpůsobení musí být všechny top-constraints vázány k safeAreaLayoutGuide.topAnchor, nikoli k view.topAnchor. Bottom-constraints — k safeAreaLayoutGuide.bottomAnchor nebo view.bottomAnchor s rezervou pro Home Indicator. V IT Sectr testujeme všechny obrazovky na simulátorech iPhone SE (2022), iPhone 14 Pro Max a iPad Pro 12.9″ — třech zařízeních pokrývajících všechny varianty safe area.

Typické chyby Auto Layout

Nejčastější chyby při práci s Auto Layout: zapomenuté translatesAutoresizingMaskIntoConstraints = false, konfliktní Required constraints (priorita 1000), Ambiguous Layout (nedostatek constraints pro určení polohy), nesprávný Content Hugging Priority pro UILabel s víceřádkovým textem a míchání leading/trailing s left/right anchors. Xcode 15+ zobrazuje problémy rozvržení v Runtime Issue Navigator a nabízí automatické opravy. Pro složitá rozvržení použijte Debug View Hierarchy: žluté štítky označují ambiguous layout, červené — unsatisfiable.