Einleitung

In diesem Tutorial soll es diesmal um das iPad gehen. Um genau zu sein, um den Split View Controller. Mehr dazu weiter unten.

Was Du in diesem Tutorial lernen wirst:

• Implementieren eines Split View Controllers ohne Template
• Kommunikation zwischen Master und Detail View
• Master View mit der Swipe-Geste erscheinen und verschwinden lassen

So wird die fertige App dann aussehen: Video

1. iPad Apps

Das Entwickeln von Apps für das iPad unterscheidet sich grundlegend nicht von der Entwicklung von Apps für das iPhone. Deshalb werde ich in diesem Tutorial nicht bei null beginnen. Wer noch neu in der iOS-Entwicklung ist, kann mit dem Einsteiger Tutorial beginnen. Dieses ist zwar für das iPhone geschrieben, das Wissen ist aber übertragbar.

Der größte Unterschied zwischen iPhone und iPad Apps, ist die verfügbare Display-Größe. Man sollte diese beim iPad immer optimal nutzen. Ein Beispiel:

Wenn man eine Produkt-Katalog App für das iPhone entwickelt, wird man höchstwahrscheinlich in einem Table View die Produkte auflisten und sobald der User eine Zeile auswählt, erscheinen Details über das Produkt in einem neuen View. Das wäre dann eine ganz simple Master-Detail-View App. Der Table View ist der Master View und von diesem aus gelangt man in den Detail View, der Details anzeigt.

Möchte man diese App auf das iPad übertragen, so wäre es nicht sinnvoll diese genauso aufzubauen. Dann hätte man nämlich einen riesigen Table View, in dem nur ganz klein auf der linken Seite die Produktnamen stehen. Das ist ziemlich unpraktisch. Deshalb hat Apple für das iPad einen weiteren View Controller entworfen, den sogenannten Split View Controller. Auch dieser besteht aus einem Master und einem Detail View. Allerdings sind diese beiden Views in einem einzigen View integriert.

Ein Beispiel für so einen Split View ist die Einstellungen-App auf dem iPad.

Links befindet sich der Master View in Form eines Table Views und rechts der Detail View.

Wir werden in diesem Tutorial eine Art Mini-Webbrowser entwickeln. Im Master View kann der User eine Bookmark auswählen und die Website wird dann im Detail View angezeigt. Im Gegensatz zur Einstellungen App kann der User in unserer App den Master View mit einem Button oder einer Wischgeste ein und ausblenden.

2. Der Split View Controller

Öffne Xcode und erstelle ein neues Projekt. Als Template verwenden wir das Single View Application Template. Das Master-Detail Application Template würde zwar schon einen fertig implementierten Split View Controller enthalten, allerdings sollte man wissen, wie man diesen von Hand einbaut. Wenn Du das Single View Application Template ausgewählt hast, erscheinen die Projekt-Settings. Hier kannst Du wie immer den Projekt-Namen eingeben, bspw. “SplitViewTutorial”. Allerdings müssen wir diesmal den Wert bei Device Family auf “iPad” einstellen. Ansonsten sollte aber alles wie immer sein:

Speichere im nächsten Fenster das Projekt ab.

Wir bleibe gleich mal bei der bereits geöffneten Projekt-Datei. Eine Einstellung lautet da nämlich Supported Device Orientations. Anders als bei einem iPhone-Projekt sind hier standardmäßig alle Orientations aktiviert. Das sollte man bei einer iPad App auch möglichst nicht ändern, da der User einfach erwarten, dass die App in allen Positionen funktioniert.

Gehen wir weiter zum Storyboard. Öffne die Datei “MainStoryboard.storyboard” und wie Du siehst, siehst Du nichts . Das liegt daran, dass ein iPad View im Storyboard in Normalgröße angezeigt wird und das ist recht groß. Für mehr Überblick kannst Du einfach auf die Lupe mit dem Minussymbol in der rechten, unteren Ecke klicken.

Bevor wir mit der Implementierung des Split Views beginnen, kannst Du dich erstmal überzeugen, dass alles genauso wie beim iPhone funktioniert. Ziehe einfach wahllos Objects, wie Labels, Buttons oder Textfelder in den View (dazu musst Du wieder heranzoomen). Beachte beim Starten der App, dass bei Scheme in der Toolbar der “iPad 5.1 Simulator” steht. Das bedeutet, dass die App im iPad Simulator angezeigt wird. 

Als nächstes löschen wir den View Controller im Storyboard, da wir ja mit einem Split View Controller beginnen wollen. Zoome dazu im Storyboard wieder heraus, klicke auf das schwarze Dock des Controllers und lösche ihn mit der Backspace-Taste.

Dann suche in der Library nach dem Split View Controller und ziehe ihn in den Editor-Bereich.

Auf den ersten Blick ist das ein ziemlich wirres Geflecht.

Ganz links ist der Split View Controller. Dieser ist ein sogenannter Container View Controller. “Container” deshalb, weil er andere Controller enthält, welche man dann als seine Child View Controller bezeichnet. Der Container View Controller, den man als Parent View Controller bezeichnet, kümmert sich um die Präsentation der Child View Controller. Beispiele für Container View Controller sind der Navigation Controller, der dafür sorgt, dass jeder Child View eine Navigation Bar hat, oder der Tab Bar Controller, der zu jedem Child View eine Tab Bar hinzufügt.
Unser Split View Controller ist eben ein weiterer Container View Controller und sorgt dafür, dass seine Child View Controller gesplittet angezeigt werden. In diesem Fall sind das ganze drei weitere Controller, alle verbunden durch eine Relationship. Eine Relationsship wird wie eine Segue als Pfeil dargestellt, allerdings hat der Kreis des Pfeil ein anderes Symbol.

Links oben befindet sich dann ein Navigation Controller, auch wieder ein Container View Controller. Man sieht also, dass ein Container View Controller auch einen Container View Controller enthalten kann. Rechts daneben befindet sich dann ein Table View Controller, der als Master View Controller dient. In diesem Master View Controller wird der User ein Lesezeichen auswählen können.

Der View Controller unten ist der Detail View Controller, in welchem die Website des im Master View Controller ausgewählten Lesezeichen angezeigt wird.

Und schon ist das ganze viel übersichtlicher: Oben Master View, unten Detail View und ganz links der Split View Controller.

3. Der Detail View Controller

Zuerst wollen wir den Detail View gestalten.

Damit der User später den Master View Controller über einen Button anzeigen kann, müssen wir eine Top Bar anlegen, auf der wir den Button platzieren. Eine Top Bar ist einfach eine Bar am oberen Rand des Views. Statt wie sonst eine Navigation Bar zu verwenden, werden wir diesmal eine Toolbar einfügen, da wir ja nur einen Button platzieren und nicht durch mehrere Views navigieren wollen.

Suche also eine Toolbar aus der Library und ziehe sie an den oberen Rand des Detail View Controllers.

Hinweis: Wer einen großen Bildschirm hat, kann das Xcode Fenster einfach etwas vergrößern, damit das Platzieren der Objects leichter fällt.

Auf der Toolbar befindet sich standardmäßig ein Button, den wir aber nicht benötigen, da wir später einen Button für den Master View im Code erstellen werden. Wähle also den Button im Document Outline aus und lösche ihn mit der Backspace-Taste.

Wie ich am Anfang erwähnt habe, sollte man eine iPad App immer für alle Orientations auslegen. Es kann also auch sein, dass unsere App im Landscape-Mode verwendet wird. Für diesen Fall müssten wir einstellen, dass sich die Toolbar automatische an die neue Breite anpasst. Wähle sie dazu aus und öffne den Size inspector. Auf der linken Seite befindet sich ein Bild mit roten Pfeilen und Stützen, unter dem Autoresizing steht. Wenn man die roten Linien anklickt, kann man sie entweder aktivieren oder deaktivieren. Ändere die Einstellungen so ab, dass das Bild wie folgt aussieht:

Das bewirkt, dass die Tool Bar immer am oberen Rand des Views und in voller Breite angezeigt wird.

Als nächstes fügen wir einen Web View hinzu, in dem wir später die Website des im Master View ausgewählten Lesezeichens anzeigen werden. Ziehe dazu einen Web View aus der Library in den Detail View Controller und passe seine Größe an den verfügbaren Platz an:

Noch haben wir dem Detail View Controller im Storyboard keine Klasse zugewiesen. Damit wir keine neuen Dateien erstellen müssen, verwenden wir einfach “ViewController.h” und “ViewController.m”. Wähle also den Detail View Controller aus, indem Du auf das schwarze Dock klickst und öffne den Identity inspector. Gib bei Class einfach “ViewController” ein.

Jetzt können wir die Outlets für die Toolbar und den WebView erstellen. Schalte auf Assistant Editor um (s. Bild: rechts oben) und klicke im Document Outline mit gedrückter ctrl-Taste auf die Toolbar. Halte die Taste gedrückt und ziehe den blauen Faden in “ViewController.h” über @end. Nenne das Outlet “toolbar” und wiederhole diesen Schritt für den WebView (nenne ihn “webView”).

Stelle, wenn Du fertig bist, wieder auf Standrad Editor um.

Da wir mit dem Split View Controller arbeiten, müssen wir noch das <UISplitViewControllerDelegate> einbinden. Ändere die @interface Zeile in “ViewController.h” wie folgt ab:

@interface ViewController : UIViewController <UISplitViewControllerDelegate> 

Als nächstes folgt die Standard-Implementierung für den Split View Controller.
Dafür benötigen wir zuerst einen sogenannten Popover Controller. Für was wir diesen benötigen, dazu komme ich später.

Öffne die Datei “ViewController.m” und schreibe folgendes unter die @implementation-Zeile:

{
    UIPopoverController *masterPopoverController;
}

So sollte das dann aussehen:

Das besondere hieran ist, dass wir eine Instanzvariable der Klasse ViewController nicht wie sonst in der Header-Datei (.h) deklariert haben, sondern in der Implementierungs-Datei (.m). Dieses Feature, Instanz-Variablen in der .m-Datei zu speichern, hat man eingeführt, um die Header-Dateien sauberer und übersichtlicher zu halten. Wenn möglich sollten nur properties in der Header-Datei deklariert werden und keine normalen Instanz-Variablen. Für die App selbst macht es aber keinen Unterschied.

Als nächstes fügen wir die Standard-Methode hinzu, die man einfach benötigt, wenn man mit einem Split View Controller arbeitet. Füge diese beiden Methode über @end in “ViewController.m” ein:

// Standard-Methoden für einen SplitViewController
-(void) splitViewController:(UISplitViewController *)svc
     willHideViewController:(UIViewController *)aViewController
          withBarButtonItem:(UIBarButtonItem *)barButtonItem
       forPopoverController:(UIPopoverController *)pc {

    barButtonItem.title = @"Lesezeichen";
    NSMutableArray *items = [[self.toolbar items] mutableCopy];
    [items insertObject: barButtonItem atIndex: 0];
    [self.toolbar setItems:items animated:YES];
    masterPopoverController = pc;
}

-(void) splitViewController:(UISplitViewController *)svc
     willShowViewController:(UIViewController *)aViewController
  invalidatingBarButtonItem:(UIBarButtonItem *)barButtonItem {
    NSMutableArray *items = [[self.toolbar items] mutableCopy];
    [items removeObject:barButtonItem];
    [self.toolbar setItems:items animated:YES];
    masterPopoverController = nil;
}

Hinweis: Bei beiden Funktionen geht der Funktions-Kopf über mehrere Zeilen.

Die erste Methode wird aufgerufen, wenn das iPad gedreht wird. Wie Du im obigen Video siehst, wird der Master View im Landscape Mode, also im breiten Format, ständig angezeigt. Dreht man das iPad allerdings wieder in den Portrait Mode, so erscheint ein Button, mit dem man den Master View ein- und ausblenden kann.

splitViewController:willHideViewController:withBarButtonItem:forPopoverController: wird also immer dann aufgerufen, wenn das iPad zurück in den Portrait Mode gedreht wird. Deshalb erstellen wir in dieser Methode den besagten Button namens “Lesezeichen”. Etwas seltsam ist hier, dass wir erst noch ein Array namens items deklarieren. Das wird deswegen gemacht, da die Toolbar eventuell (in unserem Fall zwar nicht) noch weitere Buttons enthalten könnte. Wir erstellen also zuerst ein Array, in welchem wir alle Bar Button Items speichern (Zeile 8) und fügen dann an erster Stelle, also ganz links, den neuen Button ein (Zeile 9). Mit [self.toolbar setItems...] weisen wir dann der Toolbar die Items zu (Zeile 10). In der letzen Zeile erhält unsere vorhin erstellte Instanz-Variable masterPopoverController noch den Wert “pc”. pc ist ein Argument der Methode und ist vom Typ UIPopoverController. Ein Popover Controller ist im Split View immer der Controller, der durch Drücken des Buttons geöffnet wird, also der linke View Controller. In unserer App ist dies auch gleich der Master View Controller, weshalb wir ihn der Instanz-Variable masterPopoverController zuweisen (diese Variable werden wir später noch verwenden).

Zu beachten ist, dass der seitliche View Controller im Landscape Mode kein Popover Controller ist, sondern einfach nur ein seitlicher View Controller.

Die zweite Methode macht genau das Gegenteil. Sie wird aufgerufen, wenn das iPad wieder in den Landscape Mode gedreht wird. Wir erstellen zuerst wieder ein Array mit den Button Items unserer Toolbar (Zeile 16) und löschen aus diesem Array den “Lesezeichen”-Button, der im Argument barButtonItem gespeichert ist (Zeile 18). Das überarbeitete Items-Array weisen wir dann wieder der Toolbar zu (Zeile 19). Da wir im Landscape Mode keinen Popover Controller mehr haben, sondern nur einen links eingefügten Master View Controller, setzen wir masterPopoverController auf nil (Zeile 20).

Mit dem Detail View Controller sind wir für’s Erste fertig.

4. Der Master View Controller

Als nächstes kümmern wir uns um den Master View Controller, in welchem der User ein Lesezeichen auswählen kann. Öffne “MainStoryboard.storyboard”. Der Master View besteht aus einem Navigation Controller und einem Table View Controller. Für diesen Table View müssen wir, wie immer, eine Data Source, also den Inhalt der Tabelle, erstellen. Dazu wiederum benötigen wir die Header- und Implementierungs-Datei des Controllers.

Klicke mit der rechten Maustaste auf den Projekt-Ordner “SplitViewTutorial” im Project Navigator und wähle New File… Klicke dann doppelt auf Objective-C class in der Kategorie Cocoa Touch. Gib bei Class ”BookmarksMasterViewController” und bei Subclass of ”UITableViewController”. Stelle außerdem sicher, das der Haken bei Targeted for iPad gesetzt ist.

Klicke auf Next und speichere die Dateien ab.

Bevor wir diese neuen Dateien bearbeiten, begib dich noch einmal ins Storyboard und wähle den Table View Controller aus. Öffne dann den Identity inspector und gib bei Class “BookmarksMasterViewController” ein.

Hinweis: Wenn Du dich noch nicht mit Table Views im Storyboard auskennst, solltest Du vorher das Tutorial Storyboard Part 2 durchlesen.

Da wir ja schon im Storyboard sind, können wir gleich noch den Cell Identifier für die Zeilen des Master View Controllers festlegen. Wähle dazu die Prototype Cell aus und öffne den Attributes inspector. Gib bei Identifier ”BookmarkCell” ein. Stelle außerdem bei Style den Wert auf “Basic”.

Öffne jetzt die Datei “BookmarksMasterViewController.m” Am Datei-Anfang, unter #import “…” befinden sich Zeilen, die da nicht hingehören zu scheinen:

Hier befindet sich seltsamerweise ein @interface… in der .m-Datei. Das erinnert ein wenig an die geschweiften Klammern unter @implementation (s. weiter oben im Tutorial). Der Zweck ist aber ein anderer. Zwischen @interface und @end in der .m-Datei können Properties und Methoden deklariert werden. Diese Properties und Methoden sind dann privat (engl. private). Private Properties bzw. Methoden sind nur innerhalb der Datei “BookmarksMasterViewController.m” gültig. Also nur die Klasse selber kann diese Properties/Methoden nutzen. Wollte man von einer anderen Klasse aus auf die Property zugreifen bzw. die Methode aufrufen, so würde man einen Fehler erhalten, da die Property außerhalb der BookmarksMasterViewController-Klasse nicht existiert.

Da wir das Array mit den Lesezeichen nur innerhalb der Klasse verwenden und nicht von außen darauf zugreifen werden, deklarieren wir es zwischen @interface und @end in der .m-Datei:

@interface BookmarksMasterViewController ()

@property (nonatomic, strong) NSMutableArray *bookmarksArray;

@end

Auch wenn die Property privat ist, müssen wir sie noch synthetisieren. Schreibe die @synthesize-Zeile unter @implementation BookmarksMasterViewController:

@synthesize bookmarksArray;

Hier noch einmal eine Übersicht, wie die Datei nun aussehen sollte:

