Ce este alinierea?

Alinierea în dezvoltarea iOS se referă la mecanismele de plasare a elementelor interfeței utilizatorului (UIViews) relativ unul față de celălalt sau față de containerul lor (superview). Abordările principale:

1. Frames: Stabilirea poziției și dimensiunii (x, y, width, height) a fiecărui View în sistemul de coordonate al superview-ului. Potrivit pentru machete simple, fixe.

   let myView = UIView(frame: CGRect(x: 10, y: 20, width: 100, height: 50))
   // myView va fi plasat în punctul (10, 20) față de colțul din stânga sus al superview-ului.
   

2. Auto Layout: Sistem declarativ pentru plasarea elementelor bazat pe reguli (constraints) care stabilesc relațiile între Views. Abordare flexibilă pentru machete adaptive, care se ajustează la diferite dimensiuni de ecran și orientări.

   • Constraints: Reguli care impun restricții asupra proprietăților View (de exemplu, leading, trailing, top, bottom, centerY, centerX, width, height).
   • Prioritatea constraint-urilor: Valoare numerică care indică importanța unui constraint în rezolvarea conflictelor (1-1000).

   Exemplu de constraints cu 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 cu 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 cu 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: Sistem simplu de aliniere, anterior Auto Layout. Permite stabilirea modului în care View se întinde și se comprimă la schimbarea dimensiunii superview-ului. Mai puțin flexibil decât Auto Layout, deseori dezactivat când se folosește Auto Layout (translatesAutoresizingMaskIntoConstraints = false).

4. Stack Views (UIStackView în UIKit, VStack/HStack/ZStack în SwiftUI): Containere care gestionează automat plasarea și dimensiunea subview-urilor (arrangedSubviews) pe baza proprietăților setate (axis, alignment, distribution, spacing). Simplifică crearea de machete liniare și stratificate cu aliniere automată.

   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)
   // Se adaugă constraints pentru plasarea stackView în superview
   

Alegerea metodei de aliniere depinde de complexitatea machetei și de cerințele de adaptabilitate. În majoritatea aplicațiilor moderne, Auto Layout, adesea combinat cu Stack Views, este preferat.