Mi az igazítás?

Az iOS fejlesztésben a igazítás az interfész elemek (UIViews) egymáshoz vagy a konténerükhöz (superview) való elhelyezésének mechanizmusaira utal. A fő megközelítések:

1. Frames: Az egyes View pozíciójának és méretének (x, y, width, height) meghatározása a superview koordináta-rendszerében. Egyszerű, fix elrendezésekhez alkalmas.

   let myView = UIView(frame: CGRect(x: 10, y: 20, width: 100, height: 50))
   // myView a superview bal felső sarkától (10, 20) helyezkedik el.
   

2. Auto Layout: Deklaratív rendszer az elemek elhelyezésére, szabályok (constraints) alapján, amelyek meghatározzák a View-k közötti kapcsolatokat. Rugalmas megközelítés az adaptív elrendezésekhez, amelyek alkalmazkodnak a különböző képernyőméretekhez és orientációkhoz.

   • Constraints: Szabályok, amelyek korlátozásokat állítanak be a View tulajdonságaira (pl. leading, trailing, top, bottom, centerY, centerX, width, height).
   • Constraint priorítás: Számérték, amely megmutatja egy constraint fontosságát konfliktusok megoldásakor (1-1000).

   Constraints példák NSLayoutConstraint használatával:

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

   Layout Anchors használatával:

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

   VFL (Visual Format Language) példák:

   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: Egyszerű igazítási rendszer, amely megelőzte az Auto Layout-ot. Meghatározza, hogy a View hogyan nyúlik vagy zsugorodik a superview méretének változásakor. Kevésbé rugalmas, mint az Auto Layout, és gyakran kikapcsolják, ha Auto Layout-ot használnak (translatesAutoresizingMaskIntoConstraints = false).

4. Stack Views (UIStackView UIKit-ben, VStack/HStack/ZStack SwiftUI-ben): Konténerek, amelyek automatikusan kezelik gyermekeik (arrangedSubviews) elhelyezését és méretét a beállított tulajdonságok (axis, alignment, distribution, spacing) alapján. Egyszerűsítik lineáris és réteges elrendezések létrehozását automatikus igazítással.

   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)
   // Constraint-ek hozzáadása a stackView elhelyezéséhez
   

A helyes elrendezési módszer kiválasztása a maket komplexitásától és az alkalmazkodási igényektől függ. A modern alkalmazásokban az Auto Layout, gyakran Stack Views-szel kombinálva, az ajánlott.