Als nächstes füllen wir das Array mit ein paar Lesezeichen. Ändere dazu die Methode viewDidLoad ab:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.bookmarksArray = [NSMutableArray arrayWithObjects:@"http://www.iosdevgermany.de", @"https://developer.apple.com",nil];
}

Das sollte nichts Neues mehr sein: Wir definieren das Array mit zwei URLs.

Um den Table View voll funktionsfähig zu machen, müssen wir nun noch die Methode numberOfSectionsInTableView: , tableView:numberOfRowsInSection: und tableView:cellForRowAtIndexPath: bearbeiten:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    // Return the number of rows in the section.
    return [self.bookmarksArray count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"BookmarkCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    // Configure the cell...
    cell.textLabel.text = [self.bookmarksArray objectAtIndex:indexPath.row];

    return cell;
}

In den beiden ersten Methoden legen wir einfach fest, dass wir nur eine Section und so viele Zeilen wie URLs haben wollen. In der dritten Methode ändern wir den Wert des CellIdentifier auf “BookmarkCell”, also den Identifier den wir vorhin im Storyboard festgelegt haben. Unter “//Configure the cell…” weißen wir dem TextLabel der Cell noch die passende URL zu. Das ist alles nichts Neues, deswegen gehe ich nicht genauer darauf ein.

Es fehlt nur noch ein letzter Schritt zum funktionstüchtigen Split View. Und zwar haben wir zu Beginn in “ViewController.h” das UISplitViewControllerDelegate eingebunden. Dieses Delegate haben wir aber noch nicht dem Split View Controller in Storyboard zugewiesen. Leider ist es nicht möglich, dies im Storyboard zu bewerkstelligen. Deshalb tun wir das im Code und die einzige Klasse die dafür in Frage kommt ist AppDelegate.

Öffne die Datei “AppDelegate.m”. Dort befindet sich ganz oben die Methode application:didFinishLaunchingWithOptions: Diese tut was sie sagt: Sie wird aufgerufen, wenn die App fertig geladen ist. Das ist ein guter Zeitpunkt, um das Delegate des Split View Controllers zu setzen:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    UISplitViewController *splitViewController = (UISplitViewController *) self.window.rootViewController;
    splitViewController.delegate = [splitViewController.viewControllers lastObject];

    return YES;
}

Das sieht nun erstmal nach einer ziemlich ungewöhnlichen Syntax aus.

In der ersten Zeile erstellen wir einen UISplitViewController namens splitViewController.
In der zweiten Zeile weisen wir splitViewController.delegate den Wert [splitViewController.viewControllers lastObject] zu. splitViewController.viewControllers ist ein Array mit allen Child View Controllern des Split View Controllers. In unserem Fall ist das der Navigation Controller, der Master View Controller und der Detail View Controller. Da sich der Detail View Controller immer an letzter Stelle befindet, erreichen wir ihn über die Methode lastObject. Und wenn Du dich erinnerst: Im Detail View Controller haben wir das UISplitViewControllerDelegate eingebunden und deshalb weißen wir diesen Wert auch dem delegate zu.

Bleibt nur noch die seltsame Syntax in der vorherigen Zeile zu erklären: (UISplitViewController *) self.window.rootViewController. Zuerst kann man sagen, dass self.window.rootViewController einfach der erste Controller im Storyboard ist, also der Split View Controller. Das Problem ist aber, dass self.window.rootViewController vom Typ UIViewController* ist. Die Variable die wir erstellt habe ist aber vom Typ UISplitViewController*. Und da kommt das (UISplitViewController *) ins Spiel. Das ist ein sogenannter cast. Als cast bezeichnet man eine Typumwandlung. In unserem Fall wird der Typ UIViewController* in den Typ UISplitViewController* umgewandelt.

Und schon ergibt das ganze Sinn.

Die App funktioniert nun soweit. Wenn Du sie ausführst, kannst Du über den Button “Lesezeichen” den Popover Controller, also den Master View Controller anzeigen. Man kann ihn sogar mit einer Swipe-Geste nach rechts anzeigen und verschwinden lassen. Im Landscape Mode ist der Master View Controller immer sichtbar (drehe den Simulator mit cmd+Pfeiltaste). Das Einzige, das noch nicht funktioniert, ist das Anzeigen der Lesezeichen.

5. Kommunikation zwischen Master und Detail View Controller

Damit der Detail View Controller weiß, welche Website er öffnen soll, muss ihm dies der Master View Controller sagen.

Wir beginnen mit der Implementierung, indem wir die Klasse ViewController auf die Kommunikation vorbereiten. Dazu erstellen wir zuerst eine Variable, in wir die vom Master View Controller empfangene URL speichern.

Öffne “ViewController.h” und füge diese Property zu den anderen hinzu:

@property (strong, nonatomic) id detailItem;

Da wir diese Property in der Header-Datei und nicht in der Implementierungs-Datei deklariert haben, ist sie nicht privat, sondern kann auch von außerhalb der Klasse verwendet werden.

Eine Besonderheit bei dieser Property ist der Typ id. Man verwendet diesen Typ, wenn man sich nicht sicher ist, von welchem Typ der zugewiesene Wert sein wird. Wir wissen zwar, dass wir unsere URL als NSString übergeben werden, aber wir halten uns damit alle Möglichkeiten offen.

Da zu jeder Property ein @synthesize gehört müssen wir dieses noch in “ViewController.m” einfügen:

@synthesize detailItem = _detailItem;

Jetzt erstellen wir noch eine Methode, mit der man von der BookmarksMasterViewController-Klasse aus dieses detailItem bearbeiten kann. Das ist ganz praktisch, da wir so nicht nur den Wert ändern, sondern noch weitere Dinge gleich im Anschluss tun können. Füge die Methode über viewDidLoad ein:

-(void) setDetailItem:(id)newDetailItem {
    if (_detailItem != newDetailItem) {
        _detailItem = newDetailItem;

        [self configureView];
    }

    if (masterPopoverController != nil) {
        [masterPopoverController dismissPopoverAnimated: YES];
    }
}

Es erscheint eine Fehlermeldung, um die wir uns in Kürze kümmern werden.

Zeile 2: Hier prüfen wir, ob das alte detailItem gleich dem neuen detailItem ist. Wenn die beiden gleich sind, müssen wir gar keine Änderung vornehmen, da ja schon die passende Website angezeigt wird.
Zeile 3: Wenn die beiden items nicht gleich sind holen wir das einfach nach, indem wir newDetailItem dem detailItem zuweisen.
Zeile 5: Diese Zeile verursacht die Fehlermeldung. Ganz einfach deswegen, weil es noch keine Methode namens configureView in unserer Klasse gibt. Das werden gleich ändern. Aber vorweg erwähnt: In dieser Methode lassen wir den Web View die besagte Website anzeigen.
Zeile 8: Du kannst dich vielleicht noch an die Methode
splitViewController:willShowViewController:invalidatingBarButtonItem: erinnern, die wir weiter oben im Tutorial definiert haben. Scrolle eventuell noch mal zu ihr runter, sie befindet sich auch in “ViewController.m”. In dieser Methode haben wir am Ende den masterPopoverController auf nil gesetzt. Das bedeutet, wenn das iPad im Landscape Mode ist, ist masterPopoverController nil. In der Methode setDetailItem: überprüfen wir mit if (masterPopoverController != nil) also, ob das iPad sich gerade im Landscape Mode oder im Portrait Mode befindet.
Zeile 9: Wenn sich das iPad gerade im Portrait Mode befindet, soll der Master View wieder versteckt werden, wenn ein Lesezeichen ausgewählt wurde. Wenn sich das iPad im Landscape Mode befindet, also masterPopoverController != nil nicht zutrifft, können wir den masterPopoverController nicht verstecken, da er in diesem Mode immer angezeigt wird.

Jetzt kommen wir zur besagten Methode configureView. Da wir diese Methode nur innerhalb der Klasse verwenden werden, deklarieren wir sie zwischen @interface und @end in “ViewController.m“:

@interface ViewController ()
-(void) configureView;

@end

Füge die Methode dann unter der Methode setDetailItem: ein:

-(void) configureView {
    NSString *URLString = [self.detailItem description];
    NSURL *websiteURL = [NSURL URLWithString:URLString];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:websiteURL];
    [self.webView loadRequest:requestObj];
}

Zeile 2: In dieser Zeile erstellen wir einen NSString* und speichern den Wert des detailItems in ihm ab. Um an den NSString*-Value einer id-Variable zu kommen, verwendet man die Methode description.
Zeile 3-5: In diesen Zeilen erstellen wir eine URL, mit dieser dann eine Request und lassen den Web View die Request dann laden.

Es fehlt nur noch ein letzter Schritt, bis die App fertig ist.
Öffne “BookmarksMasterViewController.m” und füge folgende Zeile unter #import “BookmarksMasterViewController.h ein:

#import "ViewController.h"

Scrolle dann ans Ende der Datei und bearbeite die Methode tableView:didSelectRowAtIndexPath:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSString *object = [self.bookmarksArray objectAtIndex:indexPath.row];
    ViewController *detailViewController = (ViewController *)[self.splitViewController.viewControllers lastObject];
    [detailViewController setDetailItem:object];
}

Diese Methode wird aufgerufen, wenn eine Zeile im Table View ausgewählt wird. Wir holen uns die passende URL aus dem bookmarksArray und speichern sie in einem NSString*. Dann erstellen wir eine Instanz der Klasse ViewController, also der Klasse des DetailViewControllers. Auch hier casten wir das letzte Objekt von self.splitViewController.viewControllers, aus dem gleichen Grund, wie im App Delegate. Zum Schluss rufen wir noch die vorhin erstellte Methode setDetailItem: auf und übergeben ihr die URL, die in object gespeichert ist.

Die App ist damit fertig. Starte sie und wähle im Master View einfach mal ein Lesezeichen aus. Wundere dich nicht, wenn zuerst nichts passiert, denn der Web View braucht seine Zeit, um die Website zu laden.

6. Schluss

Das Xcode-Projekt kannst Du dir hier downloaden: Split View Tutorial

Bei Fragen oder Kritik kannst Du mir gerne ein Kommentar hinterlassen.

Um keine Tutorial mehr zu verpassen, abonniere einfach den Blog RSS oder folge mir auf Twitter.

Einleitung

Mit iOS 5 ist es viel einfacher geworden, Gesten in der eigenen App zu erkennen und auf diese zu reagieren. Und das ohne viel Code schreiben zu müssen. In diesem Tutorial zeige ich, wie man die wichtigsten Gesten implementiert. Dabei werden wir zum Beispiel einen neuen View Controller per Wischgeste aufrufen,  mit der Pinch-Geste ein Bild skalieren und dieses mit dem Finger per Pan-Geste in der App umherziehen.

Hier nochmal die Übersicht, was Du in diesem Tutorial lernst:

• Implementieren eines Swipe, Pan und Pinch Gesture Recognizers
• Ein Bild skalieren
• Objekte in der App mit dem Finger bewegen
• Wechseln zwischen Views mit einer Wischgeste

Diese Tutorial wurde für iOS 5 und Xcode Version 4.2 oder neuer (4.3) geschrieben.

1. Die App

Beim Start der App wird ein View angezeigt, in dem er User aufgefordert wird, zum nächsten View zu wechseln, indem er mit dem Finger nach links wischt. In diesem befindet sich dann ein Bild, das man verschieben und vergrößern kann.

Hier mal eine Bildschrimaufnahme der App:
Gestures Tutorial

2. Die Swipe-Geste

Wir fangen mit der einfachsten Geste an, der Swipe-Geste.

Erstelle ein neues Xcode-Projekt mit dem Single View Application-Template. Bei Product Name kannst Du beispielsweise “GesturesTutorial” eingeben. Die restlichen Einstellungen sollten so wie immer sein:

Klicke auf Next und speichere das Projekt ab.

Öffne dann “MainStoryboard.storyboard”. Zuerst erstellen wir wieder das Interface der App.

Wir beginnen damit, einen Navigation Controller einzufügen, damit der Benutzer leichter durch die App navigieren kann. Wähle dazu den View Controller aus, indem Du auf das schwarze Dock unter ihm klickst und gehe in der Menüleiste von Xcode zu Editor->Embed In->Navigation Controller. Damit die Navigation Bar nicht so leer ist, klicken wir sie im View Controller doppelt an und geben einfach “Start” ein.

Der View Controller ziemlich leer bleiben und den User nur darauf hinweisen, dass er mit einer Wischgeste zum nächsten View kommt.

Suche in der Library nach einem Label und ziehe es an den oberen Rand des Views. Weise ihm den Text “Wische nach links, um zu beginnen” zu und richte das Label mittig aus.

Jetzt implementieren wir auch gleich die erste Geste. Dazu benötigen wir einen sogenannten Gestures Recognizer, genauer gesagt den Swipe Gestures Recognizer. Dieses Object erkennt, wenn in einem View eine Swipe- bzw. Wischgeste durchgeführt wird. Wie jedes Object finden wir ihn in der Library. Ziehe ihn von dort in das schwarze Dock des View Controllers.

Jetzt befindet er sich erstmal im View Controller. Zunächst müssen wir dem Recognizer aber noch mitteilen, wo die besagte Geste durchgeführt werden wird. In unserem Fall wird das auf dem View der Fall sein. Lasse Dir deshalb im Document Outline den View innerhalb des View Controllers anzeigen und ziehe dann die Swipe-Geste auf diesen View.

Jetzt kann über allem auf dem View, also dem weißen Bereich des Windows, die Geste erkannt werden. Mit welchem Object der Gesture Recognizer verbunden ist, sieht man übrigens im Connections inspector. Wähle den Swipe Gesture Recognizer einmal aus und öffne den Connections inspector. Unter Referencing Outlet Collections ist eine Verknüpfung zwischen gestureRecognizers und View.

Sehen wir uns nun den Recognizer mal im Attributes inspector genauer an. Es stehen uns einige wenige Attribute zur Verfügung, von denen uns vorallem die ersten beiden interessieren, Swipe und Touches. Mit Swipe wird festgelegt, in welche Richtung gewischt werden muss, damit die Geste erkannt wird. Wie mit dem Label angegeben, ist das in unserem Fall “Left”. Mit Touches geben wir an, mit wie vielen Fingern die Geste durchgeführt werden soll. Da uns im iOS-Simulator nur ein “Finger” zur Verfügung steht, belassen wir es beim Wert 1.

Nun müssen wir noch festlegen, was passiert, wenn die Geste erkannt wird. Das ist bei der Wischgeste besonders einfach, da wir keine einzige Zeile Code schreiben müssen.  Wir wollen ja nur, dass ein neuer View erscheint:

Ziehe also einen View Controller aus der Library neben den ersten View Controller. Wähle dann wieder den ersten View Controller aus und klicke mit gedrückter ctrl-Taste auf den Swipe Gesture Recognizer im Dock, ziehe den blauen Faden auf den zweiten View Controller und wähle dann “Push”.

Was auffällt ist, dass im neuen View Controller im Storyboard-Editor keine Navigation Bar angezeigt wird. Das könnte später bei der Platzierung von Objects zu Problemen führen. Wähle deshalb den View Controller aus und öffne den Attributes inspector. Stelle bei Top Bar den Wert “Navigation Bar” ein, bei Status Bar ”Grey” und bei Orientation ”Portrait”.
Dabei ändern wir nichts an der App selbst, sondern simulieren lediglich die Navigation und Status Bar im Storyboard-Editor, damit wir die Objects später korrekt und ohne Verzerrung einfügen können. Außerdem legen wir mit Orientation “Portrait” fest, dass der View hochkant benutzt wird.

Das wars auch schon mit der ersten Geste. Um das ganze zu testen, führen wie die App einmal aus.

Sehr hübsch, dass der View nach links eingeschoben wird, also in die gleiche Richtung, in die die Geste führt.

3. Der schwarze Kreis

Bevor wir mit den zwei anderen Gesten weitermachen, müssen wir noch ein wenig Vorarbeit leisten. Wir fügen also zuerst mal das Bild ein.

Du kannst Dir dieses hier downloaden oder auch ein schöneres benutzen .

Sobald Du den schwarzen Kreis gedownloaded hast, erscheint er in deinem Download-Folder. Von da ziehst Du ihn dann einfach in den Projektordner in Xcode. Achte darauf, dass im erscheinenden Fenster der Haken bei Copy items into destination group’s folder (if needed) gesetzt ist.

Öffne als nächstes “MainStoryboard.storyboard” und ziehe einen Image View aus der Library in die Mitte des zweiten View Controllers. Öffne dann den Attributes inspector und gib bei Image den Namen des Bildes, also “SchwarzerKreis.png” ein.

Wir bleiben gleich im Attributes inspector, denn wir müssen noch eine Einstellung vornehmen. Der Image View wird später auf die Gesten des Benutzers reagieren müssen. Damit er das kann müssen wir den Haken bei User Interaction Enabled setzen. Diese Einstellung darf man nicht vergessen, da sonst die Gesten mit dem Kreis nicht funktionieren.

Öffne dann den Size inspector und gib für die Breite (Width) 125 und für die Höhe (Height) 125 ein.

Jetzt, da der Kreis eingefügt ist, können wir die App nochmal startet. Im neuen View sollte nun das Bild angezeigt werden.

