Seite 2: Views gruppieren

Inhaltsverzeichnis

Im bisher gezeigten Beispiel wurde ein einfaches Label erstellt. In den meisten Fällen setzen sich Views aber aus mehreren verschiedenen Elementen zusammen, die man miteinander gruppiert. In SwiftUI setzen Entwickler eine solche Gruppierung mit Stacks um. Die gibt es in drei Ausführungen: als V-, H- und Z-Stack. Ein V-Stack ordnet Views vertikal an, ein H-Stack horizontal. Mit einem Z-Stack legt man Views hintereinander ab und stapelt sie so aufeinander (ideal beispielsweise, um einen Text über eine im Hintergrund befindliche Grafik zu legen).

Um einen der genannten Stacks in SwiftUI zu erzeugen, nutzt man die zugehörigen Typen: VStack, HStack oder ZStack. Sie erwarten beim Erstellen neuer Instanzen ein Closure als Parameter. Darin werden alle Views untergebracht, die Teil des jeweiligen Stacks sind. Hierbei ist auch eine Verschachtelung von Stacks möglich. Beispielsweise kann ein H-Stack einen V-Stack als View enthalten und umgekehrt.

Das folgende Codebeispiel demonstriert den Einsatz der genannten Stacks und stellt zugleich ein weiteres View-Element aus dem SwiftUI-Framework vor: Image. Wie der Name andeutet, lassen sich damit Bilder in Ansichten einbetten. Dazu können Entwickler sowohl auf Bilder innerhalb von Asset Catalogs als auch auf die Grafiken der SF-Symbols-Bibliothek zugreifen. Um letztere zu verwenden, kommt der Initializer init(systemName:) zum Einsatz, der die Bezeichnung des gewünschten SF-Symbols als Parameter entgegennimmt.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello world")
            HStack {
                Text("Text with image:")
                Image(systemName: "house.fill")
            }
            Image("Graz")
        }
    }
}

Das Ergebnis des Codebeispiels ist in der Preview in Abbildung 2 zu sehen. Der Aufbau ist wie folgt: Herzstück der View ist ein V-Stack, der über insgesamt drei Views verfügt, die untereinander angeordnet werden. An oberster Stelle befindet sich ein Text, am Ende wird ein Bild angezeigt. Dazwischen kommt ein H-Stack zum Einsatz, der einen Text und eine Grafik aus der SF-Symbols-Bibliothek nebeneinander darstellt.

Beim Erstellen von Views in SwiftUI spielen Stacks eine essenzielle Rolle. Durch sie gruppiert man mehrere Views miteinander und ordnet sie auf die gewünschte Art und Weise an.

View-Modifikationen

Alle eingesetzten Views haben ihre Konfigurtionen bei ihrer Initialisierung erhalten. Stacks wurden hierbei die zugehörigen Ansichten übergeben, während Text- und Image-Elemente die passenden Inhalte erhielten. Um Views in SwiftUI aber weiter anzupassen – beispielsweise zum Festlegen einerTextgröße oder -farbe –, gibt es die sogenannten Modifier. Das sind Methode, die bestimmte Anpassungen an einer View durchführen. Als Ergebnis liefert ein Modifier eine neue View zurück, die die gewünschten Modifikationen enthält.

Das SwiftUI-Framework enthält eine Vielzahl solcher Modifier. Welche es konkret für einen bestimmten Typ wie Text oder Image gibt, lässt sich anhand der Dokumentation ermitteln. Beispielhaft präsentiert der Artikel eine kleine Auswahl der verfügbaren Modifier. Betrachtet sei zunächst das Text-Element. Die folgende Liste gibt einen kleinen Überblick, welche Anpassungsmöglichkeiten unter anderem dank der verfügbaren Modifier zur Verfügung stehen:

• Ändern der Textfarbe: foregroundColor(_:)
• Ändern der Schriftstärke: fontWeight(_:)
• Ändern der Schriftformatierung (als Titel, Untertitel etc.): font(_:)
• fett: bold()
• kursiv: italic()
• unterstrichen: underline()

Um eine der Anpassungen an einer Text-Instanz vorzunehmen, ruft man den gewünschten Modifier schlicht darauf auf. Um mehrere Änderungen auf einmal durchzuführen, reiht man alle zugehörigen Modifier aneinander. Möchte man so beispielsweise einen Text fett formatieren und kursiv setzen, führt man den folgenden Befehl aus:

Text("Hello world").bold().italic()

Bei der Arbeit mit SwiftUI setzt man jeden Modifier typischerweise in eine neue Zeile und rückt ihn ein. Das sorgt für eine bessere Übersichtlichkeit (dazu gleich mehr). Ein vollständiges Beispiel des Einsatzes mehrerer Modifier finden Entwickler im folgenden Codestück. Dort gibt es neben den genannten Methoden zur Anpassung von Text-Instanzen Modifier für die Konfiguration von Bildern. So kann man deren Größe durch den Aufruf von resizable() anpassen und den gewünschten Frame mit frame(width:height:alignment:) setzen. Um die Ecken von Grafiken abzurunden, nutzt man die Methode cornerRadius(_:).

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello world")
                .foregroundColor(.blue)
                .font(.largeTitle)
                .fontWeight(.heavy)
                .underline()
            HStack {
                Text("Text with image:")
                    .italic()
                Image(systemName: "house.fill")
                    .resizable()
                    .foregroundColor(.green)
                    .frame(width: 50, height: 50)
            }
            Image("Graz")
                .cornerRadius(10.0)
        }
    }
}