Wat is Auto Layout en hoe verschilt het van lay-out…

Auto Layout is een lay-outsysteem gebaseerd op beperkingen (constraints) dat de positie en grootte van UI-elementen ten opzichte van elkaar en de superview bepaalt.

Verschillen met het gebruik van frames:

Basis: Auto Layout gebruikt een set regels (constraints) om de indeling te bepalen, frames zijn vaste coördinaten en afmetingen.
Aanpasbaarheid: Auto Layout past automatisch de lay-out aan verschillende schermformaten, apparaatoriëntaties en dynamische tekstgroottes aan. Frames vereisen handmatige herberekeningen en updates voor elke situatie.
Flexibiliteit: Het wijzigen van één element in Auto Layout leidt vaak tot een automatische herstructurering van andere elementen volgens de constraints. Bij frames kan elke wijziging handmatige updates van coördinaten en afmetingen vereisen.
Complexiteit: Voor eenvoudige statische interfaces kan layout met frames sneller zijn. Voor complexe, dynamische en adaptieve interfaces is Auto Layout beter onderhoudbaar en minder foutgevoelig.
Opgeloste taken: Auto Layout is ideaal voor het maken van adaptieve interfaces die correct weergegeven moeten worden op verschillende apparaten en bij veranderingen in de omgeving. Frames zijn meer geschikt voor precieze positionering van elementen, wanneer aanpasbaarheid geen prioriteit is of voor zeer eenvoudige, vaste lay-outs.

Voorbeeld van constraints in Auto Layout:

// Een knop maken
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false // Belangrijk voor Auto Layout

// Knop toevoegen aan de view
view.addSubview(button)

// Constraints instellen (horizontaal gecentreerd, 20pt van onder)
NSLayoutConstraint.activate([
    button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20)
])

Voorbeeld van layout met frames:

// Een knop maken
let button = UIButton()

// Frame instellen (horizontaal gecentreerd, 20pt van onder)
let buttonWidth: CGFloat = 100
let buttonHeight: CGFloat = 40
let x = (view.bounds.width - buttonWidth) / 2 // Handmatige X-berekening
let y = view.bounds.height - buttonHeight - 20 // Handmatige Y-berekening

button.frame = CGRect(x: x, y: y, width: buttonWidth, height: buttonHeight)

// Knop toevoegen aan de view
view.addSubview(button)

// Bij verandering van grootte of oriëntatie moet het frame handmatig opnieuw worden berekend

Wat is Auto Layout en hoe verschilt het van lay-out met frames?