Nun müssen wir noch die .m- und die .h-Datei für den neuen View Controller erstellen, da wir dort später den Gesten eine Funktion zuweisen werden.

Dazu klickst Du mit der rechten Maustaste auf den Projekt-Ordner und wählst New File… Wähle dann in der Kategorie Cocoa Touch das Template Objective-C class. Gib bei Class ”CircleViewController” ein und stelle bei Subclass of den Wert “UIView Controller” ein. Eventuell musst Du dazu die Liste durchscrollen.

Ansonsten sollte kein Häkchen gesetzt sein. Klicke auf Next und speichere die Dateien ab.

Jetzt müssen wir diese Dateien nur noch dem View Controller im Storyboard zuweisen. Öffne also “MainStoryboard.storyboard”, wähle den rechten View Controller aus und öffne den Identity inspector. Gib bei Class “CircleViewController” ein.

Da wir ja später mit dem Image View arbeiten werden, müssen wir nun noch das Outlet für ihn erstellen. Wähle ihn dazu aus und schalte auf Assistant Editor um (Mittlere Button bei Editor in der Toolbar von Xcode). Ctrl-Klicke den Kreis an und ziehe den blauen Faden unter @interface… in “CircleViewController.h”. Nenne das Outlet “blackCircle” und klicke auf Connect.

Schalte nun wieder auf Standard Editor um und öffne “MainStoryboard.storyboard”.

Um sicherzugehen, dass sich nichts verändert hat, führen wir die App erneut aus. Es sollte also noch korrekt sein.

4. Die Pan Geste

Nun zur zweiten Geste, der Pan Geste. Mit dieser Geste soll der Benutzer den Kreis im View herumziehen können.

Suche also zuerst den Pan Gesture Recognizer in der Library und ziehe ihn in das Dock des “CircleViewController”. Wie bei der Swipe Geste müssen wir dem Recognizer wieder mitteilen, wo die Gesten durchgeführt werden. Diesmal ziehen wir den Pan Gesture Recognizer im Document Outline aber auf den Image View, da der Benutzer ja den Kreis, also das Bild, selbst antippen und umherziehen wird.

Bei der Pan Gesture werden wir leider nicht ohne eine Zeile Code auskommen. Wir müssen nämlich nun eine Action erstellen, die aufgerufen wird, wenn der Recognizer die Geste erkannt hat. In dieser Action werden wir dem Kreis die neue Position zuweisen, sodass er eben dem Finger des Users folgt.

Wähle den Pan Gesture Recognizer aus und öffne den Connections inspector. Unter Sent Actions befindet sich das Element selector. Die mit dem selector verbundene Methode ist genau die besprochene Action. Um diese zu erstellen, werden wir wieder in den Assistant Editor wechseln. Ziehe dann den blauen Faden von selector unter das Outlet des Image Views in “CircleViewController.h”. Ganz wichtig ist, dass Du bei Type den Wert “UIPanGestureRecognizer” einstellst. Dadurch wir eine speziell für die Pan Geste gedachte Action erstellt. Bei Name gib einfach “handlePan” ein.

Zunächst müssen wir die Action noch definieren. Schalte wieder auf Standard Editor um und öffne “CircleViewController.m”. Am Ende der Datei befindet sich schon die leere Methode handlePan. Ändere sie wie folgt ab:

- (IBAction)handlePan:(UIPanGestureRecognizer *)sender {
    CGPoint translation = [sender translationInView:self.view];
    sender.view.center = CGPointMake(sender.view.center.x + translation.x, sender.view.center.y + translation.y);
    [sender setTranslation:CGPointMake(0, 0) inView:self.view];
}

Gehen wir die Methode mal durch:
Zeile 2: Ein CGPoint ist einfach eine Koordinate auf dem Display. Wir deklarieren und definieren die Variable und erhalten mit [sender TranslationInView: self.view] die Bewegung, die der Finger des Benutzer vollführt. Mit TranslationInView: self.view legen wir fest, dass sich die Bewegung auf den View unseres View Controllers bezieht. Das bedeutet die Variable CGPoint translation ist der Abstand zweier Punkte in dem im Bild gezeigten Koordinatensystem:

Bewegt der Benutzer seinen Finger also nach rechts ergeben sich zwei Punkte P(0/0) und Q(10/0). Damit ergibt sich für translation ein Wert von (10/0), da die x-Bewegung 10 und die y-Bewegung 0 ist.
Da sieht man auch gleich, wie wichtig es ist, dass wir im Storyboard die Navigation Bar simuliert haben. Das Koordinatensystem des Views bezieht sich nämlich nur auf den View und nicht auf die Navigation Bar. Hätten wir keine Navigation Bar ginge das Koordinatensystem von x:0-320 und y:0-460.
Auch wichtig zu erwähnen ist, dass bei der Position eines Objects immer von dessen Mittelpunkt ausgegangen wird. Der schwarze Kreis im Bild befindet sich deshalb bei (0/0).
Zeile 3: Jetzt setzen wir die Position des Kreises neu. Da wir vorhin im Storyboard den Gesture Recognizer auf den Image View gezogen haben, haben wir festgelegt, dass sich die Geste auf den Image View bezieht. Das bedeutet, dass sender.view uns eben diesen Image View liefert.  Sender.view.center liefert dann einfach die Position des Image Views, also des Kreises. Zu dieser Position rechnen wir dann die Bewegung dazu. Wenn wir bei dem oberen Beispiel bleiben, wäre die Position des Kreises dann M(0+10/0+0), also M(10/0). Eigentlich ganz einfach .
Zeile 4: Hier setzen wir die translation, also die Positionsänderung wieder auf 0, denn sonst würde diese nach mehrere Pan-Gesten riesig groß werden und der Kreis würde sich viel zu schnell bewegen.

Das war’s auch schon mit der Pan-Geste. Führe die App nun erneut aus, um zu sehen ob man den Kreis nun bewegen kann.

Und tatsächlich können wir den Kreis im View umherziehen. An dieser Stelle erwähne ich nochmal, dass das nur funktioniert, weil wir im Storyboard beim Image View ein Häkchen bei User Interaction Enabled gesetzt haben. Ansonsten würde der Kreis sich nämlich nicht von der Stelle rühren.

5. Die Pinch Geste – Skalieren

Kommen wir zur letzten Geste, der Pinch Geste. Wenn diese erkannt wird, soll an den Kreis herangezoomt werden, bzw. der Kreis einfach vergrößert werden.

Zu Beginn gehen wir ähnlich vor, wie bei der Pan Geste. Ziehe zuerst den Pinch Gesture Recognizer in das Dock des View Controllers. Jetzt müssen wir wieder festlegen, auf welches Object sich der Recognizer bezieht. In diesem Fall soll das nicht der Image View sein, sondern der ganze View, da somit das Skalieren leichter fällt, da man die Finger nicht zwingen auf dem schwarzen Kreis haben muss. Ziehe also im Document Outline den Recognizer auf den View. Das war auch schon der erste Teil.

Als nächstes erstellen wir die Action für die Pinch Geste. Lass dir also den Recognizer im Connections inspector anzeigen und schalte wieder auf Assistant Editor um. Ziehe dann den blauen Faden vom Kreis hinter selector unter die andere Action. In der erscheinenden Sprechblase gibst Du bei Name “handlePinch” ein und stellst den Wert bei Type auf “UIPinchGestureRecognizer”.

Öffne nun “CircleViewController.m” und ändere die Methode handlePinch: ab:

- (IBAction)handlePinch:(UIPinchGestureRecognizer *)sender {
    CGFloat newScale = sender.scale;
    CGAffineTransform transform = CGAffineTransformMakeScale(newScale, newScale);
    self.blackCircle.transform = transform;
}

Die Methode handlePinch: wird immer aufgerufen, wenn der Recognizer eine Pinch Geste erkennt. Damit das Skalieren aber nicht abgehakt ist, ist dies mehrmals pro Pinch der Fall. Das bedeutet, wenn die Geste einmal durchgeführt wird, wird die Methode ca. 20-30 mal aufgerufen und der Kreis skaliert.

Innerhalb der Methode wird einfach das Ausmaß des Scales ermittelt und dann eine Scale-Transformation erstellt. Diese wird dann auf den Kreis angewendet, was bewirkt, dass dieser größer wird.

Führe die App nun einmal aus. Du kannst das Skalieren im iOS-Simulator testen, indem Du die alt-Taste gedrückt hältst. Wie Du siehst funktioniert das Skalieren schon recht gut. Wenn Du nun allerdings versuchst ein zweites Mal zu skalieren, schrumpft der Kreis zuerst wieder auf seine Anfangsgröße, bevor er wieder skaliert wird. Das ist natürlich unschön und deshalb werden wir das jetzt beheben.

Dafür benötigen wir eine neue Membervariable namens initialScale vom Typ float (Kommazahl). Zur näheren Erläuterung dieser Variable komme ich gleich. So sollte “CircleViewController.h” dann aussehen:

#import

@interface CircleViewController : UIViewController {
    float initialScale;
}
@property float initialScale;
@property (weak, nonatomic) IBOutlet UIImageView *blackCircle;

- (IBAction)handlePan:(UIPanGestureRecognizer *)sender;
- (IBAction)handlePinch:(UIPinchGestureRecognizer *)sender;

@end

Hier ist einfach die Membervariablen zwischen den geschweiften Klammern sowie die dazugehörige property hinzugekommen.

Öffne dann wieder “CircleViewController.m” und füge die @synthesize-Zeile für initialScale zur anderen hinzu:

@synthesize initialScale = _initialScale;

Ändere nun handlePinch: ab:

- (IBAction)handlePinch:(UIPinchGestureRecognizer *)sender {

    if (sender.state == UIGestureRecognizerStateBegan) {
        self.initialScale = blackCircle.transform.a;
    }
    else {
        CGFloat newScale = self.initialScale * sender.scale;
        CGAffineTransform transform = CGAffineTransformMakeScale(newScale,newScale);
        self.blackCircle.transform = transform;
    }
}

Hinzugekommen ist ein if-else-Statement.

Zeile 3: Die Bedingung in dieser Zeile wird immer dann erfüllt, wenn die Finger des Benutzers das Display berühren und die Pinch Geste erkannt wird, also immer wenn er gerade beginnt zu skalieren.
Zeile 4: Wenn die Bedingung aus Zeile 3 erfüllt wird, wird der Membervariable, die wir vorhin erstellt haben, der Wert self.blackCircle.transform.a zugewiesen. Damit erhält initialScale als Wert das Ausmaß des bisherigen Scales. Zoomt der Benutzer also das erstmal an den Kreis heran, so ist initialScale gleich null. Beim zweiten Mal Skalieren ist initialScale dann so groß, wie nach dem ersten Scale, beim dritten Mal so groß wie nach dem zweiten Mal und so weiter. Das bewirkt, dass der Kreis beim erneuten Skalieren nicht mehr zurückspringt.
Der restliche Code wurde bis auf Zeile 7 einfach von der ersten Version der Methode übernommen. Dort wird einfach der initialScale in newScale mit einberechnet.

Wenn du die App nun ausführst, funktioniert das Skalieren einwandfrei.

6. Schluss

Das Xcode-Projekt gibt’s wie immer zum Downloaden: Gestures Tutorial

Wenn ihr mir Feedback zum Tutorial geben oder ein Tutorial vorschlagen wollt, schreibt einfach ein Kommentar oder gebt mir über das Kontakt-Formular Bescheid.

Wenn Du immer über neue Tutorial informiert werden willst, kannst Du den Blog RSS abonnieren oder mir auf Twitter folgen.

Einleitung

In diesem Tutorial geht es um den UIWebView. Mit Hilfe dieses Objects ist es möglich, Websites innerhalb der eigenen App anzuzeigen. Außerdem behandle ich noch das Object Activity Indicator View, das man benutzen kann, um anzuzeigen, dass eine App gerade Daten lädt. Wir werden ihn verwenden, um den User darauf hinzuweisen, dass die Website geladen wird.

Was Du in diesem Tutorial lernst:

• Implementieren eines Web Views und Anzeigen einer Website
• Implementieren eines Activity Indicator Views

Diese Tutorial wurde für iOS 5 und Xcode Version 4.2 oder neuer (4.3) geschrieben.

Falls Du noch neu in der iOS Entwicklung bist, solltest Du vorher dieses Tutorial zum Einstieg lesen: Einsteiger Tutorial deutsch.
Außerdem solltest dich schon mit dem Storyboard auskennen: Storyboard Tutorial Part 1, Part 2, Part 3.

1. Die App

Der User kann die URL einer Website eingeben  und diese dann auf Knopfdruck in einem neue View anzeigen lassen. Selbstverständlich kann man sich dann frei auf der Website bewegen.

2. Das Interface

Öffne Xcode und erstelle ein neues Projekt. Wir benutzen für dieses Tutorial das Single View Application-Template. Nenne das Projekt beispielsweise “UIWebViewTutorial” und stelle folgende Projekt-Optionen ein:

Klicke auf Next und speichere das Projekt ab.

Wir beginnen wie immer im Storyboard. Öffne die Datei “MainStoryboard.storyboard”.

Zuerst fügen wir zum View Controller einen Navigation Controller hinzu, um die Navigation zu vereinfachen. Wähle dazu den “View Controller” aus, indem du auf das schwarze Dock unter ihm klickst und wähle dann in der Menüleiste von Xcode Editor->Embed In->Navigation Controller. Der Navigation Controller erscheint damit im Editor-Bereich und der “View Controller” besitzt nun eine Navigation Bar.

Wir ändern gleich mal den Titel der Navigation Bar von “View Controller”. Klicke dazu doppelt auf die Navigation Bar und gib dann “Web View” ein.

Als nächstes fügen wir ein paar Objects hinzu, ein Textfeld und einen Button (s. Bild unten). Wähle dann gleich das Textfeld aus, öffne den Attributes inspector und gib bei Text ”iosdevgermany.de” ein. Außerdem sollte der Haken bei “Clear when editing begins” gesetzt sein. Das bewirkt, dass sobald das Textfeld ausgewählt wird, der Text im Textfeld verschwindet.

Nun erstellen wir einen neuen View Controller für unseren Web View. Der View Controller ist gleich das erste Object in der Library. Ziehe es rechts neben den ersten View Controller. Um die Controller besser anordnen zu können, kannst Du mit dem Lupensymbol rauszoommen.

Bevor wir den Web View hinzufügen, verbinden wir die beiden View Controller mit einer Segue. Klicke dazu mit gedrückter ctrl-Taste auf den Button “Website anzeigen” und ziehe den blauen Faden auf den anderen View Controller. Wähle im daraufhin erscheinenden Menü “Push”.

Da wir später im Code Daten zwischen den beiden Controllern schieben wollen, müssen wir auf die Segue zugreifen können. Das funktioniert nur, wenn wir dieser einen eindeutigen Identifier geben. Wähle also die Segue aus und öffne den Attributes inspector. Gib bei Identifier ”ShowWebsite” ein.

Jetzt müssen wir nur noch einen Web View aus der Library in unsere ganz rechten View Controller ziehen. Dann sind wir mit dem Interface für’s Erste fertig. Achte darauf, dass der Web View den ganzen freien Platz im View einnimmt.

Bevor wir weitermachen, testen wir die App. Führe sie also aus und klicke auf den Button “Website anzeigen”. Daraufhin sollte der neue View Controller erscheinen.

3. Die Dateien für den neuen View Controller erstellen

Zunächst benötigen wir die .m- und die .h-Datei für den neuen View Controller, in dem der Web View liegt.

Klicke mit der rechten Maustaste auf den Projektordner “UIWebViewTutorial” und wähle New File…

Unter Xcode 4.3 befindet sich das View Controller subclass-Template mit im Objective-C class-Template. Wähle es deshalb aus und gib bei Class ”WebViewViewController” ein. Außerdem sollte bei Subclass of ”UIViewController” ausgewählt sein. Weder der Haken bei Targeted for iPad noch bei With XIB for user interface sollte gesetzt sein.

Klicke dann im nächsten Fenster auf Create.

Schließlich müssen wir die Dateien nur noch einem View Controller im Storyboard zuordnen. Öffne wieder “MainStoryboard.storyboard” und wähle den ganz rechten View Controller aus, den mit dem Web View. Öffne dann den Identity inspector und gib bei Class ”WebViewViewController” ein.

4. Die Outlets erstellen

Wir benötigen die Outlets von zwei der Objects, dem Textfeld und dem Web View. Um diese zu erstellen, wähle zuerst das Textfeld an und aktiviere dann den Assistant editor (mittlere Button von Editor in der Toolbar). Auf der rechten Seite sollte die Datei “ViewController.h” angezeigt werden. Klicke dann mit gedrückter ctrl-Taste auf das Textfeld und ziehe den Faden über die @end-Zeile. Nenne das Outlet “textField” und klicke auf Connect.

Wiederhole diesen Schritt für den Web View: Wähle ihn aus, ziehe den Faden über @end in “WebViewViewController.h” und nenne das Outlet “webView”.

5. Die Website anzeigen

