Im vorherigen Tutorial haben wir die Entwicklungstools und das benötigte Equipment kennengelernt, die für die Erstellung von iOS-Apps erforderlich sind. Damit konnten wir unsere erste App mit einem einfachen Screen mit statischem Text entwickeln und auf dem Simulator ausführen. In diesem Tutorial werden wir unsere ersten Codezeilen schreiben, um die Darstellung und den Inhalt unseres Screens zu bearbeiten und die Entwicklungssprache Swift langsam kennenzulernen.
Der "View Controller"
Ein "View Controller" ist das Element, welches für die Aktualisierung des Inhalts der Ansicht und die Reaktion auf Benutzereingaben verantwortlich ist. Wir haben bereits ein Label über das Storyboard hinzugefügt und werden und anschauen, wie wir es mit dem Code ändern können.
Im Project Files Explorer befindet sich eine Datei mit dem Namen "ViewController.swift".
Klicke diese einmal an, um sie zu öffnen. Diese Datei enthält die Deklaration einer Klasse (Klasse) namens ViewController (Diese können wir auch anders benennen) und ist vom Typ UIViewController. Dieser ViewController ist an unseren Storyboard-Screen gebunden.
Jede Seite, die wir im Storyboard erstellen, verfügt über eine eigene ViewController Datei. Als Klassen-Body haben wir derzeit nur eine Funktion, nämlich viewDidLoad. Diese Funktion wird nur einmal aufgerufen, wenn unsere Seite erstellt und geladen wird. Sie wird normalerweise verwendet, um das Erscheinungsbild und Ansicht der Seite zu definieren und die erforderlichen Eigenschaften oder Parameter festzulegen.
Die Klassen enthalten in allgemeinen Variablen und Funktionen. Variablen sind die Werte (Values) und Objekte (Objects), mit denen wir arbeiten. Diese können Zahlen, Texte, UI-Komponenten (Beschriftung, Schaltfläche usw.) sein. Funktionen sind die Codeblöcke, in denen wir Operationen mit diesen Variablen durchführen und bei Bedarf Ergebnisse erhalten.
Das "Label"
Um unser Label verändern zu können, müssen wir es in der ViewController Datei deklarieren.
Dazu fügen wir folgende Codezeile über der Funktion “viewDidLoad” hinzu.
@IBOutlet weak var messageLabel: UILabel!@IBOutlet stellt die Variable für das Storyboard zur Verfügung. Du kannst vorerst die Fehlermeldung ignorieren. Diese werden wir uns in einem weiteren Tutorial anschauen. messageLabel ist der Name unserer Variablen. Normalerweise wählt man kurze und aussagekräftige Namen aus. UILabel ist der Typ unserer Variablen. Die meisten Komponenten der iOS-Benutzeroberfläche (User Interface) beginnen mit dem Präfix UI (UILabel, UITextField ..etc).
Binde das UILabel an die Storyboard-Komponente
Nachdem wir unsere UILabel-Variable deklariert haben, müssen wir sie an die Komponente binden, die wir im Storyboard erstellt haben, um später Änderungen aus der ViewController Klasse durchführen zu können. Gehe dafür folgendermaßen vor:
Im Storyboard: Klicke auf der linken Seite auf den ViewController Scene, um diesen auszuwählen.
In der Inspector Bar: Wähle auf der rechte Seite den Connections inspector aus
Unter Outlets: Wirst du die messageLabel-Variable, die du vorher im Code deklariert hast, sehen.
Klicke auf den kleinen Kreis vor dem messageLabel und halte die Taste gedrückt, jetzt erscheint eine blaue Linie. Ziehe diese auf das Label (Hello World) auf dem Screen und das Label ist mit der von uns erstellten Variablen verbunden.
Ändere den Text vom Label programmatisch
Unser Label kann jetzt angepasst werden, wenn wir z. B. den Text, die Textfarbe, Schriftart, Größe usw. ändern möchten. Da unsere messageLabel-Variable vom Typ UILabel ist, enthält sie eine Reihe von Eigenschaften, mit denen wir das Aussehen und den Inhalt ändern können.
Lass uns den Text und die Textfarbe ändern, um zu sehen, wie die Attribute angepasst werden können.
Wir fügen unseren Code in viewDidLoad hinzu, da diese Methode ausgeführt wird, wenn der ViewController erstellt und geladen wird.
override func viewDidLoad() {
super.viewDidLoad()
messageLabel.text = "Test"
messageLabel.textColor = UIColor.red
}Wie wir sehen können, hat die Klasse UILabel unter anderem Variablen, die text und textColor heißen. Unsere Variable messageLabel ist ein Teil von UILabel und kann somit diese Variablen verwenden, um angepasst zu werden.
"Test" ist ein Textwert vom Typ String.
UIColor.red (kann auch einfach als .red bezeichnet werden) ist die rote Farbe der Klasse UIColor. Diese hat natürlich auch andere Farben, welche wir nutzen können. Bei bedarf können sogar mithilfe von RGB-Werten eigene Farben erstellt werden.
Führe die App aus, um den neuen Textwert und die neue Textfarbe des Labels anzuzeigen.
Im nächsten Tutorial werden wir unseren ViewController weitere interaktive Komponenten hinzufügen und den Bildschirminhalt basierend auf den Benutzereingaben anpassen. Du kannst die Projektdateien hier herunterladen.
Verpasse kein Tutorial mehr! Like dafür einfach unsere Facebook Seite ✅
Also: Bleib dran!
Viel Spaß beim Coden.
Euer Code Pirate Team
Du liest: iOS Programmierung Tutorial 2 - UI-Elemente im Code bearbeiten