App interaktiv machen

In diesem Kapitel werden einige neue Dinge und Funktionen der Benutzeroberfläche vorgestellt, die iOS für die Interaktion mit dem Benutzer bereitstellt. Wir werden hinzufügen -

Textfelder
Labels
Knöpfe und ihre Aktionen

Zusätzlich schreiben wir den Code schnell für ein dynamisches Label, das das berechnete Ergebnis der vom Benutzer eingegebenen Eingabe anzeigt.

Mit dem Titel „Unsere App interaktiv machen“ meinen wir, dass unsere Anwendung mit dem Benutzer interagiert. Daher geben wir dem Benutzer hier die Möglichkeit, mit der Anwendung zu interagieren und sie zu steuern.

Hinzufügen von Textfeldern

Hier werden wir wieder ein neues Projekt machen. Es sollte leicht zu handhaben sein, da wir bereits besprochen haben, wie ein neues Projekt in Xcode erstellt wird.

Okay, wir werden jetzt ein neues Projekt namens "My Dog's Age" erstellen. Nach dem Erstellen dieses Projekts klicken wir auf unsere Datei "Main.storyboard" und führen die folgenden Schritte aus.

Suchen Sie in der Suchleiste des Dienstprogrammfensters (in der unteren rechten Ecke von Xcode) nach Beschriftung. Klicken Sie auf diese Beschriftung und ziehen Sie sie auf Ihr main.storyboard / (Ansicht). Doppelklicken Sie dann auf das Etikett und benennen Sie es in "My Dog's Age" um.
Suchen Sie nach "Textfeld", klicken Sie auf dieses Textfeld und ziehen Sie es in Ihre Ansicht. Während dieses Textfeld ausgewählt ist, gehen Sie zum Attributinspektor und ändern Sie den Tastaturtyp in Nummernblock, sodass nur die Nummer eingegeben werden kann, wie im folgenden Screenshot gezeigt.

Hinzufügen von Schaltflächen zu unserer Ansicht

Suchen Sie nun in der Suchleiste nach einer Schaltfläche. Ziehen Sie das in Ihre Ansicht, doppelklicken Sie darauf und benennen Sie es in "Berechnen" um.

Hinzufügen eines Etiketts zur Ansicht

Suchen Sie nach dem Etikett und fügen Sie es unter der Schaltfläche hinzu, um die Altersausgabe anzuzeigen. Doppelklicken Sie und machen Sie das Etikett leer und strecken Sie es ein wenig, so dass die gesamte Ausgabe sichtbar ist.

Tip - Wenn Sie nicht durch Doppelklicken umbenennen können, wählen Sie das Element aus und klicken Sie im Utility-Bereich auf - Attribute inspectorgibt es den Titel dieses Elements, ändern Sie ihn dort und drücken Sie die Eingabetaste, wie im folgenden Screenshot gezeigt.

Jetzt sollte Ihr Main.storyboard wie im folgenden Screenshot aussehen.

Wir hören hier nicht auf, jetzt werden wir diskutieren, wie man dem main.storyboard Bilder hinzufügt.

Hinzufügen von Bildern zu unserer Ansicht

Zunächst sollten wir nach einem Bild suchen, das wir dem Projekt hinzufügen möchten. Sie können das unten angegebene Bild herunterladen -

Kopieren Sie dieses Bild in Ihr Projekt oder ziehen Sie es in Ihr Projekt. Dann wird das folgende Fenster angezeigt.

Stellen Sie sicher, dass Sie Elemente auswählen, bei Bedarf kopieren und Gruppen erstellen. Klicken Sie auf die Schaltfläche Fertig stellen.

Gehen Sie nun zu Utility-Bereich → Objektbibliothek und suchen Sie nach Bildansichten. Ziehen Sie die Bildansicht in Ihre Ansicht. Jetzt sollte Ihre Ansicht wie im folgenden Screenshot aussehen.

Klicken Sie nun auf diese Bildansicht, Sie haben sie einfach in Ihre Ansicht gezogen und dann sehen Sie, dass es im Utility-Bereich eine Option namens "Bild" gibt, um das Bild auszuwählen. Klicken Sie auf diesen Pfeil und Sie sehen alle verfügbaren Bilder. Stellen Sie sicher, dass Sie diese neu hinzugefügte Bildansicht ausgewählt haben.