Jetzt kommen wir zum eigentlich wichtigen Teil des Tutorials. Dem Anzeigen der Website.

Der User gibt eine Adresse ins Textfeld ein, zum Beispiel “iosdevgermany.de”. Dieser Text wird dann dem WebViewViewController übergeben. In diesem fügen wir noch “http://www.” an die Webadresse an und öffne die Website im Web View. Das setzen wir jetzt im Code um.

Zuerst wollen wir also den Textfeld-Text dem WebViewViewController übergeben. Dazu benötigt dieser View Controller eine weitere Membervariable, in der wie den Text speichern.

Öffne also die Datei “WebViewViewController.h” und ändere sie wie folgt ab:

#import <UIKit/UIKit.h>

@interface WebViewViewController : UIViewController {
    NSString *websiteName;
}
@property (copy, nonatomic) NSString * websiteName;
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end

Das einzig neue ist die Membervariable websiteName vom Typ NSString.

In “WebViewViewController.m” muss diese noch synthetisiert werden:

@synthesize websiteName=_websiteName;

Das ist die Standard-@synthesize Zeile für eine weak-Property (Genaueres im Storyboard-Tutorial Part 3).

Selbstverständlich müssen wir den “WebViewViewController” noch in den “ViewController” einbinden, damit wir auf die neue Membervariable zugreifen können.

Öffne “ViewController.m” und füge

#import "WebViewViewController.h"

unter der anderen #import-Zeile ein.

Jetzt können wir diesem View Controller den Textfeld-Text übergeben. Füge folgende Methode hinzu:

-(void) prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([[segue identifier] isEqualToString:@"ShowWebsite"]) {
        WebViewViewController *website = [segue destinationViewController];
        website.websiteName = textField.text;
    }
}

In der Methode prepareForSegue:sender übergeben wir dem WebViewViewController den Text aus dem Textfeld, noch bevor dieser View Controller aufgerufen wird. Hier kommt der vorhin festgelegte Identifier, “ShowWebsite”, der Segue zum Einsatz. Dann wird der Textfeld-Text in der eben erstellten Membervariable von WebViewViewController, websiteName, gespeichert.

Als nächstes muss der WebViewViewController nur noch dafür sorgen, dass die angegeben Website auch angezeigt wird. Damit er dies auch kann, müssen wir ein Protokoll, also ein Delegate, implementieren. Das sogenannte UIWebViewDelegate.

Öffne “WebViewViewController.h” und ändere die @interface-Zeile ab:

@interface WebViewViewController : UIViewController <UIWebViewDelegate> {

Nun muss das Delegate noch dem Web View im Storyboard zugewiesen werden. Öffne “MainStoryboard.storyboard” und suche im Document Outline nach dem Web View. Klicke dann mit gedrückter ctrl-Taste auf den Web View und ziehe den blauen Faden auf den Web View View Controller. Wähle dann den Punkt delegate.

Schlussendlich kommen wir nun zum Öffnen der Website. Öffne die Datei “WebViewViewController.m” und ändere die Methode viewDidLoad wie folgt ab:

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view.
    self.title = self.websiteName;
    NSString *fullURL = [NSString stringWithFormat:@"http://www.%@", self.websiteName];
    NSURL *websiteURL = [NSURL URLWithString:fullURL];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:websiteURL];
    [self.webView loadRequest:requestObj];
}

Zeile 5: Der Vollständigkeit halber ändern wir den Titel der Navigation Bar im WebViewViewController auf den Namen der Website. Das heißt in der Navigation Bar stünde beispielsweise “iosdevgermany.de”.
Zeile 6: An den Namen der Website wird “http://www.” angehängt, damit eine vollständige Web-Adresse entsteht. Diese wird im NSString fullURL gespeichert.
Hinweis: Um zwei Zeichenketten zusammenzufügen verwendet man die Methode stringWithFormat. In dem String “http://www.%@” wird für %@ die dahinterstehende Variable, der Website-Name, eingefügt.
Zeile 7: Hier wird eine weitere Variable erstellt, vom Typ NSURL. Aus dem String fullURL wird so eine richtige URL.
Zeile 8: requestObj ist ein Objekt, das angibt, das eine Website geladen werden soll. Welche das ist wird mit requestWithURL: websiteName festgelegt.
Zeile 9: Schließlich öffnet der Web View die Website, indem er die Request lädt.

Endlich ist unser Web View funktionstüchtig. Führe die App nun einmal aus und klicke auf “Website anzeigen”. Nach einer kurzen Ladezeit sollte die Website angezeigt werden:

Was mir allerdings noch nicht so gut gefällt, ist, dass immer nur ein kleiner Ausschnitt der Website angezeigt wird. Auch Zoomen ist nicht möglich. Das lässt sich schnell beheben.

Öffne “MainStoryboard.storyboard” und wähle den Web View aus. Lass ihn dir im Attributes inspector anzeigen und setze dann das Häkchen bei Scales Page To Fit.

Führe die App nun erneut aus. Jetzt wird die ganze Website angezeigt und man kann sogar mit Hilfe der alt-Taste im Simulator zoomen.

6. Der Activity Indicator View

Leider benötigen manche Website etwas länger zum Laden. Deshalb ist es sinnvoll, den Benutzer darauf hinzuweisen, das die Website noch lädt. Dazu eignet sich am Besten ein Activity Indicator View. Diesen werden wir jetzt einbauen.

Öffne “MainStoryboard.storyboard”, wenn sie nicht schon geöffnet ist, und suche in der Library nach dem Activity Indicator View. Ziehe ihn dann irgendwohin in den Web View, zum Beispiel in die Mitte. Öffne dann den Attributes inspector und ändere Color auf Schwarz:

Als nächstes benötigen wir das Outlet diese Objects. Schalte also wieder auf Assistant editor um und ziehe den blauen Faden vom Object zu den andere properties. Nenne das Outlet loadingSign:

Zum Schluss müssen wir noch zwei neue Methode zu “WebViewViewController.m” hinzufügen:

-(void) webViewDidStartLoad:(UIWebView *)webView {
    [self.loadingSign startAnimating];
    self.loadingSign.hidden = NO;
}

-(void) webViewDidFinishLoad:(UIWebView *)webView {
    [self.loadingSign stopAnimating];
    self.loadingSign.hidden = YES;
}

Zuerst die Methode webViewDidStartLoad:, die aufgerufen wird, wenn die Website beginnt zu laden. In dieser Methode starten wir die Animation des Activity Indicator Views und machen ihn sichtbar.

In webViewDidFinishLoad: machen wir das genaue Gegenteil. Wir stoppen die Animation und verstecken das Object.

Und schon sind wir fertig. Starte nun die App. Wenn der “Website anzeigen”-Button gedrückt wird, erscheint zuerst der kleine drehende Kreis, bevor die Website angezeigt wird.

5. Schluss

Du kannst das fertige Xcode-Projekt wie immer downloaden: UIWebViewTutorial

Dieses Tutorial wurde sich von einem Leser gewünscht. Du kannst mir gerne auch ein Tutorial vorschlagen. Entweder über die Kommentarfunktion oder das Kontakt-Formular.

Bei Fragen kannst Du mir gerne ein Kommentar hinterlassen. Wenn Du keine Tutorials mehr verpassen willst, abonniere einfach den Blog RSS oder folge mir auf Twitter.

Das ist Part 3 des Storyboard Tutorials in Xcode 4.2. Es geht um einen Tab Bar Controller als Detail View.
Solltest Du die anderen Teile des Tutorials noch nicht gelesen haben und dich noch nicht mit dem Storyboard auskennen, solltest Du mit Part 1 und Part 2 anfangen. Auch dieses Xcode-Projekt baut auf den anderen Tutorials auf, falls Du es also nicht mehr gespeichert hast, kannst Du es hier downloaden: Xcode-Projekt_Storyboard_Tutorial_Part_2.

Jetzt noch eine Übersicht, was Du in diesem Tutorial lernen wirst:

• Implementieren eines Detail Views einer Table View
• Implementieren eines Tab Bar Controllers als Detail View
• Arbeiten mit Segues

1. Die App

Bisher besteht unserer App nur aus einem “Hauptmenü”, über welches man zu einer Tabelle gelangt, die ein paar Spieler auflistet. Wir werden die App insofern erweitern, dass die Spieler nicht nur aus dem Namen bestehen, sondern auch weitere Attribute haben. Diese werden angezeigt, sobald man einen Spieler auswählt. Die Daten werden in zwei Kategorien aufgeteilt, die mit einem Tab Bar Controller dargestellt werden.

2. Das Model

Wir beginnen, indem wir das Model unseres Projekts erweitern. Ein Model enthält die Daten einer App, also in unserem Fall wird das eine Klasse für die Spieler in der Spielerliste sein. Wenn Du noch nichts von der MVC-Struktur (Model-View-Controller) gehört hast, kannst du dich hier einlesen (ein Beitrag darüber kommt bald).

Starte also Xcode und wähle in der Menüleiste File–>Open…, um das bestehende Projekt zu öffnen.

Wie gesagt beginnen wir mit einer Klasse für die Spieler. Eine Klasse erstellt man meist in zwei neuen Dateien. Dazu klickst Du mit der rechten Maustaste auf den Projektordner (“Tutorial6″) und wählst den Menüpunkt “New File…”. Im erscheinenden Dialog benötigen wir das Template “Objective-C class” und nicht wie im zweiten Part eine “UIViewController subclass” (wir wollen ja keinen neuen View Controller erstellen). Klicke doppelt auf das Symbol und gibt dann bei Class ”Player” ein. Achte darauf, dass bei Subclass of “NSObject” ausgewählt ist. Den Speicherort ändern wir nicht, sondern klicken gleich auf “Create”.

Bevor ich den folgenden Code erkläre, ersetze mit ihm den Code in der jeweiligen Datei:

Player.h:

#import <Foundation/Foundation.h>

@interface Player : NSObject {
    NSString *_name;
    NSNumber *_score;

    NSString *_country;
    NSString *_city;
}

@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSNumber *score;

@property (nonatomic, copy) NSString *country;
@property (nonatomic, copy) NSString *city;

-(id) initWithName: (NSString *) newName score: (NSNumber *) newScore country: (NSString *) newCountry city: (NSString *) newCity;

@end

Player.m:

#import "Player.h"

@implementation Player
@synthesize name = _name;
@synthesize score = _score;
@synthesize country = _country;
@synthesize city = _city;

-(id) initWithName:(NSString *)newName score:(NSNumber *)newScore country:(NSString *)newCountry city:(NSString *)newCity {
    self = [super init];
    if (nil != self) {
        self.name = newName;
        self.score = newScore;
        self.country = newCountry;
        self.city = newCity;
    }
    return self;
}

@end

Im Großen und Ganzen sieht so immer eine Klasse eines Models aus. Wir deklarieren in Player.h ein paar Variablen und eine Methode, mit der wir die Werte später definieren können. In Player.m wird diese Methode lediglich definiert.

Bei genauerem Betrachten stellt man allerdings fest, dass diese Klasse etwas anders aussieht. Wenn Du dir “Player.h” nochmal anschaust, wirst Du feststellen, dass die Instanzvariablen, also die Variablen zwischen den geschweiften Klammer, einen Underscore “_” haben. Das heißt mit @synthesize name = _name weisen wir der Property name die Instanzvariable _name zu. Die Erklärung ist recht simpel:
Mit @property erstellt man ja bekanntlich getter- und setter-Methoden für eine Variable. Mit der getter-Methode erhält man dann den Wert der Variable und mit der setter-Methode kann man diesen Wert ändern. Der Zugriff auf diese Methode erfolgt mit self.variable. Würde man das self weglassen, so würde man nicht auf die Property, sondern auf die Variable an sich zugreifen. Und dies wäre falsch, da man dann nicht die getter- bzw. setter-Methode verwendet. Indem man die Variable nun mit einem Underscore deklariert (bspw. _variable) und dann bei @synthesize variable=_variable schreibt, schütz man sich selbst davor, aus Versehen die Variable statt der Property zu verwenden.

Einen weiteren Unterschied kann man in “Player.h” feststellen. Hinter @property steht statt wie sonst (nonatomic, strong) oder (nonatomic, weak) diesmal copy. Ich möchte an dieser Stelle nicht allzu genau auf dieses Stichworts eingehen, da man dafür etwas tiefer in das Memory Management eintauchen müsste, was den Rahmen dieses Tutorial absolut sprengen würde. Man kann sich aber einfach merken, das man Properties vom Typen NSString, NSArray, NSDictionary, NSNumber, also Typen mit NS, meistens mit copy erstellt. Allerdings werden Properties mit Typen, die noch ein Mutable enthalten, also z.B. NSMutableArray, NSMutableDictionary etc., meistens mit strong deklariert.

Die init-Methode kommt jetzt auch gleich zum Einsatz. Deswegen müssen wir die Klasse Player in PlayerlistViewController einbinden. Schreibe Folgendes unter die erste #import-Zeile in “PlayerlistViewController.m”:

#import "Player.h"

Im vorherigen Teil haben wir die Spieler einfach in viewDidLoad als Zeichenketten, also NSStrings, deklariert und in einem Array (playerList) gespeichert. Da wir jetzt aber ein aufwendigeres Model haben, müssen wir diese Methode abändern:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.playerList = [NSMutableArray arrayWithCapacity:20];

    Player *player1 = [[Player alloc]initWithName:@"Andreas" score:[NSNumber numberWithInt:40000] country:@"Deutschland" city:@"Regensburg"];
    [self.playerList addObject:player1];

    Player *player2 = [[Player alloc]initWithName:@"Stefan" score:[NSNumber numberWithInt:35000] country:@"Deutschland" city:@"Regensburg"];
    [self.playerList addObject:player2];

    Player *player3 = [[Player alloc]initWithName:@"Alex" score:[NSNumber numberWithInt:55400] country:@"Deutschland" city:@"Regensburg"];
    [self.playerList addObject:player3];

}

Wir erstellen einfach drei verschiedene Spieler und fügen sie der Spieler-Liste hinzu. Zu beachten ist, dass obwohl wir für jedes Objekt mit alloc Speicher reservieren, wir kein einziges Mal release aufrufen. Das bleibt uns dank dem Automatic Reference Counting erspart, denn dadurch wird der Speicher automatisch freigegeben. Versuchten wir dies mit der release-Anweisung manuell zu tun, würde Xcode sogar einen Fehler auswerfen, da wir beim Erstellen des Projekts in Part 1 des Tutorials eingestellt haben, dass wir ARC benutzen wollen.

viewDidLoad ist aber nicht die einzige Methode die wir ein bisschen verändern müssen. Logischerweise ist tableView:cellForRowAtIndexPath: auch nicht mehr ganz aktuell. Ändere die Methode wie folgt:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PlayerCell"];
    Player *player = [self.playerList objectAtIndex:indexPath.row];
    cell.textLabel.text = player.name;

    // Configure the cell...

    return cell;
}

Da im Array playerList nicht mehr nur einfach NSStrings gespeichert sind, sondern Player-Objekte, müssen wir den passenden Eintrag in einem temporären Player-Objekt speichern und dann der Zelle den Spielernamen zuweisen.

Bisher haben wir die App nicht erweitert, sondern sie nur vorbereitet für den nächsten Schritt. Bevor wir zu diesem übergehen, testen wir, ob noch alles wie gehabt funktioniert. Führe dazu die App aus. Die Tabelle mit den Spielern sollte ganz normal angezeigt werden.

3. Der Tab Bar Controller

Wir wollen, dass wenn eine Tabellen-Zeile ausgewählt wird, ein Tab Bar Controller angezeigt wird. Diesen werden wir jetzt im Storyboard erstellen.

Öffne die Datei “MainStoryboard.storyboard” und suche in der Library nach dem Tab Bar Controller. Bevor du das Object in den Editor ziehst, kannst du noch herauszoomen, damit Du ein besseren Überblick hast. Ziehe den Controller am besten neben den Table View Controller.

Tipp: Wenn du im Nachhinein mehrere Controller auf einmal verschieben möchtest, kannst du mit gedrückter cmd-Taste die einzelnen Docks anklicken und die ausgewählten Elemente zusammen verschieben.

Damit das Ganze seine Ordnung hat geben wir den Tabs noch eine aussagekräftige Bezeichnung. Zoome also wieder heran und klicke im ersten View Controller doppelt auf den Text in der Tab Bar (beachte, dass du im View Controller, nicht im Tab Bar Controller, auf die Tab Bar klicken musst). Gib einfach “Spiel-Charakter” ein. Das zweite Tab Bar Item können wir im zweiten View Controller bearbeiten. Nenne es “Account”.

 Wie Du siehst ändert sich die Tab Bar im Tab Bar Controller automatisch mit.

Zunächst fügen wir den beiden View Controller noch Objects hinzu. Alles was wir benötigen sind ein paar Labels. Ziehe sie, wie in der Abbildung gezeigt, in die View Controller. Anschließend beschriften wir die Labels und ändern die Größe der rechten Labels, damit auch längere Namen in ihnen Platz haben.

Das Interface der beiden View Controller ist damit fertig.

4. Die View Controller Im Code

