Qu'est-ce que l'alignement?

L’alignement dans le développement iOS concerne les mécanismes de disposition des éléments de l’interface utilisateur (UIViews) par rapport les uns aux autres ou leur conteneur (superview). Les principales approches sont :

1. Frames : Attribution de la position et de la taille (x, y, width, height) de chaque vue dans le système de coordonnées de sa superview. Convient pour des mises en page simples et fixes.

2. Auto Layout : Système déclaratif de disposition basé sur un ensemble de règles (contraintes) définissant les relations entre les Views. Approche flexible pour des mises en page adaptatives, qui s’ajustent à différentes tailles d’écran et orientations.

   • Contraintes : Règles imposant des limites sur les propriétés d’une View (par exemple, leading, trailing, top, bottom, centerY, centerX, width, height).
   • Priorité de contrainte : Valeur numérique indiquant l’importance d’une contrainte lors de la résolution de conflits (1-1000).

   Exemple avec 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)
   ])
   

   Exemple avec 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)
   ])
   

   Exemple avec 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. Autorisierungsmaske : Ein einfaches Ausrichtungsystem, das vor Auto Layout verwendet wurde. Es ermöglicht, festzulegen, wie eine View beim Ändern der Größe ihrer Superview gedehnt oder gestaucht werden soll. Weniger flexibel als Auto Layout und wird oft deaktiviert, wenn Auto Layout verwendet wird (translatesAutoresizingMaskIntoConstraints = false).

4. Stack Views (UIStackView in UIKit, VStack/HStack/ZStack in SwiftUI): Container, die automatisch die Anordnung und Größe ihrer untergeordneten Views (arrangedSubviews) basierend auf Eigenschaften wie axis, alignment, distribution, spacing verwalten. Erleichtern die Erstellung linearer und verschachtelter Layouts mit automatischer Ausrichtung.

   let stackView = UIStackView()
   stackView.axis = .vertical
   stackView.alignment = .center
   stackView.distribution = .equalSpacing
   stackView.spacing = 10
   
   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 hinzufügen, um den StackView im Superview zu positionieren
   

Le choix de la méthode d’alignement dépend de la complexité du layout et des exigences d’adaptabilité. Dans la plupart des applications modernes, Auto Layout, souvent combiné avec Stack Views, est préféré.