Čo je zarovnanie?

Zarovnanie v iOS vývoji sa týka mechanizmov rozmiestnenia prvkov používateľského rozhrania (UIViews) voči sebe alebo ich kontajneru (superview). Hlavné prístupy k zarovnaniu:

1. Rámy (Frames): Nastavenie pozície a veľkosti (x, y, width, height) každého View v súradnicovom systéme jeho superview. Vhodné pre jednoduché, pevné rozloženia.

   let myView = UIView(frame: CGRect(x: 10, y: 20, width: 100, height: 50))
   // myView bude umiestnený v bode (10, 20) vzhľadom na horný ľavý roh superview.
   

2. Auto Layout: Deklaratívny systém rozmiestnenia prvkov na základe súboru pravidiel (konštraintov), ktoré určujú vzťahy medzi Views. Flexibilný prístup pre adaptívne rozloženia, ktoré sa prispôsobujú rôznym veľkostiam obrazovky a orientáciám.

   • Konštrainty: Pravidlá, ktoré stanovujú obmedzenia na vlastnosti View (napríklad leading, trailing, top, bottom, centerY, centerX, width, height).
   • Priorita konštraintu: Číselná hodnota, ktorá určuje dôležitosť konštraintu pri riešení konfliktov (1-1000).

   Príklad konštraintov s použitím NSLayoutConstraint:

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false // Vypneme Auto Resizing Mask
   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)
   ])
   

   Príklad konštraintov s použitím 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)
   ])
   

   Príklad konštraintov s použitím 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. Autorezizačný mask: Jednoduchý systém zarovnania, ktorý predchádzal Auto Layout. Umožňuje nastaviť, ako sa View má rozťahovať a sťahovať pri zmene veľkosti jeho superview. Menej flexibilný ako Auto Layout a často sa vypína pri použití Auto Layout (translatesAutoresizingMaskIntoConstraints = false).

4. Stack Views (UIStackView v UIKit, VStack/HStack/ZStack v SwiftUI): Kontajnery, ktoré automaticky riadia rozloženie a veľkosť svojich dcérskych View (arrangedSubviews) na základe zadaných vlastností (axis, alignment, distribution, spacing). Uľahčujú tvorbu lineárnych a vrstvených rozložení s automatickým zarovnaním.

   let stackView = UIStackView()
   stackView.axis = .vertical // Os rozloženia: vertikálna
   stackView.alignment = .center // Zarovnanie pozdĺž priečnej osi: na stred
   stackView.distribution = .equalSpacing // Rozdelenie priestoru
   stackView.spacing = 10 // Medzera medzi prvkami
   
   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)
   // Pridanie konštraintov pre samotný stackView, aby sa umiestnil v superview
   

Výber metódy zarovnania závisí od zložitosti rozloženia a požiadaviek na adaptabilitu. Vo väčšine moderných aplikácií je preferované Auto Layout, často v kombinácii so Stack Views.