Als Nächstes werden wir die Dateien für die beiden View Controller erstellen. Dadurch können wir später den Text der Labels der Controller setzen, sodass Name, Höchstpunktzahl, Land und Stadt richtig angezeigt werden.

Klicke mit der rechten Maustaste auf den Projektordner und wähle “New File…”. Klicke im erscheinenden Fenster auf das UIViewController subclass-Template.(Xcode 4.2)

Xcode 4.3: Klicke im erscheinenden Fenster auf das Objective-C class-Template. Im nächsten Fenster sollte bei Subclass of ”UIViewController” ausgewählt sein.

Bei Class schreiben wir “CharacterInformationViewController”. Beachte, dass weder ein Häkchen bei “Targeted for iPad” noch bei “With XIB for user Interface”, gesetzt sein sollte. Die Subclass sollte auf “UIViewController” eingestellt sein.

Klicke auf Next und dann auf Create; wir speichern die Dateien an Ort und Stelle ab.

Wiederhole diesen Schritt (ab 4.) für einen weiteren View Controller namens “AccountInformationViewController”.

Diese Dateien müssen wir als nächstes einem View Controller im Storyboard zuweisen. Öffne wieder die Datei “MainStoryboard.storyboard”, wenn sie nicht schon geöffnet ist, und wähle den “Spiel-Charakter”-View Controller aus. Lass ihn dir dann im Identity inspector anzeigen und trage bei Class den Namen des ersten View Controllers, “CharacterInformationViewController”, ein.

Wiederhole auch diesen Schritt beim anderen View Controller.

Da wir die Labels auf der rechten Seite später im Code bearbeiten möchten, sodass sie die Informationen des Spielers anzeigen, erstellen wir Outlets für diese Labels.

Dazu stellen wir den Editor Modus mit Hilfe des mittleren Button bei “Editor” in der Tool Bar auf Assistant editor. Wähle dann im Storyboard den “Character Information View Controller” aus. Auf der rechten Seite sollte die Datei “CharacterViewController.h” im Code-Editor angezeigt werden.

Alles weitere ist jetzt ganz einfach. Wie immer klicken wir mit gedrückter ctrl-Taste auf das Object, also das “Label”-Label neben “Spieler-Name:” und ziehen den blauen Faden in den Code-Editor zwischen @interface und @end. Nenne das Outlet “nameLabel”.

Auch diesen Schritt wiederholen wir für das Label rechts neben dem Label “Höchstpunktzahl:” und die anderen, welche sich im “AccountInformationViewController” befinden. Diese Outlets werden deshalb logischerweise in “AccountInformationViewController.h” deklariert. Nenne die Outlets “scoreLabel”, “countryLabel” und “cityLabel”.

Für diese Labels sollen die Outlets erstellt werden.

Wenn Du fertig bist, stelle den Editor wieder auf Standard editor ein. Weiter geht’s. Als nächstes erstellen wir die Variablen für die Daten des Spielers. Wir deklarieren sie im CharacterInformationViewController bzw. im AccountInformationViewController. Wenn eine Zeile ausgewählt wird, können wir dann später diesen Variablen den je nach ausgewähltem Spieler passenden Wert zuweisen. Ändere die angegebenen Datei wie folgt ab:

CharacterInformationViewController.h

#import <UIKit/UIKit.h>

@interface CharacterInformationViewController : UIViewController {
    NSString *_name;
    NSNumber *_score;
}
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UILabel *scoreLabel;
@property (copy, nonatomic) NSString *name;
@property (copy, nonatomic) NSNumber *score;

@end

AccountInformationViewController.h

#import <UIKit/UIKit.h>

@interface AccountInformationViewController : UIViewController {
    NSString *_country;
    NSString *_city;
}
@property (weak, nonatomic) IBOutlet UILabel *countryLabel;
@property (weak, nonatomic) IBOutlet UILabel *cityLabel;
@property (copy, nonatomic) NSString *country;
@property (copy, nonatomic) NSString *city;

@end

Für den Namen, das Land und die Stadt erstellen wir je einen NSString und für die Höchstpunktzahl eine NSNumber. Außerdem legen wir noch die properties für die Variablen an, da wir später von außen auf sie zugreifen werden. Zu jedem @property gehört wie immer ein @synthesize. Füge deshalb folgenden Code unter die anderen @synthesize-Zeile in der jeweiligen Datei ein.

CharacterInformationViewController.m

@synthesize name=_name;
@synthesize score=_score;

AccountInformationViewController.m

@synthesize country=_country;
@synthesize city=_city;

Damit die Daten des Spielers dann auch angezeigt werden, müssen wir jetzt noch den Text der Labels setzen, bevor der View angezeigt wird. Dazu ändern wir die Methode viewDidLoad in beiden Controller ab.

CharacterInformationViewController.m

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.nameLabel.text = self.name;
    self.scoreLabel.text = [self.score stringValue];
}

AccountInformationViewController.m

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.countryLabel.text = self.country;
    self.cityLabel.text = self.city;
}

Endlich sind die beiden View Controller des Tab Bar Controllers fertig und bereit aufgerufen zu werden.

5. Eine Tabellenzeile auswählen

Nun kommen wir zum wichtigsten Teil. Wie können wir nun den Tab Bar Controller anzeigen lassen, wenn eine Tabellenzeile angetippt wird?
In älteren Xcode-Versionen haben wir dazu die Methode tableView:didSelectRowAtIndexPath: verwendet. Das ist zwar immer noch möglich, allerdings gibt es dank des Storyboards eine bessere Möglichkeit. Und zwar kommen hier die sogenannten Segues ins Spiel. Ich habe sie schon in Part 1 des Tutorials angesprochen, allerdings ohne genauer darauf einzugehen.

Bevor ich die Segues genauer erkläre, sehen wir sie uns im Storyboard an. Öffne die Datei “MainStoryboard.storyboard”. Stelle sicher, dass im Document Outline das Object Table View in der “Playerlist View Controller Scene” ausgeklappt ist, damit die Table View Cell sichtbar ist. Klicke dann mit gedrückter ctrl-Taste auf diese Table View Cell im Document Outline und ziehe den blauen Faden auf den Tab Bar Controller in der “Tab Bar Controller Scene”. Wähle im erscheinenden Menü die Option “Push”.

Daraufhin erscheint innerhalb der “Playerlist View Controller Scene” ein neues Element namens “Segue from UITableViewCell to Tab Bar Controller”. Der lange Name beschreibt einfach Ursprung und Ziel der Segue. Im Editor wird die Segue als Pfeil mit Kreis dargestellt.

Bei Segues ist es so gut wie immer sinnvoll, sie mit einem eindeutigen Identifier auszustatten. Um das zu tun, wählt man die Segue wir ein normales Objects aus, indem man im Editor oder im Document Outline darauf klickt, und öffnet dann den Attributes inspector und gib bei Identifier ”ShowPlayerDetails” ein.

Damit ist der Identifier festgelegt.

Was ist also eine Segue? Segues stellen im Storyboard den Wechsel zwischen zwei Controllern dar. Deshalb auch das Icon eine Segue:

In Part 1 haben wir eine Segue zwischen dem Button im 1. View Controller und dem Table View Controller erstellt. Das bewirkt, dass wenn der Button gedrückt wird, der Table View Controller erscheint. So ist es auch bei der neuen Segue. Sobald eine Tabellenzeile ausgewählt wird, soll der Tab Bar Controller angezeigt werden.

Einen kleinen Unterschied gibt es aber. Wir wollen, dass die Informationen des Spielers in der Tabelle in den View Controllern des Tab Bar Controllers angezeigt werden. Das bedeutet, wir müssen Daten zwischen den beiden Controllern schieben. Früher hätten wir dies innerhalb der Methode tableView:didSelectRowAtIndexPath: bewerkstelligt. Auf diese Methode werden wir diesmal aber gänzlich verzichten und stattdessen mit einer anderen Methode arbeiten: prepareForSegue:sender:.
Diese Methode wird aufgerufen, bevor der Wechsel zwischen den Controllern stattfindet. Das ist der perfekte Zeitpunkt um Daten zu schieben.

Die Methode gehört immer zum Ursprungs Controller, da sie ja noch vor der Transition, also dem Wechsel, aufgerufen wird. Das bedeutet, wir müssen sie in der Datei “PlayerlistViewController.m” definieren. Bevor wir die Methode aber definieren importieren wir noch die Header-Dateien der beiden View Controller des Tab Bar Controllers, da wir diese in der folgenden Methode benötigen. Schreibe also folgenden Code unter die anderen #import-Anweisungen in “PlayerlistViewController.m:

#import "CharacterInformationViewController.h"
#import "AccountInformationViewController.h"

Jetzt kommen wir zur eigentlichen Methode. Füge sie zu den anderen Methode in “PlayerlistViewController.m” hinzu.

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([[segue identifier] isEqualToString:@"ShowPlayerDetails"]) {
        UITabBarController *detailController = [segue destinationViewController];

        CharacterInformationViewController *detailCharacterInformationTab = [detailController.viewControllers objectAtIndex:0];
        AccountInformationViewController *detailAccountInformationTab = [detailController.viewControllers objectAtIndex:1];
        Player *player = [self.playerList objectAtIndex:[self.tableView indexPathForSelectedRow].row];

        detailCharacterInformationTab.name = player.name;
        detailCharacterInformationTab.score = player.score;
        detailAccountInformationTab.country = player.country;
        detailAccountInformationTab.city = player.city;
    }
}

Nun zur Erklärung:
Zeile 2: prepareForSegue:sender: ist eine allgemeine Methode, die für alle Segues ausgelegt ist, die von einem Controller weggehen. Das können auch mal durchaus mehrere sein. Deshalb wird in dieser Zeile festgestellt, um welche Segue es sich handelt. Da wir vorhin im Storyboard den Identifier festgelegt haben, können wir jetzt ganz einfach rausfinden, ob es sich um die richtige Segue handelt.
Zeile 3: In dieser Zeile erstellen wir einen Tab Bar Controller, der aufzurufende Controller. Um diesen Tab Bar Controller mit dem im Storyboard zu verknüpfen, verwenden wir die Methode destinationViewController des Segue-Arguments, welche uns den Ziel-Controller der Segue zurückgibt.
Zeile 5-6: Zunächst erstellen wir die Instanzen der beiden View Controller des Tab Bar Controllers. Auch diese müssen wir wieder mit dem passenden View Controller im Storyboard verbinden. Diesmal verwenden wir die Methode objectAtIndex des Tab Bar Controllers. Sie liefert uns je nach angegebenen Index den passenden View Controller innerhalb des Tab Bar Controllers. Da man in der Informatik bei 0 zu zählen beginnt, befindet sich der erste Tab auch beim Index 0, der zweite beim Index 1.
Zeile 7: Hier erstellen wir ein Player-Objekt, welches den richtigen Spieler aus der Spielerliste zugewiesen bekommt. Um das richtige Element aus dem Array playerList zu erhalten, verwenden wir [self.tableView indexPathForSelectedRow].row. Das bewirkt, dass in der Table View die vom User ausgewählte Zeile gesucht wird und deren Zeilennummer als Index im Array verwendet wird. Im Prinzip also kein großer Unterschied gegenüber dem, wenn wir mit der Methode tableView:didSelectRowAtIndexPath arbeiten.
Zeile 9-12: Hier weisen wir den Variablen, die wir vorhin innerhalb von CharacterInformationViewController und AccountInformationViewController erstellt haben, den jeweiligen Wert aus dem Player-Objekt zu. Dadurch, dass wir in den viewDidLoad-Methoden der beiden View Controller den Labeln den Wert der Variablen zugewiesen haben, werde die Spieler-Daten im Detail View richtig angezeigt.

Vielleicht fragst Du dich, wieso in dieser Methode nirgends ein neuer View Controller aufgerufen wird. Das liegt daran, dass dies das Storyboard übernimmt. Die Methode prepareForSegue:sender: “bereitet” ja nur die Transition vor. Der eigentliche Wechsel ist dann die Segue an sich.

Pfew! Jetzt erstmal kräftig durchatmen, denn wir sind soweit fertig mit unserer App. Jetzt nur noch hoffen, dass wir keinen Fehler gemacht haben und wir die App fehlerfrei ausführen können. Wenn alles passt funktioniert die App einwandfrei. Wir können einen Spieler der Tabelle auswählen und uns die Daten schön sortiert mit einer Tab Bar anzeigen lassen.

6. Schluss

In diesem Tutorial hast Du viele neue Dinge gelernt. Deswegen, wenn Du noch irgendwelche Fragen hast, ich etwas nicht ausführlich genug erklärt habe oder Du einen Fehler gefunden hast, würde ich mich freuen, wenn Du mir ein Kommentar schreibst.

Lass mich außerdem wissen, ob Du dir ein weiteres Tutorial zum Thema Storyboard wünscht. Auch über Tutorial-Vorschläge jeglicher Art freue ich mich.

Das fertige Xcode Projekt gibt’s wie immer zum Downloaden: Tutorial6_3

Wenn Du möchtest kannst du gerne die Blog RSS abonnieren oder mir auf Twitter folgen.

Einleitung

Wenn man sehr viele oder sehr große Informationen, wie beispielsweise ein hochauflösendes Bild, auf dem iPhone darstellen will, benötigt man schnell mal mehr Platz, als einem das Display bietet. Deswegen gibt es ein Object namens Scroll View. Ein Scroll View ist wie ein normaler View, nur dass man, wie auf einer Internetseite, vertikal und/oder horizontal scrollen kann. Außerdem bieten Scroll Views die Möglichkeit, an ein Bild heran oder heraus zu zoomen und vieles mehr.

Hier also eine kleine Übersicht, was du in diesem Tutorial lernen wirst:

• Implementierung eines Scroll Views
• Zoomen in einem Scroll View
• Benutzen eines Image Views

1. Die App

Die App wird eine einzelne Scene mit einem Scroll View sein. Dieser wird ein Bild mit den Maßen 320×900 enthalten, also zu groß für das Display. Um das Bild trotzdem anzeigen zu können, wird man Scrollen und Zoomen können. Los geht’s.

2. Das Interface

Öffne Xcode und klicke im Startup-Fenster auf “Create a new Xcode project”. Für das Tutorial eignet sich am besten das Single View Application-Template. Bei Product Name kannst du bspw. “UIScrollViewTutorial” eingeben. Die restlichen Projekt-Optionen sollten so wie immer sein:

Gib schließlich noch den Speicherort an und klicke auf Create.

Öffne gleich zuerst die Datei “MainStoryboard.storyboard”.
Zu Beginn benötigen wir das eigentliche Scroll View-Object. Suche es in der Library und ziehe den Scroll View so in das Fenster, dass er seine volle Größe annimmt.

Damit wir ein Bild in unseren Scroll View einfügen können, benötigen wir einen Image View. Den findest Du in der Library in der Nähe des Scroll Views. Ziehe ihn auf den Scroll View,  sodass er den ganzen View bedeckt.

Achte darauf, dass er innerhalb des Scroll Views liegt. Das kannst du im Document Outline links im Storyboard Editor überprüfen:

Bis jetzt ist der Image View genauso groß wie das Display. Da wir aber wissen, dass unser Bild die Maße 320×900 haben wird, können wir den Image View gleich auf diese Größe einstellen. Wähle ihn aus, indem Du im Document Outlet auf ihn klickst, und lass ihn dir im Size inspector anzeigen (das ist der 2. Button von rechts). Dort änderst Du den Wert über Height auf 900. Die Breite stimmt bereits:

Jetzt müssen wir den Image View noch so hinschieben, dass seine obere Kante auf der oberen Kante des Scroll Views liegt.

So befindet sich nämlich der obere Teil des Bildes auch im oberen Teil des Scroll Views.

Nun fehlt nur noch das Bild. Du kannst ein eigenes benutzen oder einfach das Beispielbild downloaden: Image.png. Man merkt, dass ich ein wahrer Grafik-Virtuose bin .

Nachdem Du es geladen hast, ziehe es einfach vom Download-Folder in den Ordner ”Supporting Files” im Project navigator. Wenn Du die Maustaste loslässt, erscheint ein Dialog. Es ist wichtig, dass dort der Haken bei “Copy items into destination group’s Folder (if needed)” gesetzt ist. Ansonsten würde nur eine Referenz der Datei erstellt werden, was später eventuell zu Problemen führt:

Klicke auf Finish um den Dialog zu schließen.

Jetzt, da das Bild importiert ist, ist es ganz einfach dieses in den Image View zu bekommen. Stelle sicher, dass der Image View angewählt ist und öffne den Attributes inspector. Gleich die erste Eigenschaft heißt Image. Gib dort den Namen des Bildes ein (mit Dateiendung).

Daraufhin erscheint das Bild auch schon im View.

Wenn wir die App nun einfach mal ausführen und versuchen mit einem Mauswisch zu scrollen, stellen wir fest, dass es nicht geht. Das liegt daran, dass der Scroll View nicht weiß, wie groß sein Inhalt ist, also wie weit er scrollen können muss. Um ihm das mitzuteilen, müssen wir ein paar Zeilen Code schreiben.

3. Der Scroll View im Code

