Storyboards wurden Entwicklern erstmals in der Version von iOS 5 vorgestellt. Sie ersparen dem Entwickler die Mühe, die Benutzeroberfläche jedes Bildschirms in einer anderen Datei zu gestalten. Mit dem Storyboard können Sie das konzeptionelle Modell Ihrer App als Ganzes und die Interaktionen zwischen den einzelnen Bildschirmen anzeigen. Mithilfe von Segues können Sie festlegen, wie die App zwischen bestimmten Bildschirmen wechseln und Daten weitergeben soll. In diesem Tutorial zeige ich Ihnen, wie Sie einen einfachen Anmeldebildschirm für eine App erstellen.
Anfangen
Das erste, was Sie tun möchten, ist ein neues Projekt zu erstellen. Sie möchten eine neue Einzelbildschirmanwendung, die die Sprache auf Swift und die Geräte auf Universal einstellt. Wenn Sie zum Storyboard navigieren, sollte eine leere View-Controller-Szene angezeigt werden. Der Pfeil auf der linken Seite des View-Controllers zeigt an, dass es sich um den Root-Controller handelt.
Um Beschriftungen für den Benutzernamen und das Kennwort hinzuzufügen, müssen Sie zum Feld unten rechts auf dem Bildschirm gehen, den Kreis mit einem Quadrat auswählen und zwei Beschriftungen per Drag & Drop in Ihre Ansicht ziehen. Durch Auswahl der Einstellungen in der Seitenleiste können Sie viele wichtige Parameter angeben. Es gibt zu viele, um darüber hinwegzugehen, aber die meisten sind selbsterklärend.
Die beiden wichtigsten für uns sind der Platzhaltertext und das Kontrollkästchen für die sichere Texteingabe. Wir möchten Platzhaltertext verwenden, um den Benutzer darüber zu informieren, welche Informationen von ihm benötigt werden, und den sicheren Eintrag, um das Kennwort des Benutzers nicht anzuzeigen. Nachdem dies erledigt ist, benötigen wir einen Knopf, um unseren Übergang auszulösen. Wir können einen auf die gleiche Weise wie ein Textfeld ziehen. Nachdem Sie der Schaltfläche einen Titel gegeben und Ihre Objekte auf dem Bildschirm angeordnet haben, sollte dies folgendermaßen aussehen:
Jetzt ist unser erster Bildschirm der App fertig, sodass wir einen weiteren für den Übergang erstellen müssen. Ziehen Sie dazu einen zweiten Ansichts-Controller auf den Bildschirm. Um die beiden Bildschirme zu verbinden, müssen Sie zwei Dinge tun. Zuerst müssen Sie steuern, auf die Schaltfläche klicken und sie auf den neuen Bildschirm ziehen, den Sie hinzugefügt haben. Als nächstes müssen Sie den Kreis zwischen den beiden Ansichten auswählen. Sie müssen dann die Kennung in Segue ändern. Für dieses Beispiel verwende ich 'nextScreen'.
Zuletzt werden wir dem neuen Bildschirm eine Beschriftung hinzufügen, damit wir den Benutzer anzeigen und sehen können, ob unsere App funktioniert. Um programmgesteuert über das Storyboard auf die Felder zugreifen zu können, müssen wir in der Klasse, in der sie verwendet werden, Outlets für sie erstellen:
Klasse FirstScreen: UIViewController {
@IBOutlet schwacher var Benutzername: UITextField!
@IBAction func loginButton (Absender: AnyObject) {
perfromSegueWithIdentifier ('nextScreen', Absender: self)
}}
}}
Klasse SecondScreen: UIViewController {
var user: String!
@IBOutlet schwacher var Benutzername: UILabel!
überschreiben func viewDidload () {
Benutzername.text = Benutzer
}}
}}
Stellen Sie anschließend sicher, dass Sie die Objekte aus dem Storyboard mithilfe des Verbindungsinspektors jedes Bildschirms verknüpfen. Ihre Verkaufsstellen sollten angezeigt werden und Sie können auf den Kreis rechts davon klicken, um sie zu verknüpfen.
Die letzte zu implementierende Funktion ist die prepareForSegue-Funktion in der Klasse des ersten Bildschirms. Auf diese Weise können Sie Daten wie folgt an die neue Ansicht weitergeben:
Spaß überschreiben prepareForSegue (folgt: UIStoryboardFollow, Absender: AnyObject?) {
if segue.identifier == “nextScreen” {
Lassen Sie destVC = continue.destinationViewController als UIViewController
destVC.user = self.username
}}
}}
Jetzt haben Sie ein grundlegendes Verständnis dafür, wie Sie Bildschirme ändern und Daten zwischen ihnen übertragen. Dies gibt Ihnen einen guten Einstieg in die Erstellung funktionaler Apps und eine gute Programmierung!
2 Minuten gelesen
