Im vorherigen Tutorial konnten wir unsere Label-Eigenschaften programmatisch bearbeiten. Es handelt sich jedoch immer noch um einen statischen Text, der sich während des Programmablaufs nicht ändert. Wir werden heute sehen, wie wir die Benutzereingaben verwenden können und damit bei einem Label eine Aktion ausführen können und damit Label-Eigenschaften verändern können.
Das "UITextField"
Ein UITextField ist das Element, mit dem wir einen vom Benutzer eingegebenen Text abrufen und für verschiedene Zwecke verwenden können. Wie das UILabel kann das UITextField zur Storyboard-Szene hinzugefügt und an den ViewController gebunden werden. Führe dafür folgende Schritte durch:
Öffne die Datei Main.storyboard
Klicke in der Symbolleiste auf die Schaltfläche "+" in der oberen rechten Ecke
Die Liste mit den verschiedenen Elementen öffnet sich
Ziehe das Element "Textfield" auf den Bildschirm und legen es dort ab
Der "UIButton"
Ein UIButton ist ein Element, dass eine Funktion als Reaktion auf Benutzereingaben (z.B. Tippen oder Berühren) ausführt. Wie die anderen Elemente der Benutzeroberfläche kann der "Button" dem Storyboard hinzugefügt, an den ViewController gebunden und mit einer IBAction-Funktion verknüpft werden.
Führe folgenden Schritte aus, um eine Schaltfläche im Storyboard hinzuzufügen:
Klicke in der Symbolleiste auf die Schaltfläche "+" in der oberen rechten Ecke
Die Liste mit den verschiedenen Elementen öffnet sich
Ziehe das Element "Button" auf den Bildschirm und legen es dort ab
Positionieren der UI-Elemente
iOS hat ein sehr starkes Positionierungssystem namens AutoLayout. Es ermöglicht uns sehr einfach, die Position einzelner UI-Elemente relativ zur Screenansicht oder zu anderen UI-Elementen, die bereits derselben Ansicht hinzugefügt wurden, festzulegen. Dies geschieht durch Festlegen von Constraints. Wir können beispielsweise festlegen, dass sich ein UI-Element unter einem anderen UI-Element mit einem bestimmten Abstand befindet oder das Constraints die gleiche Breite oder Höhe haben.
Nun positionieren wir unser TextField oben in der Hauptansicht. Platziere das Label mit einem guten Abstand unter dem TexField und dem Button.
Führe folgenden Schritte aus, um die Constraints festzulegen:
Verschiebe die Elemente von oben nach unten: TextField, Label und Button
Für das TextField:
Halte die Steuertaste (ctrl ^) auf der Tastatur gedrückt und klicke auf das Textfield. Ziehe ein wenig an den oberen Rand der Hauptansicht und lass alle Tasten los.
Es öffnet sich eine Liste mit möglichen Constraints. Wähle "Top Space to Safe Area". Die obere Constraint für das TextField ist jetzt festgelegt.
Drücke und halte die Steuertaste erneut, klicke auf das Textfield und ziehe von der Hauptansicht ein wenig nach links. Lass alle tasten los. Es öffnet sich wieder die Liste mit möglichen Constraints. Wähle " Leading Space to Safe Area". Führe das gleiche erneut für die rechte Seite aus und wähle "Trailing Space to Safe Area".
Für das Label:
Drücke und halte die Steuertaste, klicke auf das Label und ziehe die Maus auf das Textfield. Lass die Tasten los und wählen " Vertical Spacing" aus der Liste der Constraints.
Lege die Constrains für Leading und Trailing genauso fest wie für das TextField.
Für den Button:
Drücke und halte die Steuertaste, klicke auf den Button und ziehe die Maus auf das Label. Lass alle Tasten und wähle " Vertical Spacing" aus der Liste der Constraints.
Lege die Constrains für Leading und Trailing genauso fest wie für das TextField und das Label.
Drücke und halte wieder die Steuertaste, klicke auf den Button und ziehe mit der Maus ein wenig an dem unteren Rand der Hauptansicht. Lasse dann los und wähle in den Constraints " Bottom Space to Safe Area".
Festlegen der Constraints-Werte:
Nachdem wir die Constraints definiert haben, legen wir nun die zugehörigen Werte, also die Abstände, fest. Wenn Du auf ein UI-Element klickst, werden die dazugehörigen Constraints als blaue Linien angezeigt. Diese können ausgewählt und bearbeitet werden, um die gewünschten Abstände und die richtige Beziehung der Constraints festzulegen.
Wir legen unsere Constraints folgendermaßen fest:
Klicke auf das TextField und wählen den obersten Constrain aus. Wählen in der "Inspector bar" den “attributesinspector”
Setze den Wert der Constraint bei "Constant" auf 24
Wähle die "Leading Constraint" (links) des TextField aus und setze "Constant" auf 24. Mache das gleiche auch mit der "Trailing Constraint" (rechts).
Klicke auf das Label, wähle die obere Constraint aus und setze den Wert auf 24. Gehe dann auf die Leading und Trailing Constraints und setzen diese ebenfalls auf 24.
Klicke dann auf den Button, wählen die Top Constraint aus und setzen den Wert auf 24, dann auf Leading und Trailing und setze diese auch wieder auf 24.
Wähle die Bottom Constraint des Buttons und setze die Konstante auf 24 und die Beziehung auf "Greater Than or Equal".
Nachdem wir die Constraints festgelegt haben, werden die Positionen und Größen der Elemente dynamisch berechnet, um das Constraint System auf allen Geräten (unterschiedliche iPhones und iPads) anzuwenden.
Deine Ansicht sollte jetzt so aussehen:
Aktualisiere den Text des Labels, wenn Du auf dem Button tippst
Um die Benutzerinteraktionen zu erkennen und dessen Eingaben zu erhalten, müssen wir zwei Dinge tun.
Als Erstes muss das neu erstellte UITextField und der UIButton mit dem ViewController verknüpft werden. Als Nächstes kann eine IBAction-Funktion erstellt werden, die aufgerufen wird, wenn der Benutzer auf den Button tippt.
1 - Verknüpfen der UI-Elemente
Öffne die Datei “ViewController.swift”
Füge die UIButton- und UITextField Deklarationen unter den vorhandenen UILabel Deklaration hinzu.
@IBOutlet weak var inputTextField: UITextField!
@IBOutlet weak var actionButton: UIButton!Gehe zurück zu der Storyboard Datei
Verknüpfe das TextField und den Button mit den Variablen, die wir gerade im ViewController deklariert haben (Details siehe iOS Tutorial 2 und im Video am Enden des Tutorials).
2 - Eine Button Action erstellen
Jetzt müssen wir nur noch eine neue Funktion erstellen, die mit dem Button "Touch Event" verknüpft werden kann und die den in das TextField eingegebenen Text abruft und als Text-Wert für das Label festlegt.
Öffne die Datei 'ViewController.swift'
Füge unten vor der schließenden Klammer die folgende Funktion hinzu
@IBAction func buttonPressed() {
let text = inputTextField.text
messageLabel.text = text
}Gehe zurück zur Storyboard Datei
Wähle den Button
Wähle in der "Inspector bar" den "Connections Inspector" für Verbindungen aus
Klicke und halte im Abschnitt "Sent Events" auf den Kreis vor "Touch Up inside" und ziehe diesen auf die Schaltfläche und lasse die Tasten los
Wähle die vorgeschlagene Methode: “buttonPressedWithSender”
Deine App sollte jetzt wie erwartet funktionieren. Jedes Mal, wenn Du einen Text eingibst und auf den Button klickst, wird der Text auf das Label übertragen.
Es ist auch hilfreich, die Eigenschaft des Label für die Anzahl der Zeilen (number of lines) auf 0 zu setzen. Dadurch kann das Label so viele Zeilen wie nötig anzeigen. So wird auch ein mehrzeiliger Text vollständig dargestellt und wird nicht am Ende des Labels abgeschnitten.
Du kannst natürlich auch den Titel des Button verändern, um diesen besser zuordnen zu können.
Führe nun die App aus, tippe auf das Textfield und gebe dort einen Text ein. Klicke auf den Button, um den Text des Label’s festzulegen
Im nächsten Tutorial lernst Du, wie Du Bilder anzeigen und mit den "application assets" umgehen kannst. Die Projekt Datei kannst Du auch wieder 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 3 - UIAction mit Storyboard verbinden