Zuerst bleiben wir aber noch im Storyboard-Editor. Wir benötigen nämlich das Outlet des Scroll Views, damit wir mit ihm im Code arbeiten können.

Teile deswegen den Editor Bereich in zwei Teile (mit dem mittleren Button von Editor in der Tool Bar) und vergewissere dich, dass im rechten Bereich die Datei “ViewController.h” angezeigt wird. Dann klicke mit gedrückter ctrl-Taste auf den Scroll View im Document Outline und ziehst den blauene Faden unter die @interface-Zeile im Code-Editor:

Nenne das Outlet “scrollView” und klicke auf Connect.

Stelle die Ansicht wieder auf Standard editor um und öffne die Datei “ViewController.m”.
Da wir die Größe des Inhalts des Scroll Views am besten noch vor dem Erscheinen des Views einstellen, bearbeiten wir die Methode viewDidLoad:

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    scrollView.contentSize = CGSizeMake(320, 900);
}

Hinweis: Die Methode viewDidLoad wird aufgerufen, wenn der View aus dem Storyboard geladen wurde. Das ist ein günstiger Zeitpunkt, um Änderungen am View vorzunehmen.

Es ist leicht verständlich, was hier passiert. Wir setzen die contentSize, also die Größe des Inhalts, des Scroll Views auf die ungefähren Ausmaße des Image Views.

Führe die App erneut aus, um zu sehen, ob man nun scrollen kann. Wenn man jetzt mit gedrückter Maustaste die Maus bewegt, wird gescrollt. Jetzt fehlt nur noch das Zoomen.

4. Zoomen

Die Implementierung der Zoom-Funktion ist recht simpel. Wir benötigen allerdings das UIScrollViewDelegate. Dieses enthält, genauso wie bspw. das UITextFieldDelegate, zusätzliche Methoden. Eine davon benötigen wir.

Um das UIScrollViewDelegate einzubinden, öffne die Datei “ViewController.h” und ändere die @interface-Zeile wie folgt ab:

@interface ViewController : UIViewController <UIScrollViewDelegate>

Wie bei jedem Delegate müssen wir nur den Namen in spitzen Klammern hinter die Klasse schreiben. Und wie bei jedem Delegate müssen wir es noch mit einem Object im Storyboard-Editor verbinden, dem Scroll View.

Öffne also wieder die Datei “MainStoryboard.storyboard” und wähle den Scroll View aus. Öffne dann den Connections inspector und ziehe den blauen Faden von delegate auf das View Controller-Object im Document Outline.

Das Delegate wird automatisch verbunden und jetzt weiß Xcode, zu welchem Object im Storyboard das Delegate gehört.

Wir bleiben gleich im Storyboard-Editor, um eine weitere Einstellung vorzunehmen. Und zwar können wir ganz einfach den minimalen und maximalen Zoom im Scroll View einstellen, welche beide standardmäßig auf 1 stehen.

Öffne also den Attributes inspector und ändere die Werte bei Zoom Min bzw. Max auf -5 und 5.

Nun müssen wir noch ein weiteres Outlet erstellen, welches wir später benötigen werden. Das Outlet des Image Views.

Teile den Editor-Bereich wieder in zwei Teile, indem Du die Ansicht auf Assistant editor (wieder der mittlere Editor-Button in der Tool Bar) einstellst, und ziehe, wie beim Scroll View, den blauen Faden vom Image View in den Code-Editor unter das erste Outlet.

Gib dem Outlet den Namen image und klicke auf Connect. Hier sind wir fertig; stelle also wieder auf Standard editor um.

Jetzt fehlt nur noch der letzte Schritt: Die Zoom-Methode. Öffne die Datei “ViewController.m” und füge folgende Methode unter der geschweiften Klammer von viewDidLoad ein:

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    return self.image;
}

In dieser Methode legen wir fest, an welches Object herangezoomt wird. Dazu geben wir das Outlet des Image Views mit der return-Anweisung zurück.

Hinweis: return …; gibt ein Objekt an diejenige Instanz “zurück”, welche die Methode aufruft. Welcher Art das zurückgegebene Objekt sein muss, steht in den runden Klammen, vorne im Funktionskopf; also bei dieser Methode “UIView”. Da ein UIImageView eine Subclass also eine “Unterkategorie”, des UIViews ist, können wir auch das image-Outlet zurückgeben. Methoden bei denen void in den Klammern steht, benötigen keine return-Anweisung.

Jetzt ist unsere App fertig. Führe sie aus, um zu sehen, ob alles funktioniert.
Jetzt braucht es nur noch ein letzte Hürde zu bewältigen: Wie zoomt man im Simulator? Nun, da einem nur ein Mauszeiger zur Verfügung steht, man zum Zoomen auf dem iPhone aber zwei Finger benötigt, hat sich Apple etwas einfallen lassen. Wenn man im iOS Simulator die alt-Taste gedrückt hält, erscheinen zwei Punkte mit denen man zoomen kann.

(Ich kann leider bei gedrückter Alt-Taste kein Bildschrimfoto aufnehmen, deshalb habe ich versucht es nachzumachen)

5. Schluss

Das fertige Xcode-Projekt gibt’s wie immer zum Downloaden: UIScrollView Tutorial – Scrollen und Zoomen

Dies ist ein Tutorial-Wunsch eines Lesers. Falls Du selbst eines vorschlagen möchtest, kannst du einfach ein Kommentar hinterlassen oder mich kontaktieren. Allerdings kommen ziemlich viele Vorschläge rein, weshalb es immer ein wenig dauern kann bis das Tutorial schließlich rauskommt.

Wenn du noch irgendwelche Fragen oder Kritikpunkte hast, gib mir einfach über die Kommentarfunktion Bescheid. Möchtest Du keine weiteren Tutorials verpassen, dann abonniere einfach den Blog RSS oder folge mir auf Twitter. Wenn dir das Tutorial gefallen hat, würde ich mich freuen, wenn du es verbreitest oder mit anderen teilst.

Hinweis: Das ist ein Update des Einsteiger-Tutorials, da das andere nicht mehr ganz aktuell ist.

Einleitung

Im App Store gibt es mittlerweile schon 500.000 Apps für iPhone, iPad und iPod touch. Das ist nicht zuletzt den vielen kleinen App Schmieden und Ein-Mann-Unternehmen zu verdanken, die ihre App-Ideen in die Tat umsetzen. Da kommt man natürlich in die Versuchung es selbst einmal zu probieren: Eine eigene App programmieren.

Natürlich ist es nicht so einfach, wie es jetzt vielleicht erscheint. Schon in eine kleine App muss viel Arbeit, Zeit und Nerven investiert werden, um sie App Store tauglich zu machen.

1. Was benötige ich um eine App zu entwickeln?

• Einen Mac: Die Software, mit welcher Apps entwickelt werden, läuft nur auf einem Macintosh Computer mit Betriebssystem Mac OS.
• Das neueste Betriebsystem Mac OS X Lion: Nur unter diesem Betriebssystem kann mit der neuesten Version der Entwicklungsumgebung gearbeitet werden. Es wird mit jedem neuen Mac mitgeliefert.
• Xcode: Dies ist die bereits erwähnte Entwicklungsumgebung (engl. IDE für Integrated development environment), also die Software mit der Apps entwickelt werden. Xcode lässt sich wie ein normales Programm im Mac App Store kostenlos laden und installieren. Mit dem Download erhältst du das komplette iOS SDK (Software Development Kit), das weitere Programme, eine Dokumentation uvm. enthält.
• Englischkenntnisse: Die Fachsprache der Informatik ist Englisch. Die meisten Ressourcen, Foreneinträge und auch die SDK-Dokumentation von Apple ist auf englisch. Ein gewisser Grundwortschatz ist deshalb durchaus von Nöten.

2. Was benötige ich nicht?

• Ein(en) iPhone/iPad/iPod touch: Wer Apps entwickeln will hat zwar meist eine iDevice, aber diese ist dank dem iPhone Simulator (Genaueres gibt’s später) nicht notwendig. Ich erwähne gleich, dass man, ohne dem Apple Developer Program beigetreten zu sein, die Apps gar nicht auf seinem eigenen Gerät laufen lassen kann.
• Das Apple Developer Program: Jeder der seine fertige App im App Store anbieten möchte, muss diesem Program beitreten. Außerdem erhält man erst so die Möglichkeit, die App auf dem eigenem Gerät zu testen. Allerdings ist diese Program für Einsteiger keine Notwendigkeit. Die eigenen Apps lassen sich ganz einfach auf einem virtuellen iPhone/iPad auf dem Mac ausführen. Ich empfehle jedem erstmal in die iOS App Entwicklung “rein zu schnuppern” und erst dann, vielleicht wenn man schon die ein oder andere kleine App programmiert hat, dem Program beizutreten, zumal dies 99$ im Jahr kostet .

3. Xcode

Bevor wir zu programmieren beginnen, sehen wir uns die IDE, Xcode, genauer an. Nachdem du sie downgeloadet und installiert hast, erscheint das Icon von Xcode, der Hammer, der auf einer blauen Zeichnung liegt, im Dock. Sobald wir das Programm öffnen erscheint ein kleines Fenster.

Auf der rechten Seite würde man später mal die aktuellsten Xcode-Projekte sehen, also die, die man zuletzt geöffnet hat. Unter “Welcome to Xcode” steht die Versions-Nummer der installierten Version. Darunter wiederum befinden sich einige Links. Ganz unten gelangt man zu Apples Developer portal, wo man online die SDK-Dokumentation und andere Ressourcen findet. Mit dem Link darüber startet der User Guide für Xcode. Interessant für uns ist vorallem der erste Link. Damit erstellen wir ein neues Xcode-Projekt. Klicke den Link an. Daraufhin öffnet sich ein größeres Fenster mit einem weiteren Dialog.

In diesem Fenster können wir ein Projekt-Template auswählen. Ein Template ist eine Vorlage, mit der wir unsere App erstellen. Soll das erste Fenster der App eine Tabelle enthalten, so wählt man das Master-Detail Application-Template, welches eine funktionsfähige App mit einer leeren Tabelle darstellt. In die Tabbed Application ist bereits eine Tab Bar eingebaut, die Single View Application enthält schon ein einzelnes erstes Fenster usw.

In der linken Seitenleiste siehst du die verschiedenen Kategorien. Diese enthalten noch weitere Templates. Die Kategorien sind unterteilt in iOS und Mac OS X. Man ist also, ohne weitere Programme zu installieren, in der Lage, nicht nur für iOS, sondern auch für Mac OS zu entwickeln. In unserem Fall bleiben wir allerdings bei iOS.

Für dieses Tutorial wählen wir das Single View Application-Template. Im nächsten Fenster können wir unserem Projekt einen Namen geben. Gib diesen bei Product Name ein. Es ist zwar für die App nicht von Belangen, aber ich empfehle den gleichen Product Name zu wählen wie ich, sodass die Ordner die gleichen Namen haben. Ich nenne das Projekt “Tutorial_1″. Das einzige was noch wichtig ist, ist dass bei Device Family der Wert auf iPhone steht und der Haken nur bei Use Storyboard und Use Automatic Reference Counting gesetzt ist. So oder so ähnlich sollten die Projekt-Optionen aussehen:

Klicke auf Next und wähle nun den Speicherort für das Projekt. Ich habe mir einen extra Ordner für die App-Entwicklung im Benutzer-Ordner angelegt, in dem ich auch alle Xcode-Projekte speichere, dass kann aber jeder selbst entscheiden. Wenn du fertig bist, klicke auf Create.

Jetzt ist das Projekt erstellt und wir können nun mit Xcode arbeiten.

Sehen wir uns den IDE genauer an:

1. Das ist die linke Seitenleiste. Am oberen Rand dieser Leiste findest du 7 verschiedene Buttons. Alle stehen für einen navigator. Wählst du einen anderen Button, erscheint ein anderer navigator. Der erste Button ist für den Project navigator (die Funktion eines Buttons wird sichtbar, wenn du mit der Maus auf ihm verweilst). Im Project navigator siehst du, aus welchen Dateien unser Xcode-Projekt aufgebaut ist. Ganz oben befindet sich die Projekt-Datei. Diese enthält den für uns wichtigsten Ordner, mit dem Namen “Tutorial_1″. In ihm liegen alle Dateien, mit denen wir beim Programmieren hauptsächlich arbeiten.
   Im Project navigator können wir also Dateien auswählen. Zu den anderen navigators komme ich zu gegebener Zeit.
2. Das ist der Editor-Bereich. Hier können die im Project navigator ausgewählten Dateien bearbeitet werden. Je nach Dateityp sieht dieser Bereich anders aus. Ein Blick in die Seitenleiste bzw. auf den oberen Rand des Fenster zeigt uns, dass die Projekt-Datei “Tutorial_1.xcodeproj” ausgewählt ist. Allerdings werden wir an dieser Datei vorerst nichts ändern. Deshalb öffne einfach mal die Datei “MainStoryboard.storyboard”. Im Editor-Bereich erscheint nun der sogenannte Storyboard-Editor.

3.   Die rechte Seitenleiste: Genauso wie der Editor-Bereich sieht die rechte                  Seitenleiste je nach angewählter Datei anders aus. Sie wird hauptsächlich bei Dateien mit der Endung .storyboard benötigt, also wenn der Storyboard-Editor geöffnet ist (wie im Bild gezeigt).
Sie ist in zwei Teile unterteilt: Unten befindet sich die Library, oben die verschiedenen inspectors. Die Library enthält Objekte, mit denen wir das Aussehen, das Interface, der App basteln können (was wir später auch tun werden). Dazu zieht man die Objects aus der Library in den Storyboard-Editor. Dann können diese Objects in den inspectors bearbeitet werden.
4.  Am oberen Rand des Fenster befindet sich die Toolbar. Sie enthält verschiedene Buttons, auf die man schnell Zugriff haben will. Die genaueren Funktionen der Buttons werde ich zu gegebener Zeit erläutern.

Wie ich weiter oben bereits erklärt habe, ist ein Template schon eine funktionsfähige App. Da wir das Single View Application-Template gewählt haben, enthält unsere App bereits ein erstes leeres Fenster. Bevor wir also zu programmieren beginnen, führen wir die unveränderte App einfach mal aus. Hier kommt nun der iPhone-Simulator ins Spiel. Um die App testen zu können verwenden wir kein echtes iPhone, sondern ein virtuelles auf dem Bildschirm unseres Computers. Um die App zu starten, klicken wir in der Toolbar auf den Button mit dem schwarzen Dreieck, unter dem Run steht. Jetzt wird das Projekt kompiliert. Das bedeutet der Code wird in Computer-Sprache übersetzt und dann eine richtige iPhone-App daraus gemacht. Den Fortschritt des Compilers (das was kompiliert) sehen wir in dem kleinen blau-grauen Fenster in der Toolbar. Ist er fertig so öffnet sich ein weiteres Programm, der Simulator:

Wie Du siehst besitzt diese App noch keinerlei Funktion. Klicke mit der Maus auf den Home Button um die App zu beenden. Der iOS Simulator sieht nicht nur wie ein iPhone aus, sondern hat auch ähnliche Funktionen. Wir können mit einer Wischgeste durch den Home-Bildschrim navigieren oder könnten sogar mit Safari ins Internet gehen. Nun aber beginnen wir erstmal damit, unserer App eine Funktion zu verleihen. Dazu begeben wir uns zurück zu Xcode und klicken in der Toolbar auf den Button mit dem kleinen, schwarzen Quadrat, um die App ganz zu beenden.

4. Das Interface gestalten

Jede App besteht aus Objekten, mit denen der User agieren kann. Sie bilden das Interface, also das Aussehen. Das können Buttons, Textfelder, uvm. sein. Diese Objekte habe ich bereits angesprochen, als es um die Library in der rechten Seitenleiste ging. Jetzt wollen wir diese verwenden um das Interface unserer App zu erstellen.

Die App soll eine ganz banale Funktion haben. Der User gibt in ein Textfeld seinen Namen ein, klickt auf einen Button und wird höflich begrüßt.

Das Interface einer App wird einer Storyboard-Datei bearbeitet. Diese ist bereits geöffnet:

Hier sehen wir auch gleich das bisherige Aussehen der App: ein weißer Bildschirm. Genau dieser wurde gezeigt, als die App im iOS-Simulator lief. Dieser weiße Bildschirm, den wir im Editor sehen, ist ein sogenannter View. Dieser View wird in einem View Controller aufbewahrt. Unter dem weißen View ist eine schwarze Leiste, das Dock, in dem die Art des Controllers steht. Dieser ist ein View Controller, also ein Controller der einen View enthält (es gibt noch andere Controller). Der (View) Controller bildet zusammen mit einem oder mehreren anderen Objekten, die erstmal nicht wichtig sind, eine Scene.  Die meisten Apps enthalten mehr als nur eine Scene. Da gibt es dann eine Scene für das Hauptmenü, darüber gelangt man zum Beispiel zu einer Scene mit einer Tabelle und von dieser in eine Scene mit weiteren Informationen. Damit man nicht den Überblick verliert, gibt es das Document Outline, das sich auf der linken Seite des Editor-Bereichs, rechts neben der linken Seitenleiste, befindet. Im Document Outline werden alle Scenes untereinander angezeigt. Wenn wir uns die bisherige Scene einmal genauer anschauen, wird der Aufbau dieser noch einmal klarer:

