App-Entwicklung mit iOS Grundkurs 1: Meine erste eigene App

Grundlegende Layouts mit Storyboards

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Storyboards sind das Standardtool in Xcode für die Erstellung von iOS-Layouts. Dieser Film erläutert die Grundlagen der Arbeit mit Storyboards einschließlich der Verwendung der Document Outline und der Suche nach Benutzeroberflächenelementen in der Objektbibliothek.

Transkript

Ich möchte mich mit Ihnen jetzt ein bisschen um Basis-Layouts mit einem Storyboard beschäftigen. Dazu erstelle ich in Xcode dann ein neues Projekt. Das heißt, ich habe Xcode hier gestartet und kann hier ein neues Xcode-Projekt starten. Zum Beispiel für eine Single View Application. Ich gehe auf "Next", ich gebe hier einen neuen Namen, nennen wir es "Basics". Ich habe wie üblich die Daten, die, wenn Sie einmal mit Xcode bereits gearbeitet haben, voreingetragen sind. Ich kann das hier also lassen in den Voreinstellungen, ich gehe auf "Next". Ich kann mir hier einen Ort wählen, beispielsweise hier, und dort dieses Projekt anlegen. Es spielt keine Rolle, wo Sie dieses Projekt erzeugen, auf dem Desktop oder in gewissen Strukturen, die Sie angelegt haben. Gehen Sie nach Ihrer eigenen Ordnerstruktur vor. Ich habe mir jetzt halt hier eine gewisse Ordnerstruktur vorgegeben. Wir haben also hier jetzt eine Standardeinstellung von Xcode mit gewissen Bereichen, beispielsweise Navigator-Bereich, die Utils und das, was normalerweise den Editor beinhalten wird. Unter anderen gibt es eben hier nun auch das sogenannte Storyboard. Was ist das Storyboard? Ganz vereinfacht ist es eine Datei, worüber Sie das User-Interface, die Benutzerschnittstelle Ihrer App erstellen können. Man kann nun nicht sagen, dass diese Storyboards überall identisch aussehen. Das hängt davon ab, was für eine Version von Xcode Sie benutzen und noch einigen anderen Dingen. Aber Sie sollten eine Übersicht über Ihre View normalerweise sehen. Eine View ist ja die Oberfläche einer MVC-Applikation, wie man sie bei einer iOS-App vorliegen hat. Sie sehen hier einen Pfeil, mit dem Sie diese View expandieren oder auch kollabieren können. Das ist die sogenannte Document Outline, was Sie hier sehen, wenn Sie das hier expandieren. Das ist eine Hierarchie Ihrer Applikation, Ihrer App. Sie sehen beispielsweise auch hier eine Hierarchie von visuellen Komponenten der Oberfläche, so wie sie ineinander geschachtelt sind. Der Controller, View Controller, den Sie hier sehen, der verwaltet Ihre View, Ihre Oberfläche. Die View selbst ist das, was man letztendlich als Anwender sieht. Das ist das, was als App visuell auf dem Gerät, auf dem Device, auftauchen wird. Hier unten gibt es jetzt eine Schaltfläche, womit Sie diese Document Outline anzeigen und auch ausblenden können. Das ist dieser kleine Button hier. Und Sie sehen natürlich auch an der Hilfe, wann man ausblendet und einblendet. Lassen wir hier dieses kleine Fensterchen weg, dann haben wir etwas mehr Platz, zum Designen der Oberfläche. Die gesamten Objekte, die man jetzt zur Verfügung hat, um eine Benutzeroberfläche zu bauen, werden in einer Bibliothek zur Verfügung gestellt, einer Objektbibliothek für visuelle Oberflächen. Und diese sehen Sie hier in diesem Utility-Bereich. Und das ist auch ein bisschen versteckt in der Vorgabeeinstellung. Denn Sie sehen hier zum Beispiel momentan überhaupt keine User-Interface-Objekte, sondern Code-Objekte: Klassen. Aber man kann hier so ein bisschen scrollen und irgendwann tauchen dann auch User-Interface-Objekte auf. Wohlbemerkt, das ist tatsächlich ein bisschen versteckt und nicht allzu komfortabel zugänglich. Aber es gibt natürlich Wege, sich das schneller hervorzuzaubern. Erst einmal klicken wir hier diesen Kreis mit diesem Rechteck darin an. Das zeigt nun Objekte, visuelle Objekte und andere Objekte. Und wenn wir jetzt nach unten scrollen, dann tauchen irgendwann auch visuell repräsentierte User-Interface-Objekte auf, beispielsweise ein Label, also eine Beschriftung oder ein Button, eine Schaltfläche oder ein Textfeld, ein Slider, eine Switch, also ein Umschaltbutton, eine Fortschrittsleiste und so weiter und so weiter, und zwar so, dass man sie auch visuell gleich benutzen kann. Ziehen wir mal einfach ein Label auf den Bereich der App. Das heißt, ich klicke hier das Label an und ziehe das schlicht und einfach hier auf diese View, auf den Bereich, wo nachher die sichtbare Repräsentation der App zu sehen sein wird. Und Sie sehen, da tauchen so Hilfslinien auf. Diese Hilfslinien sind immens wichtig, wenn man verschiedene Objekte aneinander sauber angepasst auf der Oberfläche platzieren möchte. Das heißt, wenn ich ein zweites Label jetzt auch wieder ziehe, dann erleichtern mir diese Hilfslinien natürlich, dass ich dieses Objekt hier auch so positionieren kann, dass es beispielsweise genau parallel oder untereinander zu einem anderen Objekt auftauchen wird. Ich lasse es mal kurz weg und ich arbeite an diesem Label ein bisschen weiter. Nun gibt es einige Default-Margins, das heißt, Innenabstände, Außenabstände, eigentlich ist das ein Außenabstand. Und diese Labels, wenn man sie loslässt, die rasten ein an solchen Default-Maßen. Das würde also pixelweise sein, in der Regel sind das zwei oder vier Pixel, wo diese Label oder diese anderen visuellen Komponenten auf der Oberfläche einrasten werden. Das kann man bei Bedarf auch konfigurieren. Eine Komponente wie dieses Label kann man jetzt auf verschiedene Weise editieren, verändern. Eine Möglichkeit ist zum Beispiel einen Doppelklick durchzuführen und einfach einen neuen Text hier reinzuschreiben. Dabei können verschiedene Dinge passieren. Es kann sein, dass der neue Text die Komponente von der Breite erweitert oder aber die Breite bleibt erhalten und der neue Text geht gar nicht hinein. In dem Fall tauchen drei Punkte auf, der Text wird also abgeschnitten, und gegebenenfalls eben nur teilweise angezeigt. Das Verhalten hängt davon ab, wie diese Komponente konfiguriert ist. Die Komponente kann auch über den sogenannten Inspektor geändert werden. Der Inspektor ist das, was Sie hier oben sehen, dieser Teil. Da gibt es verschiedene Schaltflächen, unter anderem eben auch Möglichkeiten, um dort Eigenschaften einer Komponente zu beeinflussen. Der Größen-Inspektor oder der Attribut-Inspektor. Und wenn wir den mal auswählen, dann sehen Sie, dass es hier diesen Text, den ich gerade eingegeben habe, auch gibt. Und wenn ich hier etwas eintrage, dann wirkt sich das nach der Bestätigung unmittelbar hier in der Komponente auf der visuellen Seite aus. Und hier sehen Sie auch diese drei Punkte. Der neue Text passt jetzt nicht mehr in den Bereich, den ich für die Breite vorgegeben habe. Und dann wird unter Umständen etwas abgeschnitten. Wenn ich jetzt hier mit der Maus zum Beispiel die Größe verändere, dann passt dieser Text wieder hinein. Und jetzt passt er wieder nicht hinein. Und was ich hier vorgebe, das kann ich natürlich mit dem Inspektor auch wieder beeinflussen, denn Sie sehen hier Angaben für Breite und die Höhe. Und wenn ich hier die Breite zum Beispiel verkleinere, dann wirkt sich das auch unmittelbar hier aus. Mache sie wieder größer, wirkt sich das auch dort aus. Und Sie sehen auch hier diese Schaltflächen, womit man visuell durch Klicken die verschiedenen Maße auch verändern kann. Das geht für sämtliche Eigenschaften, die auf eine standardisierte Weise verändert werden können. Auch die Position kann man hier verändern, wie Sie sehen. Die Y-Position nach oben, nach unten. Und die X-Position. Aber selbstverständlich kann ich auch hier eine Änderung vornehmen. Es ist ganz spannend, dass Sie auch mehrere Komponenten, beispielsweise mehrere Labels, gemeinsam selektieren können. Zum Beispiel über die "Shift"-Taste und dann Anklicken. Und dann wird Ihnen im Inspektor alles angezeigt, was für die Komponenten gemeinsam einzustellen ist. Es macht wenig Sinn, zum Beispiel die Positionen übereinander zu legen oder auch gemeinsamen Text zu vergeben. Aber gewisse Effekte, beispielsweise Schriftgrößen, Farben et cetera werden auch für mehrere Komponenten gemeinsam beeinflussen zu sein, sinnvoll beeinflussen zu sein. Und das kann man dann hier auch in den Inspektoren möglicherweise vernünftig auswählen. Wenn Sie irgendwo wieder neben eine Komponente klicken, dann sind die deselektiert. Jetzt habe ich aber hier die Eigenschaften der gesamten View, weil die jetzt selektiert ist. Nun lassen wir uns nochmal die Dokumentenstruktur etwas ansehen. Und Sie sehen, die neu hinzugefügten Komponenten tauchen jetzt in dieser Hierarchie auch auf. Und hier können Sie auch zu den einzelnen Objekten dieser View, dieser Oberfläche selektieren. Sie können gesamte View selektieren, die einzelnen enthaltenen Komponenten, und dann auch die verschiedenen Layouts, die so als Rand hier auftauchen, also das ist Top Layout, hier ist dieses Bottom Layout, das da unten so ein bisschen auftaucht, wenn man es denn sieht. Und eben die View und die enthaltenen Komponenten. Die Navigation ist, wenn man es einmal verstanden hat, total intuitiv und auch die Veränderungen hier in diesen verschiedenen Inspektoren ebenso. Lassen Sie uns zusammenfassen. Sie haben verschiedene Möglichkeiten, eine visuelle Oberfläche zusammenzubauen mit Xcode, mit dem Storyboard. Und Sie können sie auf verschiedenste Art modifizieren, visuell teilweise, teilweise auch hier über die Inspektoren. Und selbstverständlich kann man das auch dynamisch machen, aber das führt dann in den Code, was wir in diesem Video eben noch nicht gesehen haben.

App-Entwicklung mit iOS Grundkurs 1: Meine erste eigene App

Ihr Einstieg ohne Vorwissen: Unternehmen Sie die ersten Schritte zur eigenen iOS-App.

2 Std. 8 min (21 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:05.05.2017
Laufzeit:2 Std. 8 min (21 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!