Cos'è l'allineamento?

L'allineamento nello sviluppo iOS si riferisce ai meccanismi di disposizione degli elementi dell'interfaccia utente (UIViews) rispetto tra loro o al loro contenitore (superview). Gli approcci principali sono:

1. Frames: Assegnare la posizione e le dimensioni (x, y, width, height) di ogni vista nel sistema di coordinate del suo superview. Adatto per layout semplici e fissi.

2. Auto Layout: Sistema dichiarativo di disposizione basato su un insieme di regole (constraints) che definiscono le relazioni tra le Views. Approccio flessibile per layout adattivi, che si adattano a diverse dimensioni dello schermo e orientamenti.

   • Constraints: Regole che impongono limiti alle proprietà di una View (ad esempio, leading, trailing, top, bottom, centerY, centerX, width, height).
   • Priorità del constraint: Valore numerico che indica l'importanza del constraint nella risoluzione dei conflitti (1-1000).

   Esempio con 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)
   ])
   

   Esempio con 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)
   ])
   

   Esempio con 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. Maschera di ridimensionamento automatico: Sistema semplice di allineamento che precede Auto Layout. Permette di definire come una View deve espandersi o comprimersi quando cambia la dimensione del suo superview. Meno flessibile di Auto Layout e spesso disattivato quando si usa Auto Layout (translatesAutoresizingMaskIntoConstraints = false).

4. Stack Views (UIStackView in UIKit, VStack/HStack/ZStack in SwiftUI): Contenitori che gestiscono automaticamente la disposizione e le dimensioni delle loro subview (arrangedSubviews) in base a proprietà come axis, alignment, distribution, spacing. Facilitano la creazione di layout lineari e complessi con allineamento automatico.

   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)
   // Aggiungi constraints per posizionare lo stackView nel superview
   

La scelta del metodo di allineamento dipende dalla complessità del layout e dai requisiti di adattabilità. Nella maggior parte delle applicazioni moderne, si preferisce Auto Layout, spesso in combinazione con Stack Views.