Die “View Controller Scene” wird unterteilt in ein First Responder Objekt (meist nicht wichtig) und den View Controller. Klickt man auf den kleinen grauen Pfeil neben dem View Controller, so wird der View sichtbar, den er enthält.

So jetzt geht’s los. Unsere App soll aus einem Textfeld, einem Button und einem Text bestehen. All diese Objects finden wir in der Library. Scrolle runter bis du das Object Text Field siehst. Für mehr Übersicht kannst du die Library etwas vergrößern:

Ziehe es aus der Library in den View im Editor-Bereich. Mache das gleiche mit eine Round Rect Button und einem Label:

Um die Objects anzuordnen, ziehen wir sie einfach an den gewünschten Platz. Blaue Linien helfen dabei, die Mitte bzw. den empfohlenen Abstand zum Rand des Views zu finden. Ordne die Objects wie folgt an:

Alle drei Objects sind leider noch etwas zu klein. Klicke deshalb zuerst den Button einmal an, sodass kleine Anfasser erscheinen. Ziehe ihn ein bisschen nach links in die Länge. Als nächstes wählst Du das Textfeld aus und ziehst es bis zum empfohlenen Abstand vom Rand. Das gleiche machst du mit dem Label.

So weit so gut. Zunächst wollen wird das Textfeld ein bisschen abändern. Klicke es dazu einmal an. Jetzt kommt zum ersten Mal ein inspector ins Spiel. Klicke in der rechten Seitenleiste auf den vierten Button von links. Der Attributes inspector wird angezeigt.

Je nachdem welches Object im View ausgewählt ist, können hier andere Einstellungen bearbeitet werden. Den Wert, den wir beim Textfeld abändern möchten, ist der des Placeholders. Der Placeholder ist ein Text, der bevor etwas eingegeben wird schon im Textfeld steht und bei der Eingabe verschwindet. Schreibe als Wert “Gib hier deinen Namen ein” hinein. Jetzt ist im Textfeld im View schwach der Text zu sehen.

Zunächst ändern wir noch den Text des Labels. Wir könnten dies, wie beim Textfeld, im Attributes inspector bewerkstelligen, allerdings geht es beim Label auch einfacher. Klicke doppelt auf das Label und gib den folgenden Text ein: “Wie heißt du?”. Genauso funktioniert auch das Beschriften des Buttons. Nenne den Button “Fertig”.

Führen wir nun die App noch einmal aus. Klicke dazu wieder auf den Run-Button. Wir können sogar schon etwas in das Textfeld eingeben. Wenn wir auf den Button klicken, passiert allerdings noch nichts. Das werden wir gleich ändern…

Damit ist das Interface unserer App fertig. Jetzt geht’s ans Programmieren.

5. Eine funktionierende App programmieren

Was jetzt noch fehlt ist, dass etwas passiert wenn man den Button drückt. Dazu erstellen wir eine Methode im Code. Diese Methode wird also aufgerufen, wenn der Button gedrückt wird und führt dann eine Reihe von Befehlen aus. Da in dieser Methode das Label und das Textfeld vorkommen, müssen wir diese Objects im Code repräsentieren. Dazu verwendet man ein Outlet. Ändert man im Code etwas am Outlet, so ändert sich im MainStoryboard etwas am Object des Views. Erstellen wir also zuerst die zwei Outlets.

Wir bleiben dazu in der Datei MainStoryboard.storyboard. Allerdings teilen wir den Editorbereich in zwei Teile. Dazu benötigen wir einen weiteren Button in der Toolbar, den Button für den Assistant editor.

Um trotz der zwei Teile alles im Blickfeld zu haben, kannst du das Xcode-Fenster größer ziehen oder mit dem Button in der rechten oberen Ecke in den Vollbildmodus wechseln.

Auf der rechten Seite im Editor-Bereich ist der Code-Editor geöffnet. Er zeigt die Datei “ViewController.h”. Diese Datei gehört zur Scene, die wir vorhin im Storyboard-Editor bearbeitet haben und die jetzt auf der linken Seite zu sehen ist. Die Dateien “ViewController.h” und “ViewController.m” stellen also den Code einer Scene dar. Bei mehreren Scenes braucht man auch mehrere Dateien.
Um jetzt die Outlets des Textfeldes und des Labels zu erstellen, benötigen wir wieder das Document Outline. Dir ist vielleicht schon aufgefallen, das innerhalb des View-Objects jetzt die drei anderen Objects erschienen sind. Um das Outlet des Labels zu erstellen, klickst du mit gedrückter ctrl-Taste auf das Label im Document Outlet und ziehst den erscheinenden blauen Faden in den Code-Editor, über die Zeile @end. Das Bild zeigt das nochmal:

Daraufhin erscheint eine kleine Sprechblase, in der wir nur den Namen des Outlets angeben müssen. Nenne es “label”. Achte darauf, dass du “label” klein schreibst! Klicke dann auf Connect.

Wiederhole diese Schritte  beim Textfeld und nenne das Outlet “textfield” (Achtung: englisch).

Die Datei ViewController.h sollte dann so aussehen:

Dass die Verbindungen zwischen diesen Outlets und den Objects im Storyboard wirklich existieren, können wir im Connections inspector sehen. Wähle zuerst den View Controller aus, indem du auf das schwarze Dock klickst und klicke dann auf den letzten Button in der rechten Seitenleiste für den Connections inspector.

Dort sieht man, dass eine Verbindung zwischen textfield im Code und Text Field – … in MainStoryboard.storyboard existiert. Das gleich beim Label. Damit sind die Outlets fertig.

Jetzt kommen wir zur Methode, die aufgerufen werden soll, wenn der Button gedrückt wird. Eine Methode ist wie gesagt eine Aneinanderreihung von Befehlen. Die Befehle, die in unserer Methode ausgeführt werden, sind zuerst den Namen des Users im Textfeld zu ermitteln und ihn dann in eine Begrüßungsformel wie “Herzlich Willkommen [hier wird der Name eingefügt]!” einzufügen. Dann wird dieser Begrüßungstext dem Text-Label zugewiesen, sodass es die Begrüßung anzeigt.

Im MainStoryboard.storyboard gibt es für jeden Button eine Event, der aufgerufen wird, wenn dieser Button gedrückt wird. Diesen Event müssen wir, wie bei den Objects, im Code repräsentieren. Um dies zu tun, bleiben wir gleich im Assistant editor-Modus. In der rechten Seitenleiste sollte weiterhin der Connections inspector angezeigt werden. Wähle dann den Button im View aus. Eine Unterteilung im Connection inspector heißt “Sent Events” und darunter finden wir den Event “Touch Up Inside”. Klicke in den kleinen Kreis rechts daneben und ziehe den blauen Faden wieder in den Code-Editor, über @end aber unter die Outlets:

Wir nennen unsere Methode doneButtonPressed. Und das war’s auch schon. Sobald der Button den Event Touch Up Inside erfährt, ruft er unsere Methode doneButtonPressed auf. Jetzt fehlt nur noch, dass wir angeben, was in dieser Methode passiert.

Zunächst aber verlassen wir den Assistant editor-Modus und wählen wieder den Standard editor; das ist der Button links daneben.

Öffne jetzt die Datei ”ViewController.m“. Dort befindet sich bereits unsere Methode, ganz unten, am Ende der Datei:

Noch ist sie leer, das werden wir aber gleich ändern. Ersetze die Methode (im Bild das Rotmarkierte) durch Folgendes:

- (IBAction)doneButtonPressed:(id)sender {
    NSString *textfieldText = textfield.text;
    NSString *helloMessage = [NSString stringWithFormat:@"Herzlich Willkommen %@", textfieldText];
    label.text = helloMessage;
    textfield.text = NULL;
}

• Zeile 2: NSString ist eine Variable, in der Text gespeichert werden kann. Wir speichern in der Variable textfieldText von ebendiesem Typ den Namen aus dem Textfeld.
• Zeile 3: Dann erstellen wir einen weiteren NSString, der den gesamten Begrüßungstext darstellt. In die Zeichenkette “%@” wird die dahinterstehende Variable, textfieldText, eingesetzt.
• Zeile 4: Der Text wird dem Label zugewiesen.
• Zeile 5: Der eingegebene Name wird aus dem Textfeld wieder gelöscht.

Die Methode ist fertig und der Fertig-Button damit funktionstüchtig. Probieren wir die App erneut aus. Starte sie über den Run-Button. Nebenbei erwähnt: Du kannst zum Eingeben deines Namens auch die Tastatur deines Computers verwenden.

Ganz fertig sind wir aber noch nicht. Versucht der User die Tastatur über return zu schließen, so tut sich nichts. Das liegt daran, dass wir dem Textfeld nicht gesagt haben, dass es die Tastatur bei return schließen soll.

Bevor wir weiterarbeiten sollten/könnten wir die App noch mit dem “Stop”-Button in der Toolbar beenden. Das möchte ich nun aber absichtlich nicht tun, um zu zeigen, dass es auch so funktioniert. Kehre einfach zu Xcode zurück, um weiterzumachen.

Damit die return-Taste funktioniert, benötigen wir eine weitere Methode. Diese unterscheidet sich ein wenig von der Methode doneButtonPressed:. In wiefern sehen wir gleich.

Öffne zuerst die Datei “ViewController.h”.  Dort befindet sich die Deklaration der Methode doneButtonPressed:. Bei der Deklaration wird der Name der Methode festgelegt. Vorhin haben wir diese dann in “ViewController.m” definiert, indem wir angegeben haben, was in ihr passiert. Die Methode zum Schließen der Tastatur, sie heißt textFieldShouldReturn:, muss auch deklariert und definiert werden. Allerdings ist dies eine Methode die uns Apple vorgegeben hat und der Apple bereits einen Namen gegeben, also sie deklariert, hat. Und zwar fand die Deklaration im TextFieldDelegate statt. Ein Delegate ist eine Sammlung von Methoden, die wir verwenden können und sie so abändern, dass sie unseren Ansprüchen genügt. Das heißt definieren müssen wir diese Methode, deklariert ist sie schon. Damit Xcode bei der Definition weiß, wo textFieldShouldReturn deklariert wurde, müssen wir dieses Delegate in unsere ViewController-Dateien einbinden. Das machen wir indem wir hinter die Zeile @interface ViewController : UIViewController noch etwas dazuschreiben:

<UITextFieldDelegate>

Jetzt können wir die Methode definieren. Öffne dazu wieder die Datei “ViewController.m”.
Füge den folgenden Code direkt über @end ein bzw. nach der schließenden geschweiften Klammer von doneButtonPressed:

-(BOOL) textFieldShouldReturn:(UITextField *)textField {
    if (textField == self.textfield) {
        [textField resignFirstResponder];
    }
    return TRUE;
}

Neben dem Methodennamen textFieldShouldReturn: befindet sich ein sogenanntes Argument. Dieses heißt ähnlich wie unser Textfield-Outlet textfield, ist aber nicht das selbe. Beim Aufruf der Methode, wenn der Return-Button gedrückt wird, wird in dieser Variable gespeichert, zu welchem Textfeld die Tastatur gehört. Dann können wir mit einer if-Bedingung überprüfen, ob die Methode von unserem Textfeld aufgerufen wurde (eigentlich ist das in unserem Fall hinfällig, da wir nur ein Textfeld haben). Dann rufen wir mit der Variable textField die Methode resignFirstResponder auf, welche die Tastatur schließt. Mit return TRUE geben wir an, dass alles einwandfrei geklappt hat. Damit haben wir die Methode definiert.

Zuletzt müssen wir Xcode noch im Storyboard mitteilen, bei welchem Textfeld die Tastatur bei return geschlossen werden soll. Das machen wir, indem wir das TextfieldDelegate mit dem Textfeld verbinden. Dazu benötigen wir wieder die Datei für das Interface, MainStoryboard.storyboard.

Wähle im Editor das Textfeld aus und lass es dir im Connections inspector anzeigen:

Jetzt kommt etwas, das so ähnlich ist wie das, was wir schonmal gemacht haben. Wir verbinden etwas aus dem Storyboard mit etwas im Code: Wie du siehst gibt es im Connections inspector einen Unterpunkt namens delegate. Dieses delegate vom Textfeld können wir mit dem UITextFieldDelegate verbinden. Ziehe den blauen Faden dafür auf das View Controller Objekt, wie du es hier im Bild siehst:

Damit sind wir schlussendlich fertig mit der App. Jetzt wollen wir sie erneut ausführen. Wie gesagt wollten wir ausprobieren, was passiert, wenn man die App nicht stoppt, nachdem man im Simulator fertig ist. Starte sie mit einem Klick auf Run.

Daraufhin erscheint ein kleines Fenster unter der Toolbar:

Klicke auf Stop, um die App normal auszuführen.

In der fertigen App lässt sich nach der Eingabe die Tastatur schließen.

5. Zusammenfassung

Fassen wir nochmal grob zusammen, was Du in diesem Tutorial gelernt hast:

• Im Storyboard kannst Du das Interface der App bearbeiten
• Um im Code mit einem Object aus dem Storyboard zu arbeiten, musst du davon ein Outlet erstellen
• Mit dem Event Touch Up Inside und einer passenden Methode können wir festlegen, was passiert, wenn ein Button gedrückt wird
• Damit sich die Tastatur eines Textfeldes bei return schließt, benötigen wir eine Methode aus dem UITextFieldDelegate namens textFieldShouldReturn:

6. Schluss

Das Xcode Projekt der App kannst du hier downloaden: Einsteiger_Tutorial_deutsch-Eine_Eigene_App. Wirf nochmal einen Blick darauf, falls Du dir nicht sicher bist, wo welches Codeschnipsel hingehört.

Jetzt hast du deine erste eigene App programmiert. Mit einer kleinen App wie diesen fängt jeder Entwickler einmal an. Ich werde diese Tutorial-Serie fortführen und später auch fortgeschrittenere Themen behandeln.

Wenn du noch irgendwelche Fragen, Vorschläge oder Kritikpunkte hast, kannst Du mir gerne ein Kommentar hinterlassen. Möchtest Du keine weiteren Tutorials verpassen, so abonniere einfach den Blog RSS  oder folge mir auf Twitter. Wenn dir das Tutorial gefallen hat, kannst du es gerne verbreiten und mit anderen teilen.

Hier ist Part 2 des Storyboard Tutorials in Xcode 4.2. Im letzten Tutorial haben wir schon die ersten View Controller erstellt und diese miteinander verbunden. Diesmal werden wir einen Table View Controller hinzufügen. Leider kommen wir in diesem Part nicht ganz ohne eine Zeile Code aus . Dieser Part baut übrigens direkt auf Part 1 auf, also solltest du diesen vorher gelesen haben: iPhone SDK Tutorial deutsch 6 – Storyboard Part 1 – Grundlagen

1. Das alte Projekt öffnen

Du kannst für dieses Tutorial einfach das Projekt des letzen Tutorials weiterverwenden. Wenn du dieses nicht mehr hast, kannst du es hier downloaden: iPhone_SDK_Tutorial_deutsch_6-Storyboard_Part_1-Grundlagen
Öffne die Projekt-Datei (z.B. “Tutorial6.xcodeproj”) in Xcode.

2. Table View Controller hinzufügen

Das letzte Mal haben wir schon einen normalen View Controller hinzugefügt. Den können wir nun leider nicht mehr gebrauchen. Wähle ihn also an (den ganz rechten), indem du das schwarze Dock anklickst, und drücke die Backspace-Taste um ihn zu entfernen. Als nächstes fügen wir den Table View Controller hinzu. Ziehe also das Table View Controller-Object aus der Library neben den Hauptmenü-View-Controller. Jetzt verbinden wir die beiden Controller, indem wir wieder mit gedrückter ctrl-Taste auf den Spieler-Liste-Button im Hauptmenü-View-Controller klicken und den blauen Faden auf den Table View Controller ziehen.

Im erscheinende kleinen, schwarzen Fenster wählst du Push. Wie schon in Part 1 bleibt der Navigation Controller damit erhalten. Damit alles übersichtlich bleibt, ändern wir den Titel der Navigation Bar im Table View Controller auf “Spieler-Liste”, indem wir die Navigation Bar dort doppelt klicken. Führe die App nun einmal aus, um zu sehen, ob der Wechsel zwischen den Views einwandfrei funktioniert.

3. Prototype Cells

Jetzt füllen wir unsere Tabelle mit Inhalt. Dazu verwenden wir einen vorgegebenen Zellenstil. Bevor wir dies allerdings tun, sehen wir nach, warum uns Xcode eine Warnung anzeigt. Klicke dazu auf das gelbe Dreieck im kleinen grauen Fenster in der Toolbar

Daraufhin erscheint in der linken Seitenleiste die Warnung.

“Unsupported Configuration – Prototype table cells must have reuse identifiers”