Nachdem Sie das Bild für Ihre Bildansicht ausgewählt haben, sollte Ihre endgültige Ansicht wie im folgenden Screenshot aussehen. Dies ist das einzige, was wir mit unserem main.storyboard für diese Anwendung tun werden.

Dies ist unsere Ansicht jetzt, nachdem alle Elemente der Benutzeroberfläche hinzugefügt wurden.

Danach haben wir eine logische Implementierung unseres Codes, die wir fortsetzen, wenn Sie bis zu diesem Schritt abgeschlossen haben.

Wählen Sie nun Ihren Ansichts-Controller aus und öffnen Sie den Assistenten-Editor, indem Sie auf die Schaltfläche Assistent-Editor in der oberen rechten Ecke klicken (siehe Abbildung unten).

Unsere Ansicht sollte nun wie im folgenden Screenshot aussehen.

Hinzufügen von Funktionen zu unserer Anwendung

Bisher ist unsere Anwendung nur eine statische Anwendung, die auf nichts reagiert und sich bei der Benutzerinteraktion nicht ändert.

Jetzt kommt der Hauptteil der Verbindung unserer UI-Elemente mit unserem Code und die UI ändert sich je nach Benutzereingabe. Das“ViewController.swift” Datei ist unsere Hauptdatei, in der wir Code für unsere aktuelle Ansicht schreiben werden.

Note- Derzeit arbeiten wir mit einzelnen Ansichten, später, wenn wir über mehrere Ansichten sprechen. Wir werden diskutieren, wie verschiedene Dateien verschiedene Ansichten steuern.

Klicken Sie auf das Textfeld, drücken Sie die Strg-Taste und ziehen Sie den Cursor auf den zweiten Teil des Bildschirms, dh die Datei viewcontroller.swift. Sie sehen eine blaue Linie, die unsere Ansicht und die schnelle Datei verbindet. Wenn Sie die Maus loslassen, wird ein Popup angezeigt, in dem Sie zur Eingabe aufgefordert werden.

TIP- Füllen Sie das Feld Name mit einem Namen, der Ihrem Eingabefeld ähnelt. Ein wichtiger Punkt ist, dass der Name kein Leerzeichen haben kann. Sie können ihn also wie im vorherigen Bild gezeigt schreiben. Wenn der Name also mehrere Wörter enthält, sollte das erste Wort in kleinen Fällen geschrieben werden, dann das erste Alphabet jedes nächsten Wort wird Kapital sein.

Gehen Sie genauso vor und verbinden Sie die restlichen Elemente. Denken Sie daran, dass für ein Textfeld und eine Beschriftung der Typ Outlet ist. Beim Hinzufügen einer Schaltfläche muss der Typ jedoch eine Aktion sein, wie im folgenden Screenshot gezeigt.

Zu diesem Zeitpunkt sieht unser viewcontroller.swift wie folgt aus:

Fügen Sie nun innerhalb Ihrer Schaltflächenaktion die folgenden Zeilen hinzu:

var age = Int(enteredAge.text!)! * 8 
yearsLabel.text = String(age);

Tip- Wir müssen kein Semikolon hinzufügen, um eine Zeile schnell zu beenden, aber selbst wenn wir ein Semikolon einfügen, meldet der Compiler keinen Fehler .

Im obigen Code deklariert die erste Zeile eine Variable 'Alter', die wir im nächsten Kapitel diskutieren werden. Dann weisen wir den vom Benutzer eingegebenen Wert zu, indem wir ihn in eine Ganzzahl umwandeln und mit 8 multiplizieren.

In der zweiten Zeile weisen wir unserem Ausgabeetikett den Wert 'age' zu. Zu diesem Zeitpunkt sieht unser View Controller wie folgt aus:

Jetzt werden wir unsere Anwendung ausführen und so wird es aussehen.

Tip- Wenn Ihre Tastatur beim ersten Start nicht angezeigt wird, öffnen Sie Ihren Simulator, klicken Sie auf Hardware, wechseln Sie zur Tastatur und klicken Sie auf Software-Tastatur umschalten.

Im nächsten Kapitel werden wir über ein neues Tool namens diskutieren Playground. Wir werden auch einige schnellere Konzepte wie Variablen, Wörterbücher, Arrays-Schleifen, Klassen und Objekte lernen.