Press "Enter" to skip to content

SwiftUI im Detail

SwiftUI war das Highlight der WWDC 2019 und eine der spannendsten neuen Technologien der letzten Jahre. Dieses Let’s Code stellt das neue UI-Framework von Apple im Detail vor und zeigt euch, wie ihr damit arbeitet und wie es funktioniert.

Inhaltsverzeichnis

#01: Erstellen eines SwiftUI-Projekts

SwiftUI ist Apples neues großes Framework zur plattformübergreifenden Erstellung von Benutzeroberflächen. In dieser neuen Let’s Code-Reihe stelle ich euch SwiftUI im Detail vor, beginnend mit der Erstellung eines neuen Xcode-Projekts, das SwiftUI als Basis besitzt. Außerdem werfen wir einen Blick darauf, wie man neue SwiftUI-Views in Xcode erstellt.

#02: Aufbau von SwiftUI-Views

Views in SwiftUI besitzen bestimmte Merkmale, die wir immer beachten müssen. Dieses Video zeigt euch, wie SwiftUI-Views aufgebaut sind und aus welchen Bestandteilen sie bestehen. Darauf aufbauend können wir im Anschluss beginnen, eigene SwiftUI-Views zu kreieren.

#03: Text, Image und Preview

In diesem Video lernen wir neben dem Text- auch das in SwiftUI enthaltene Image-Element kennen. Außerdem werfen wir einen ersten detaillierten Blick auf die in Xcode 11 integrierte mächtige Preview-Funktion.

#04: Stacks

Stacks sind ein zentrales Element in SwiftUI um Views vertikal, horizontal und hintereinander anzuordnen. In dieser Lesson zeige ich euch, wie Stacks funktionieren und wir ihr sie effizient in Xcode 11 nutzt.

#05: Modifier

Mithilfe von Modifiern passt man das Verhalten und Aussehen von Views in SwiftUI an. Dieses Video gibt eine entsprechende Einführung und stellt einige erste Modifier für Text und Image vor.

#06: List-View erstellen

Die List-View ist eines der mächtigsten View-Elemente in SwiftUI. Dieses Video gibt eine erste Einführung in die grundlegende Erstellung von Listen.

#07: Statische und dynamische List-View

In diesem Video stelle ich euch das List-Element aus dem SwiftUI-Framework weiter vor. Speziell geht es um die Erstellung von statischen als auch dynamischen Listen und wie die sich voneinander unterscheiden. Zu guter Letzt betrachten wir euch die Erstellung einer gemischten List-View mit statischen als auch dynamisch generierten Zellen.

#08: Navigation-View und Navigation-Link

NavigationView und NavigationLink sind zwei essenzielle Bestandteile, um eine grundlegende Navigationsstruktur in SwiftUI umzusetzen. Dieses Video stellt beide Elemente in der Praxis vor und erläutert ihre Funktionsweise.

#09: Navigation-Bar-Title setzen

Mithilfe eines Modifiers lässt sich der Titel einer Navigation-Bar festlegen. Außerdem stellt das Video ein Best Practice vor, um jenen Navigation-Bar-Title auch innerhalb der Preview sichtbar zu machen.

#10: Erstellen einer Tab-View

Neben der NavigationView gehört die TabView zu den grundlegendsten Navigationselementen in SwiftUI. In dieser Lesson erfahrt ihr, wie ihr eine solche TabView erstellt und wie sie grundlegend funktioniert.

#11: Tab-Bar-Items anpassen

Tab-Bar-Items in SwiftUI zu modifizieren ist nicht besonders kompliziert. Dieses Video stellt das entsprechende Vorgehen kurz vor und geht auf einige wichtige Besonderheiten ein.

#12: Status – Property

Der Status von Views spielt in SwiftUI eine essenzielle Rolle. In diesem Video werfen wir einen ersten Blick auf diese Mechanik und behandeln die erste Form eines Status: die Property.

#13: Status – @State

Mithilfe des @State-Property Wrappers ergänzt man SwiftUI-Views um eine sogenannte Source of Truth. Wie man mit @State arbeitet und welchen Nutzen es bringt, zeigt euch dieses Video.

#14: Status – @Binding

Binding spielt eine zentrale Rolle bei der Arbeit mit SwiftUI. Herzstück dieser Technik ist der gleichnamige Property Wrapper @Binding. Wie dieser grundlegend funktioniert und wofür er gut ist, zeige ich euch anhand eines kleinen praktischen Beispiels in diesem Video.

#15: Toggle

In dieser Lesson stelle ich euch mit Toggle eine View zum Erstellen von Schaltern in SwiftUI vor. Basis hierfür ist das Binding, das in den vorangegangenen Videos behandelt wurde.

#16: TextField

Mithilfe des TextField-Elements aus dem SwiftUI-Framework lassen sich Textfelder umsetzen. Auf Basis von Binding werden Änderungen innerhalb des Textfelds direkt an den Aufrufer übermittelt.

#17: SecureField

Das SecureField eignet sich ideal zur Eingabe von Passwörtern und ähnlichem. In diesem Video stelle ich euch dieses UI-Element des SwiftUI-Frameworks vor und zeige dessen praktischen Einsatz.

#18: Divider und Spacer

Mithilfe der Views Divider und Spacer lässt sich ein User Interface noch weiter optimieren. In diesem Video seht ihr den praktischen Einsatz der Elemente und wie man sie einsetzt.

#19: View-Maximum in Stacks

Aktuell verfügen Stacks in SwiftUI über eine Beschränkung, was die Anzahl der durch sie verwaltbaren Views betrifft. In diesem Video kläre ich euch über diese Problematik auf und zeige, wie ihr dennoch eine beliebige Anzahl an Views in Stacks einbinden könnt.

#20: Einsatz von Group

Mithilfe von Group lassen sich Views in SwiftUI gruppieren. Das kann unter anderem beim im letzten Video vorgestellten View-Maximum von Stacks sehr hilfreich sein.

#21: Erstellen eines Picker

In diesem Video werfen wir einen ersten Blick auf die Picker-View und wie man sie in SwiftUI typischerweise einsetzt.

#22: Aussehen eines Pickers anpassen

Mithilfe eines Modifiers lässt sich das Aussehen eines Pickers anpassen. Wie das funktioniert und welche Optionen uns hierbei zur Verfügung stehen, zeigt dieses Video.

#23: Picker unter watchOS und tvOS

Wir erweitern das Beispiel aus der letzten Lesson um ein watchOS- und tvOS-Target und binden darin unsere Picker-View ein.

#24: Picker auf Basis eines Enum

Ein häufiger Anwendungsfall ist die Einbindung von Enum-Cases in einen Picker. Wie man das mit SwiftUI umsetzt, zeige ich euch in diesem Video.

#25: DatePicker erstellen und konfigurieren

In diesem Video werfen wir einen ersten Blick auf den DatePicker aus dem SwiftUI-Framework. Hierbei zeige ich euch auch, wie man einen DatePicker grundlegend konfigurieren kann.

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