Die Warnung bedeutet, dass wir eine Table View mit Table View Cells benutzen, ohne diese Cells richtig konfiguriert zu haben.
Um dies zu ändern wähle die einzige Zeile in der Table View an und lass sie dir im Attributes inspector anzeigen. Zuerst setzen wir den Style auf Basic und wählen bei Accessory den Detail Disclosure. Wichtig ist, und darüber hat sich Xcode beschwert, dass wir den Identifier setzen. In unserem Beispiel nennen wir die Zelle PlayerCell. Mit Hilfe dieser Zellenbezeichnung können wir die Zelle immer wieder verwenden, ohne sie neu konfigurieren zu müssen (Reuse Identifier). 

Damit sollte die Warnung verschwunden sein und wir können die App nochmal ausführen, um zu testen, ob alles noch funktioniert. Geändert haben sollte sich nichts.

4. Die Data Source

Jetzt wird die Zelle mit dem eigentlichen Inhalt gefüllt. Dazu müssen wir zunächst zwei neue Dateien anlegen. Klicke mit der rechten Maustaste auf den Projektordner “Tutorial6″ in der linken Seitenleiste und wähle die Option “New File…”. Im erscheinenden Fenster wählst du Objective-C class in der Kategorie iOS–>Cocoa Touch. Nenne sie “PlayerlistViewController” und beachte, dass Subclass of UITableViewController ausgewählt ist. Der Haken bei With XIB for user interface sollte nicht gesetzt sein, da wir ja mit dem Storyboard arbeiten.

Nun müssen wir noch festlegen, zu welchem View Controller im Storyboard die Dateien gehören. Öffne dazu die Datei “MainStoryboard.storyboard” und wähle den Table View Controller aus. Im identity Inspector geben wir bei Class den Namen der eben erstellten View-Controller-Dateien ein.

Wie gewohnt erstellen wir ein Array, um die Tabelledaten zu verwalten. Öffne die Datei PlayerlistViewController.h und schreibe unter die @interface-Zeile folgendes:

@property (nonatomic, strong) NSMutableArray *playerList;

Das einzig neue ist hier das strong nach nonatomic, statt retain. Der Grund dafür ist, dass wir beim Erstellen des Projekts Use Automatic Reference Counting angekreuzt haben. Dieses neue Feature erspart dem Programmierer das Memory Management.  Retain würde also Speicher für das Array reservieren. Durch ARC wird allerdings automatisch Speicher reserviert und dieser auch automatisch wieder freigegeben.

Öffne nun PlayerlistViewController.m und füge unter der @implementation-Zeile folgendes ein:

@synthesize playerList;

Die oben erstellte property wird hier einfach synthetisiert.

Die Tabellendaten sollen im Tutorial einfach in viewDidLoad erstellt werden. Schreibe also folgenden Code unter [super viewDidLoad] in der Methode viewDidLoad:

    self.playerList = [NSMutableArray arrayWithCapacity:20];

    NSString *player;
    player = @"Andreas";
    [self.playerList addObject:player];

    player = @"Stefan";
    [self.playerList addObject:player];

    player = @"Alex";
    [self.playerList addObject:player];

Die Funktionen tableView:numberOfSectionsInTableView und tableView:numberOfRowsInSection sind noch genauso, wie wir sie von früher kennen:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{

    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{

    // Return the number of rows in the section.
    return [self.playerList count];
}

Die uns schon bekannte Funktion tableView:cellForRowAtIndexPath hat sich allerdings leicht geändert:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"PlayerCell"];
    NSString *player = [self.playerList objectAtIndex:indexPath.row];
    cell.textLabel.text = player;

    // Configure the cell...

    return cell;
}

Zuerst wird die Zelle mit dem Indentifier “PlayerCell” aus dem Storyboard geladen und dann dem Label in dieser Zeile der passende Text zugewiesen.

Damit ist alles notwendige für die Table View getan. Wenn du die App nun ausführst, werden die drei Spieler angezeigt.

5. Schluss

Ich denke ich werde noch einen Part 3 schreiben, wahrscheinlich über den Detail View der Table View und den Tab Bar Controller.

Den Code für diesen Part gibt’s hier: Tutorial6_2

Zum Schluss möchte ich euch noch schöne Weihnachtsfeiertage wünschen und einen guten Rutsch in neue Jahr 2012.

Wie immer würde ich mich freuen, wenn du mir auf Twitter folgst oder den Blog abonnierst. Wenn du willst kannst du den Artikel gerne mit anderen teilen .

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.

Diesmal kein Tutorial, sondern nur ein kleiner Tipp.

Mit der neuen Version von Xcode (4.2) haben sich die Projekt-Templates geändert. So existiert ab sofort kein “View-based Application”-Template mehr. In diesem Artikel zeige ich, wie du trotzdem ein Projekt mit dem altgewohnten Aufbau erstellen kannst.

1. Die neuen Templates

• “View-based Application”-Template heist jetzt “Single View Application”
• “Navigation-based Application”-Template heist jetzt “Master-Detail Application”-Template
• “Tab Bar Application”-Template heist jetzt “Tabbed Application”-Template

2. Use Storyboard?

Beim Erstellen eines Projekt fällt auf, dass es bei fast jedem Template die Option Use Storyboard gibt. Dieses Storyboard ersetzt im iOS SDK 5 mehr oder minder die .xib-Dateien. Sie machen es möglich sehr schnell neue View Controller zu erstellen und zu gestalten, ohne viel Code schreiben zu müssen. Ich werde so bald wie möglich ein Tutorial über das Storyboard schreiben.
In den älteren Tutorials werden allerdings noch .xib-Dateien verwendet. Entferne also, wenn nicht anders angegeben, den Haken bei Use Storyboard.

3. Use Automatic Reference Counting

Automatic Reference Counting hilft dem Entwickler beim Memory Management. Wie das Storyboard, wird es in den älteren Tutorials nicht verwendet und sollte deshalb, wenn nicht anders angegeben, nicht angekreuzt sein.

4. Device Family

Mit der Option Device Family kannst du festlegen, für welche iDevice du die App erstellen willst. In den meisten Fällen wird in den Tutorials nur iPhone angegeben.

Ich hoffe ich konnte mit diesem kleinem Tipp weiterhelfen. Wenn du den Blog weiter verfolgen möchtest, kannst du ihn abonnieren oder auf Twitter folgen.

Hinweis: Dieses Tutorial ist für Xcode Version 4.1 geschrieben und mit der neuesten Version nicht nachvollziehbar. Alle aktuellen Tutorials findest du in der Übersicht.

Auf den Wunsch eines Lesers hin, schreibe ich ein Tutorial über den Tab Bar Controller und das Sortieren von Tabellen Daten.

Hinweis: Bevor du dieses Tutorial durcharbeitest, solltest du dich mit Tabellen Views auskennen. Ein Tutorial dazu findest du hier: UITableView Tutorial

1. In diesem Tutorial

Die App stellt einen digitalen Kassenzettel dar:

Die Gegenstände auf dem Kassenzettel sind, je nachdem welcher Tab angewählt ist, nach Preis oder Namen sortiert.

2. Das Projekt erstellen

In diesem Tutorial lernen wir wieder ein neues Projekt-Template kennen: Das Tab Bar Application Template. Öffne Xcode und wähle im Menü File->New->New Project…->Tab Bar Application. Ich nenne das Projekt Tutorial5.

3. Der Tab Bar Controller

Zuerst wollen wir uns den Tab Bar Controller etwas genauer anschauen. Bevor wir das tun, führen wir die App einfach mal aus, ohne das Template verändert zu haben. Die App besteht aus einem ganz normalen View und einer schwarzen Leiste am unteren Rand des Bildschirms. Mit dieser Leiste, der sogenannten Tab Bar, können wir zwischen zwei verschiedenen Reitern wählen. Je nachdem wird der First View bzw. der Second View angezeigt.

Der Text in beiden Views verweist auf die Datei MainWindow.xib. Kehre also zu Xcode zurück und öffne die besagte Datei. In der linken Seitenleiste im Interface Builder unter Objects finden wir drei Elemente. Das Tutorial5 App Delegate, Window und Tab Bar Controller. Wir wollen uns den Tab Bar Controller etwas genauer ansehen. Klicke dazu auf den Pfeil neben dem Icon des Objects. Es kommen nun weitere Elemente zum Vorschein. Wir klicken zuerst mal auf die Tab Bar. Daraufhin erscheint im View eine schwarze Leiste am unteren Rand des Views. Dieses Object ist demnach, wie der Name schon sagt, die eigentliche Tab Bar. Allerdings befinden sich innerhalb des Tab Bar Controllers noch zwei weitere Objects, zwei View Controller. Dies sind jene Views, die wir im iPhone Simulator bereits gesehen haben: First View Controller und Second View Controller. Für jeden Reiter der Tab Bar existiert also ein eigener View Controller.

Für unsere App benötigen wir Tabellen Views. First und Second View Controller sind allerdings ganz normale Views. Wir könnten die beiden Controller zwar zu Table Views umschreiben, allerdings geht es schneller, wenn wir von Anfang an mit Table Views arbeiten.

4. Die View Controller

Wir beginnen also, indem wir die Dateien aus denen die zwei View Controller bestehen löschen. Klicke dazu mit der rechten Maustaste auf die ausgewählten Objekte und wähle Delete. Im daraufhin erscheinenden Fenster wählst du wieder Delete.

Hinweis: Die Objects der beiden View Controller in MainWindow.xib müssen nicht gelöscht werden, da wir sie später einfach weiterverwenden werden.

Nun erstellen wir unseren eigenen View Controller. Wir fangen mit dem an, der die Einkaufsgegenstände nach Preis sortiert anzeigt. Klicke also mit der rechten Maustaste auf den Projektordner (hier: Tutorial5) und wähle New File… Unter Cocoa Touch müssen wir uns für UIViewController subclass entscheiden. Klicke auf Next und wähle im nächsten Dialog einen UITableViewController. Außerdem sollte nur der Haken bei With XIB for User Interface ausgewählt sein. Der View Controller soll ByPriceViewController heißen.

Wie bei fast jeder Tabellen View erstellen wir zuerst eine Variable, in der die Zeilen der Tabelle gespeichert werden. In diesem Fall ist das ein Array mit den Einkaufsgegenständen.

Wir öffnen also die Datei ByPriceViewController.h, fügen die Membervariable hinzu und erstellen zugleich deren Eigenschaft. Die Datei sieht danach so aus:

#import <UIKit/UIKit.h>

@interface ByPriceViewController : UITableViewController {
    NSArray *salesSlip;
}
@property (nonatomic, retain) NSArray *salesSlip;

@end

Öffne jetzt ByPriceViewController.m und schreibe unter @implementation ByPriceViewController:

@synthesize salesSlip;

Zunächst fügen wir folgende Methode am Ende der Datei, vor @end ein. Die Methode dealloc:

-(void) dealloc {
    self.salesSlip = nil;
    [super dealloc];
}

Wie bei jeder Tabellen View müssen noch die Methoden numberOfSectionsInTableView: und tableView:numberOfRowsInSection: abgeändert werden. Dir ist vielleicht schon aufgefallen, dass Xcode uns zwei Warnung ausspuckt.

Diese sollen uns nur darauf hinweisen, dass die Tabelle bisher keine Sections und keine Zeilen enthält und die Implementierung daher unvollständig ist.

Das ändern wir nun:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    // Return the number of sections.
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{

    // Return the number of rows in the section.
    return [salesSlip count];
}

Unsere Tabelle soll nur eine Section haben und so viele Zeilen wie das Array salesSlip Elemente hat.

Jetzt füllen wir das Array mit Daten, sodass die Tabelle bereits beim Start der App ein paar Zeilen besitzt. Außerdem werden diese sogleich sortiert. In einer richtigen App würde man die Daten aus einer Datenbank oder einer Datei auslesen, allerdings werden wir unsere Tabelle einfach in der Methode viewDidLoad füllen. Das macht in einer richtigen App zwar offen gesagt wenig Sinn, hier reicht es aber aus.

So sieht die Funktion viewDidLoad aus:

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSMutableArray *data = [NSMutableArray array];

    [data addObject:[NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithFloat:629.00], @"price", @"iPhone 4s", @"name", nil]];

    [data addObject:[NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithFloat:129.00], @"price", @"iPod nano", @"name", nil]];

    [data addObject:[NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithFloat:189.00], @"price", @"iPod Touch (weiß)", @"name", nil]];

    [data addObject:[NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithFloat:20.00], @"price", @"20€ iTunes-Gutschein", @"name", nil]];

    NSSortDescriptor *sorter = [[[NSSortDescriptor alloc]initWithKey:@"price" ascending:NO]autorelease];
    self.salesSlip = [data sortedArrayUsingDescriptors: [NSArray arrayWithObject:sorter]];

}

In Zeile 5 erstellen wir das Array data zu welchem wir in Zeile 7-13 Einkaufsgegenstände hinzufügen. Die Gegenstände sind NSDictionaries mit den Objekten “price” und “name”.
In Zeile 15 wird ein NSSortDescriptor deklariert und definiert. Wir geben an das er nach “price” sortieren soll. Ascending bedeutet ob aufsteigend (YES) oder absteigend (NO) sortiert wird. In Zeile 16 wird data mit dem SortDescpritor sorter aus Zeile 15 sortiert und gleich dem Array salesSlip zugewiesen. Dadurch enthält salesSlip nun alle Einkaufsgegenstände, sortiert nach Preis.

Zum Schluss geben wir das Aussehen der Zeilen in der Funktion tableView:cellForRowAtIndexPath: an. Wir benutzen UITableViewCellStyleValue1.

tableView:cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier] autorelease];
    }

    // Configure the cell...
    NSDictionary *item = [salesSlip objectAtIndex:indexPath.row];

    cell.textLabel.text = [item objectForKey:@"name"];

    NSNumber *price = [item objectForKey:@"price"];
    NSNumberFormatter *formatter = [[NSNumberFormatter alloc]init];
    [formatter setNumberStyle:NSNumberFormatterCurrencyStyle];
    cell.detailTextLabel.text = [formatter stringFromNumber:price];
    [formatter release];

    return cell;
}

Zeile 11: Wir holen das passende NSDictionary-Objekt aus salesSlip und speichern es in item. (Das Prinzip von tableView:cellForRowAtIndexPath: wird in Tutorial 4.1 erläutert)
Zeile 13: Das textLabel der Zeile soll den Namen des Gegenstandes tragen. Wir bekommen ihn, indem wir im Dictionary item nach dem key ”name” suchen.
Zeile 15-19: Das detailTextLabel wird den Preis des Gegenstandes anzeigen. Wir holen den Wert aus dem Dictionary item und wandeln die Zahl dann in einen string um, damit wir ihn dem deatilTextLabel übergeben können.

Damit wären wir mit dem ersten der beiden View Controller fertig. Es folgt jetzt der zweite.

Erstelle also einen neuen Table View Controller und nenne ihn ByNameViewController.

Öffne die Datei ByNameViewController.h und füge wieder die Membervariable salesSlip hinzu:

#import <UIKit/UIKit.h>

@interface ByNameViewController : UITableViewController {
    NSArray *salesSlip;
}
@property (nonatomic, retain) NSArray *salesSlip;

@end

Da die Datei ByNameViewController.m fast genauso aussieht wie ByPriceViewController.m können wir ausnahmsweise kopieren und einfügen. Öffne dazu ByPriceViewController.m und kopiere alles von @synthesize salesSlip; bis @end. Öffne ByNameViewController.m und makiere alles von -(id)initWithStyle:(UITableViewStyle)style bis @end und füge den Code ein.

Das einzige was wir noch ändern müssen ist der NSSortDescriptor in viewDidLoad:

    NSSortDescriptor *sorter = [[[NSSortDescriptor alloc]initWithKey:@"name" ascending:YES]autorelease];

Diesmal wird aufsteigend nach Namen sortiert.

5. Die View Controller im Interface Builder

Öffne die Datei MainWindow.xib wähle in der Objects-Leiste den First View Controller. Lasse ihn dir im Identity inspector anzeigen. Bei Class schreibst du ByPriceViewController.

Öffne jetzt den Attributes inspector und lösche den Text bei NIB Name.

Zunächst ziehst du eine Table View aus der Library auf das Object By Price View Controller.

Drücke als Nächstes mit gedrückter ctrl-Taste auf die Table View und ziehe den blauen Faden auf den By Price View Controller.

Im erscheinenden Menü wählst du dataSource. Wiederhole es und wähle delegate.

Jetzt können wir die App das erste mal ausführen. Klicke auf Run um die App zu starten. Bisher funktioniert allerdings nur der erste Reiter.

Wiederhole nun alles ab Überschrift 5. Die View Controller im Interface Builder für den Second View Controller. Wenn du das getan hast, ist die App fertig.

6. Schluss

Den Code zum Tutorial kannst du hier downloaden: iPhone_SDK_Tutorial_deutsch_5_Tab_Bar_Controller

Wenn ihr auch noch Tutorial-Vorschläge habt, gebt mir einfach bescheid. Wenn euch das Tutorial gefallen hat, könnt ihr meinen Blog abonnieren oder mir auf Twitter folgen.