iPhone SDK Tutorial deutsch 6 – Storyboard Part 1 – Grundlagen

Im iOs 5 SDK gibt es ein fantastisches neues Feature: Das Storyboard. In diesem mehrteiligen Tutorial zeige ich was das ist und wie man es benutzt.

Hinweis: Du benötigst für dieses Tutorial mindestens Xcode Version 4.2

Mit Hilfe der Storyboards lässt sich das Interface deiner App viel leichter gestalten. Zuvor hat man .xib-Dateien für das Interface benutzt, welche das Aussehen jeder Szene einzeln enthielten. Mit Storyboards muss man weniger Code schreiben, und kann mit einer einzigen Datei, das komplette Interface gestalten. In diesem Part zeige ich die Grundlagen dieser Neuerung.

1. Das Projekt erstellen

Öffne Xcode und erstelle ein neues Projekt. Wähle dazu das “Single View Application”-Template (Mehr zu den neuen Templates erfährst du hier). Klicke auf Next und gibt wie gewohnt bei Product Name den Namen des Projekts an, z.B. “Tutorial6″. Wichtig ist, dass du bei Device Family die Option iPhone auswählst und den Haken bei Use Storyboard und Use Automatic Reference Counting setzt.

Klicke wieder auf Next und gib den Speicherort des Projekts an.

2. Das Projekt

Schauen wir uns zuerst einmal um: Im Project Navigator in der linken Seitenleiste befinden sich die Dateien des Projekts. Bekannt sind uns bereits die Dateien AppDelegate.h, AppDelegate.m, sowie der ViewController. Allerdings fehlt da eine Datei: MainWindow.xib. Das liegt daran, dass wenn wir das Storyboard verwenden, wir keine .xib-Dateien benötigen. Somit wird auch MainWindow.xib überflüssig. Dafür ist eine andere Datei dazugekommen: MainStoryboard.storyboard. Bevor wir uns diese Datei genauer ansehen, werfen wir nochmal einen Blick auf die Projekt-Datei. In dieser wird nämlich angegeben, wo sich das Interface der App befindet. In unserem Fall in MainStoryboard. Wolltest du eine andere Interface-Datei verwenden, so könntest du hier angeben welche.

3. Das Storyboard

Öffne jetzt die Datei MainStoryboard.storyboard. Daraufhin erscheint der Storyboard Editor. Dieser erinnert stark an den Interface Builder und tatsächlich funktioniert er ganz ähnlich.

Rechts unten befindet sich die Library von der wir, wie gewohnt, Objekte in dem View ziehen können. Darüber befindet sich die Leiste mit den verschiedenen inspectors, in welchen man die Eigenschaften eine Objekts ändern kann. Im Editor-Bereich befindet sich bereits ein View Controller. Unter dem View ist eine schwarze Leiste, das Dock. Möchte man den View Controller auswählen, klickt man ganz einfach auf dieses Dock. Daraufhin erscheinen zwei Objekte: das View Controller-Objekt und das First Responder-Objekt. In diesem Part sind beide für uns noch nicht von großer Bedeutung.

4. Der erste View Controller

Fangen wir an das Interface der App zu erstellen. Suche in der Library den Round Rect Button und ziehe ihn in die Mitte des Views. Beschrifte den Button wie hier:

Wir können die App schonmal probehalber ausführen, um zu sehen ob alles funktioniert… Der Button wird wie gewollt angezeigt.

Bevor wir nun dem Button eine Action zuweisen, erstellen wir noch einen Navigation Controller. Das ist denkbar einfach: Klicke auf das Dock des View Controllers, um ihn auszuwählen und gehe in der Menüleiste von Xcode auf
Editor -> Embed In -> Navigation Controller.
Daraufhin erscheint neben unserem ersten View Controller ein Navigation Controller. Die beiden Controller sind mit einer sog. Relationship miteinander verbunden.

Außerdem wird im Document Outline (linke Seitenleiste im Editor) eine neue Sektion für den Navigation Controller erstellt. Diese enthält außerdem das Relationship-Objekt.
Der Vollständigkeit halber ändern wir noch die Überschrift des Views. Wähle dazu die Navigation Bar des View Controllers (rechter Controller) aus und gib im Attributes inspector unter Title “Hauptmenü” ein.

Wenn wir die App nun erneut ausführen wird am oberen Rand des Views die Navigation Bar angezeigt.

5. Einen neuen View Controller erstellen

Wenn der Button angeklickt wird, soll ein neuer View angezeigt werden. Dazu fügen wir einen neuen View Controller hinzu. Um das mit Hilfe von .xib-Dateien zu realisieren, müssten wir viel Code schreiben und viele Verknüpfungen im Interface Builder erstellen. Mit dem Storyboard geht das ohne eine Zeile Code mit wenigen Mausklicks.

Zuvor verschaffen wir uns allerdings noch etwas mehr Überblick. Doppelklicke dazu auf eine leere Stelle im Editor oder klicke auf das kleine Lupen Symbol mit dem Minus in der rechte unteren Ecke des Editors. Damit wird heraus gezoomt und wir haben Platz einen weiteren View Controller hinzu zu fügen.
Ziehe aus der Library einen View Controller und platziere ihn neben dem anderen.

Als nächstes klicken wir mit gedrückter ctrl-Taste auf den Button im Hauptmenü-View Controller, halten die Taste gedrückt und ziehen den blauen Faden auf den neuen View Controller. Im daraufhin erscheinenden Dialog wählen wir Push. Dadurch, dass wir dies auswählen, erscheint im zweiten View automatisch eine Navigation Bar und es wird sogar ein Zurück-Button angelegt (sichtbar in der App), mit dem wir wieder zum ersten View zurückkehren können. Und wir müssen dafür gar nichts mehr machen.

Führe die App aus, um es auszuprobieren.

6. Den View anpassen

Hinweis: Um neue Objekte in den View Controller hinein zu ziehen, müssten wir nun wieder heran zoomen.

Zum Schluss zeige ich noch, wie man einen View anpasst (z.B. die Hintergrundfarbe ändert), da das im Storyboard Editor (minimal) anders ist, als im IB. Damit wir den View anpassen können, müssen wir ihn erstmal finden . Er befindet sich innerhalb des View Controllers. Um ihn anzuzeigen, klicken wir im Document Outline unter der Sektion des “Spieler-Liste”-View Controllers auf den grauen Pfeil neben View Controller – Spieler-Liste.

Daraufhin erscheint das View-Objekt, welches du nun im Attributes inspector nach Belieben anpassen kannst.

7. Schluss

Ich glaube der enorme Vorteil des Storyboards ist ersichtlich: Wir haben ohne eine Zeile Code zu schreiben einen Navigation Controller und einen zusätzlichen View Controller implementiert.
Im nächsten Part werden wir noch eine Table View hinzufügen: iPhone SDK Tutorial deutsch 6 – Storyboard Part 2 – Table View.

Den Code für dieses Tutorial kannst du hier downloaden: iPhone_SDK_Tutorial_deutsch_6-Storyboard_Part_1-Grundlagen

Wenn du möchtest kannst du den Blog abonnieren oder mir auf Twitter folgen.