Was ist Ausrichtung?

Ausrichtung in der iOS-Entwicklung bezieht sich auf Mechanismen zur Anordnung von UI-Elementen (UIViews) relativ zueinander oder zu ihrem Container (Superview). Die Hauptansätze sind:

1. Frames: Zuweisung von Position und Größe (x, y, width, height) jedes Views im Koordinatensystem seiner Superview. Geeignet für einfache, feste Layouts.

2. Auto Layout: Deklaratives System zur Anordnung basierend auf einer Reihe von Regeln (Constraints), die Beziehungen zwischen Views definieren. Flexibler Ansatz für adaptive Layouts, die sich an verschiedene Bildschirmgrößen und Ausrichtungen anpassen.

   • Constraints: Regeln, die Einschränkungen für Eigenschaften von Views festlegen (z.B. leading, trailing, top, bottom, centerY, centerX, width, height).
   • Priorität der Constraint: Numerischer Wert, der die Wichtigkeit der Constraint bei der Konfliktlösung angibt (1-1000).

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

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

   Beispiel mit 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-Maske: Einfaches Ausrichtungssystem, das vor Auto Layout verwendet wurde. 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 die Anordnung und Größe ihrer untergeordneten Views (arrangedSubviews) automatisch verwalten, basierend auf Eigenschaften wie axis, alignment, distribution, spacing. 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
   

Die Wahl der Methode der Ausrichtung hängt von der Komplexität des Layouts und den Anforderungen an die Anpassungsfähigkeit ab. In den meisten modernen Anwendungen ist Auto Layout, oft in Kombination mit Stack Views, die bevorzugte Methode.