Wat is uitlijning?

Uitlijning in iOS-ontwikkeling verwijst naar mechanismen voor het positioneren van gebruikersinterface-elementen (UIViews) ten opzichte van elkaar of hun container (superview). De belangrijkste benaderingen:

1. Frames: Het instellen van de positie en grootte (x, y, width, height) van elke View in het coördinatensysteem van de superview. Geschikt voor eenvoudige, vaste lay-outs.

   let myView = UIView(frame: CGRect(x: 10, y: 20, width: 100, height: 50))
   // myView wordt geplaatst op (10, 20) ten opzichte van de linkerbovenhoek van de superview.
   

2. Auto Layout: Declaratief systeem voor het positioneren van elementen op basis van regels (constraints) die de relaties tussen Views bepalen. Flexibele aanpak voor responsieve lay-outs die zich aanpassen aan verschillende schermformaten en oriëntaties.

   • Constraints: Regels die beperkingen opleggen aan eigenschappen van View (bijvoorbeeld leading, trailing, top, bottom, centerY, centerX, width, height).
   • Prioriteit van constraints: Numerieke waarde die het belang van een constraint aangeeft bij het oplossen van conflicten (1-1000).

   Voorbeeld van constraints met NSLayoutConstraint:

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false
   superview.addSubview(myView)
   
   NSLayoutConstraint.activate([
       myView.leadingAnchor.constraint(equalTo: superview.leadingAnchor, constant: 20),
       myView.trailingAnchor.constraint(equalTo: superview.trailingAnchor, constant: -20),
       myView.topAnchor.constraint(equalTo: superview.topAnchor, constant: 80),
       myView.heightAnchor.constraint(equalToConstant: 100)
   ])
   

   Constraints met behulp van Layout Anchors:

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false
   superview.addSubview(myView)
   
   NSLayoutConstraint.activate([
       myView.centerXAnchor.constraint(equalTo: superview.centerXAnchor),
       myView.centerYAnchor.constraint(equalTo: superview.centerYAnchor),
       myView.widthAnchor.constraint(equalToConstant: 200),
       myView.heightAnchor.constraint(equalToConstant: 150)
   ])
   

   Constraints met met VFL (Visual Format Language):

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false
   superview.addSubview(myView)
   
   let views: [String: UIView] = ["myView": myView]
   let metrics: [String: CGFloat] = ["margin": 20]
   
   NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "H:|-margin-[myView]-margin-|",
                                                              options: [],
                                                              metrics: metrics,
                                                              views: views))
   NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|-80-[myView(100)]",
                                                              options: [],
                                                              metrics: nil,
                                                              views: views))
   

3. Autoresizing Mask: Eenvoudig uitlijningssysteem dat Auto Layout voorafging. Bepaalt hoe een View uitrekt en samentrekt bij verandering van de grootte van de superview. Minder flexibel dan Auto Layout, vaak uitgeschakeld bij gebruik van Auto Layout (translatesAutoresizingMaskIntoConstraints = false).

4. Stack Views (UIStackView in UIKit, VStack/HStack/ZStack in SwiftUI): Containers die automatisch de positie en grootte van hun subviews (arrangedSubviews) beheren op basis van ingestelde eigenschappen (axis, alignment, distribution, spacing). Vereenvoudigt het maken van lineaire en gelaagde lay-outs met automatische uitlijning.

   let stackView = UIStackView()
   stackView.axis = .vertical // Verticale as
   stackView.alignment = .center // Uitlijning langs de dwarsas: in het midden
   stackView.distribution = .equalSpacing // Verdeling van ruimte
   stackView.spacing = 10 // Afstand tussen elementen
   
   let label = UILabel()
   label.text = "Hello"
   let button = UIButton(type: .system)
   button.setTitle("Tap Me", for: .normal)
   
   stackView.addArrangedSubview(label)
   stackView.addArrangedSubview(button)
   
   superview.addSubview(stackView)
   // Constraints voor stackView om het in de superview te plaatsen
   

De keuze van de uitlijningsmethode hangt af van de complexiteit van het ontwerp en de eisen aan responsiviteit. In de meeste moderne apps wordt Auto Layout, vaak gecombineerd met Stack Views, aanbevolen.