Press "Enter" to skip to content

SwiftUI in der Praxis – Teil 7

Konfiguration der Preview

Die in Xcode 11 integrierte Preview ist eines der Highlights bei der Arbeit mit SwiftUI. Sie erlaubt es, direkt innerhalb der IDE eine Vorschau von SwiftUI-Views zu erhalten. Sogar Aktualisierungen an einer View, die nicht die Model-Daten betreffen, spiegeln sich umgehend in der Preview wider.

Was innerhalb der Preview von Xcode dargestellt wird, regeln zum PreviewProvider-Protokoll konforme Typen. Jede über die zugehörige Xcode-Vorlage erstellte SwiftUI-Datei bringt einen solchen Typen mit sich, der im Anschluss an die eigentliche View definiert ist. Der Code eines solchen Preview-Providers sieht beispielsweise wie folgt aus:

Der Name des Preview-Providers (in dem gezeigten Fall ContentView_Previews) kann frei gewählt werden. Wichtig ist, dass jener Typ konform zum PreviewProvider-Protokoll ist. Das bringt eine einzige essenzielle Anforderung mit: eine Type Property namens previews, die eine beliebige View zurück liefert. Das PreviewProvider-Protokoll besitzt in dieser Hinsicht also eine große Ähnlichkeit zum View-Protokoll und dessen body-Property.

Jene View, die man über die previews-Property zurück gibt, ist genau jene, die in der Preview angezeigt wird. Das erlaubt es auch, mehrere Views in der Preview parallel untereinander anzuzeigen. Dazu erstellt man eine Group-Instanz und bringt darin die gewünschten Views unter. Jene Group liefert man dann über die previews-Property zurück:

Preview-Modifier

Die Preview lässt sich aber noch weiter anpassen. Dazu bringt SwiftUI speziell auf die Preview zugeschnittene Modifier mit:

  • previewDevice(_:)
  • previewDisplayName(_:)
  • previewLayout(_:)

Mittels previewDevice(_:) legt man das Gerät fest, in dem eine View in der Preview dargestellt werden soll, beispielsweise „iPhone X“ oder „iPhone SE“. previewDisplayName(_:) versieht die jeweilige View in der Preview mit einem passenden Titel. Das ist gerade bei vielen Views, die innerhalb einer einzigen Preview dargestellt werden, von Vorteil, um so die Übersicht zu wahren.

Über previewLayout(_:) schließlich lässt sich das grundlegende Aussehen der Preview einer View anpassen. Der Standardwert hier ist .device. Alternativ kann man mittels .fixed(width:height:) eine eigene Größe zur Darstellung der View definieren oder via .sizeThatFits die Größe soweit reduzieren, dass die ideal auf die Inhalte und den Aufbau der View zugeschnitten ist. Letzteres ist beispielsweise für Views interessant, die als Zellen in einer Liste fungieren. Deren Vorschau muss schließlich in der Regel nicht in Form eines ganzen Devices erfolgen.

Das folgende Listing zeigt die beispielhafte Anwendung der genannten Preview-Modifier:

Mithilfe der Preview-Modifier lässt sich das Erscheinungsbild der Vorschau anpassen.
Mithilfe der Preview-Modifier lässt sich das Erscheinungsbild der Vorschau anpassen.

Fazit

Die Preview ist nicht nur in ihrer Grundform bereits ungeheuer praktisch. Aufgrund der sehr flexiblen Anpassungsmöglichkeiten (inklusive paralleler Vorschauen für mehrere Views) kann sie den Entwickleralltag enorm erleichtern. Views lassen sich so direkt auf verschiedenen Devices und in unterschiedlichen Größen betrachten, Änderungen werden umgehend in jeder der Vorschauen sichtbar.

Zwar kann es ab und passieren, dass die Preview ein wenig hakt, oftmals reicht es dann aber aus, sie schlicht über die Editor Options aus- und wieder einzublenden.

Apple hat mit der Preview in Xcode 11 eine mächtige neue Funktion eingeführt. Ich bin sehr gespannt, ob und in welcher Form uns diesbezüglich weitere Verbesserungen auf der diesjährigen WWDC erwarten.

Euer Thomas

Bisherige Artikel in dieser Serie

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Impressum

Thomas Sillmann
Kettererstraße 6
D-63739 Aschaffenburg
E-Mail: contact@thomassillmann.de
Mobil: +49 (0) 151 65125650
Web: https://www.thomassillmann.de/

Inhaltlich Verantwortlicher gemäß §55 Abs. 2 RStV: Thomas Sillmann (Anschrift siehe oben)

Haftungshinweis: Trotz sorgfältiger inhaltlicher Kontrolle übernehme ich keine Haftung für die Inhalte externer Links. Für die Inhalte der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.

Kontakt und soziale Netzwerke

Copyright © 2020 · Thomas Sillmann