ComSubVie's Creative Content » Tutorial

Nav Bar Tutorial (Version 2)

ComSubVie — Fri, 13 Mar 2009 20:56:22 +0000

Das zweite überarbeitete Tutorial beschäftigt sich mit der NavigationBar. Dabei handelt es sich um die Navigationsleiste am oberen Bildschirmrand, mit der man beispielsweise von Detailansichten wieder zur Übersicht zurückkommt, oder beim Bearbeiten von Einträgen die beiden Buttons “Save” und “Cancel” anzeigt.

Die UINavigationBar verwendet dabei eine Art Stack auf dem UIViewController Objekte abgelegt werden. Bei der Initialisierung muss in jedem Fall ein root ViewController angegeben werden. Dies ist jene View, die am Anfang angezeigt wird.

Mit den Methoden pushViewController:animated: sowie popViewControllerAnimated: lassen sich zusätzliche UIViewController im UINavigationController einbinden, wobei die Methode pushViewController:animated: den als Parameter angegebenen UIViewController anzeigt. Zusätzlich wird automatisch ein Back-Button auf der linken Seite der NavigationBar erzeugt, welcher den Titel des vorigen ViewControllers anzeigt. Die Methode popViewControllerAnimated: entfernt den aktuellen ViewController wieder und schaltet auf die vorige Sicht zurück.

Eine View, die in einen UINavigationController eingebunden ist, besitzt die Property navigationItem, über welche sich die angezeigte UINavigationBar modifizieren lässt. So enthält die UINavigationItem Klasse die Properties backBarButtonItem, leftBarButtonItem, rightBarButtonItem sowie title. Über diese Properties lassen sich die entsprechenden Buttons bzw. der Titel der in der Navigationbar angezeigt wird modifizieren.

Genug der Theorie. Um das Ganze zu demonstrieren möchte ich eine Applikation erstellen, die drei Views enthält, zwischen denen man mit der NavigationBar umschalten kann. Die erste View soll nur einen Add und Details-Button anzeigen, über die zur zweiten View umgeschaltet werden kann. Auf der zweiten View soll es einen Zurück-Button geben, der wieder auf die erste View zurückschaltet sowie einen Edit-Button der auf die dritte View umschaltet. Die dritte View soll die beiden Buttons Cancel (zurück zur zweiten View) und Save (ebenfalls zurück zur zweiten View) enthalten.

Wie immer beginne ich mit einem neuen Projekt vom Typ iPhone OS Window-Based Application, welche ich NavBar nenne. Dementsprechend erstellt XCode eine Hauptklasse NavBarAppDelegate.m.

Zusätzlich erstelle ich die drei Klassen für die drei Views. Diese sind ebenfalls wieder vom Typ UIViewController subclass, wobei ich diese wieder First, Second und Third taufe.

Die erste View (First.m) soll den Titel First in der NavigationBar anzeigen (Zeile 9) und zusätzlich auf der rechten Seite einen Add-Button (Zeile 10). Zusätzlich wird ein Button in der View angezeigt, der den Titel Details trägt (Zeilen 12-21). Beide Buttons werden mit der Methode buttonPressed verbunden (Zeile 10 und 17). Die Methode buttonPressed initialisiert die nächste View (also Second, Zeile 25) und zeigt diese über den ViewController an (Zeile 27).

First.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

#import "First.h"
#import "Second.h"

@implementation First

- (void)loadView {
[super loadView];

self.navigationItem.title = @"First";
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(buttonPressed:)];

UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 480.0)];

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
button.frame = CGRectMake(10.0, 10.0, 300.0, 50.0);
[button setTitle:@"Details" forState:UIControlStateNormal];
[button addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
[tempView addSubview:button];

[self setView:tempView];
[tempView release];
}

- (void)buttonPressed:(id)sender {
Second *second = [[[Second alloc] initWithNibName:nil bundle:nil] autorelease];

[self.navigationController pushViewController:second animated:YES];
}

@end

Die zweite View enthält durch das laden automatisch einen Back-Button auf der rechten Seite der NavigationBar. Zusätzlich muss ein Edit-Button auf der rechten Seite hinzugefügt werden (Zeile 10) und der Titel auf Second gesetzt werden (Zeile 9). Wenn der Back-Button gedrückt wird, schaltet der NavigationController automatisch auf die vorige View zurück. Bei Benutzung des Edit-Buttons (Zeile 8 ) muss äquivalent zur vorigen View eine neue Instanz der nächsten View erzeugt und auf diese umgeschaltet werden (Zeilen 14-16).

Second.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

#import "Second.h"
#import "Third.h"

@implementation Second

- (void)loadView {
[super loadView];

self.navigationItem.title = @"Second";
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemEdit target:self action:@selector(buttonPressed:)];
}

- (void)buttonPressed:(id)sender {
Third *third = [[[Third alloc] initWithNibName:nil bundle:nil] autorelease];

[self.navigationController pushViewController:third animated:YES];
}

@end

Die letzte View besitzt den Titel Third (Zeile 8 ) sowie zwei Buttons in der Navigationbar (Cancel, Zeile 9 sowie Save, Zeile 10). Beide Buttons lösen einen Rücksprung zur vorigen View aus (Zeile 14):

Third.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#import "Third.h"

@implementation Third

- (void)loadView {
[super loadView];

self.navigationItem.title = @"Third";
self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(buttonPressed:)];
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemSave target:self action:@selector(buttonPressed:)];
}

- (void)buttonPressed:(id)sender {
[self.navigationController popViewControllerAnimated:YES];
}

@end

Im Hauptprogramm (NavBarAppDelegate) muss nun eine Instanz der ersten View (der Root View) erstellt werden (Zeile 11) und ein UINavigationController mit dieser initialisiert werden (Zeile 12). Anschließend wird der Navigation Controller als View der Applikation aktiviert (Zeile 14).

NavBarAppDelegate.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

#import "NavBarAppDelegate.h"
#import "First.h"

@implementation NavBarAppDelegate

@synthesize window;

UINavigationController *navController;

- (void)applicationDidFinishLaunching:(UIApplication *)application {
First *firstView = [[First alloc] initWithNibName:nil bundle:nil];
navController = [[UINavigationController alloc] initWithRootViewController:firstView];

[window addSubview:[navController view]];

[window makeKeyAndVisible];
}

- (void)dealloc {
[window release];
[navController release];

[super dealloc];
}

@end

Auch hier erspare ich es mir das ganze Projekt als Source hochzuladen, da auch dieses noch recht trivial ist. Die nächsten geplanten Tutorials sind: Kombination UITabBar mit UINavigationBar, UITableView sowie Delegation. Sowie eventuell etwas über Cocoa-Memorymanagement. Mal schauen…

Tab Bar Tutorial (Version 2)

ComSubVie — Wed, 11 Mar 2009 22:26:52 +0000

Nachdem ich ja bereits geschrieben habe, dass ich inzwischen vom Interface Builder abgekommen bin (zumindest Großteils; um eine View zu entwerfen und die Daten dann im Code zu übernehmen ist der IB durchaus ganz brauchbar) beginne ich mal mit der ersten Anleitung ohne den IB.

Wie bereits zuvor beginne ich mit einer TabBar Applikation. Dabei soll einfach eine Applikation entstehen, die 2 verschiedene Views enthält, zwischen denen man mit Hilfe einer TabBar umschalten kann. Das grundsätzliche Vorgehen bei der Projekterstellung bleibt dabei gleich, d.h. zuerst wird ein neues Projekt vom Typ iPhone OS Window-Based Application erstellt. Da ich die Applikation TabBar genannt habe, erzeugt XCode eine Hauptklasse TabBarAppDelegate.m.

Zusätzlich dazu erstelle ich zwei weitere Klassen, für jede View eine eigene Klasse, die vom Typ UIViewController subclass sind, und die ich sinnvollerweise First.m sowie Second.m nenne. In jeder dieser beiden Views erstelle ich in der Methode loadView ein Label, welches den Text “First View” bzw. “Second View” anzeigen soll. Diese beiden Klassen sind eigentlich selbsterklärend und sehen wie folgt aus (die Header-Dateien First.h und Second.h habe ich dabei nicht modifiziert):

First.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#import "First.h"

@implementation First

- (void)loadView {
[super loadView];

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 480.0)];
label.textAlignment = UITextAlignmentCenter;
label.text = @"First View";

[self setView:label];

[label release];
}

@end

Second.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#import "Second.h"

@implementation Second

- (void)loadView {
[super loadView];

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 320.0, 480.0)];
label.textAlignment = UITextAlignmentCenter;
label.text = @"Second View";

[self setView:label];

[label release];
}

@end

Im Hauptprogramm, d.h. in der TabBarAppDelegate erstelle ich von jedem der beiden ViewController First und Second eine neue Instanz (Zeile 13 und 14). Ein ViewController besitzt die Property tabBarItem, bei der man den Titel angeben kann (.title), der auf dem zugehörigen Tab dargestellt werden soll, sowie auch ein dazugehöriges Icon (.image). Die beiden Tabs werden hier ebenfalls mit “First” und “Second” tituliert (Zeile 16 und 17). Anschließend wird ein neuer UITabBarController erstellt (Zeile 19) sowie mitgeteilt welche Views (bzw. Tabs) er darstellen soll (Zeile 20). Letztendlich wird dem aktuellen Window der Applikation der UITabBarController als Subview gesetzt (Zeile 22).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

#import "TabBarAppDelegate.h"

#import "First.h"
#import "Second.h"

@implementation TabBarAppDelegate

@synthesize window;

UITabBarController *tabBarController;

- (void)applicationDidFinishLaunching:(UIApplication *)application {
First *firstViewController = [[First alloc] initWithNibName:nil bundle:nil];
Second *secondViewController = [[Second alloc] initWithNibName:nil bundle:nil];

firstViewController.tabBarItem.title = @"First";
secondViewController.tabBarItem.title = @"Second";

tabBarController = [[UITabBarController alloc] init];
tabBarController.viewControllers = [NSArray arrayWithObjects:firstViewController, secondViewController, nil];

[window addSubview:[tabBarController view]];

[firstViewController release];
[secondViewController release];

[window makeKeyAndVisible];
}

- (void)dealloc {
[tabBarController release];

[window release];
[super dealloc];
}

@end

Und das war schon die ganze Hexerei. Irgendwie weitaus einfacher und schneller als mit dem Interface Builder, und außerdem weiß man so in etwa was dabei passiert. Da das ganze so trivial ist halte ich es nicht für notwendig ein Archiv des Projektes zum Download zur Verfügung zu stellen, ich kann es bei Bedarf aber durchaus gerne weitergeben.

iPhone Development: Nav Bar Mini HowTo

ComSubVie — Sat, 28 Feb 2009 12:49:27 +0000

Nachdem sich das letzte Mini HowTo it dem “Root”-Navigationselement, der Tab Bar beschäftigt hat, will ich hier die Verwendung der Navigation Bar zeigen. Wenn keine Tab Bar verwendet wird, dann kann die Navigation Bar das “höchste” Navigationselement der Anwendung sein, ansonsten muss es in ein View der Tab Bar eingebaut werden.

Beispiele für die Navigation Bar finden sich in vielen Applikationen, so wird dies zum Beispiel bei den Kontakten verwendet, um einen neuen Kontakt anzulegen, oder um von einem Kontakt wieder auf die Kontaktliste zurückzukommen.

Wie bereits zuvor erwähnt verwende ich für sämtliche Applikationen die Window-Based Application als Vorlage. Äquivalent zur Anwendung der Tab Bar wird die Datei MainWindow.xib im Interface Builder geöffnet und ein Navigation Controller in das Fenster gezogen. Das Resultat sollte dann wie folgt aussehen:

Anschließend wird dieser Controller im AppDelegate in XCode wieder als IBOutlet hinzugefügt:

TutorialNavigationBarAppDelegate.h:

1
2
3
4
5
6
7
8
9
10
11

#import

@interface TutorialNavigationBarAppDelegate : NSObject {
UIWindow *window;
UINavigationController *navController; // LINE ADDED
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navController; // LINE ADDED

@end

TutorialNavigationBarAppDelegate.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#import "TutorialNavigationBarAppDelegate.h"

@implementation TutorialNavigationBarAppDelegate

@synthesize window;
@synthesize navController; // LINE ADDED

- (void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview:[navController view]]; // LINE ADDED

// Override point for customization after application launch
[window makeKeyAndVisible];
}

- (void)dealloc {
[window release];
[super dealloc];
}

@end

Im Anschluss werden die Outlets im Interface Builder verbunden, d.h. der Navigation Controller wird rechts angeklickt und der Kreis des “New Referencing Outlet” auf das Tutorial Navigation Bar App Delegate gezogen. Das Resultat sollte dann wie folgt aussehen:

Die Applikation sollte jetzt bereits laufen und eine leere View mit einer Navigation Bar anzeigen:

Um die Navigation Bar vernünftig verwenden zu können, wird einerseits ein Eingabe-Element benötigt, mit dem auf eine andere View umgeschaltet werden kann, andererseits auch noch diese View, auf die umgeschaltet werden soll.

Im XCode erstelle ich daher eine neue Datei vom Typ “User Interfaces” “View XIB”, die ich View2.xib taufe.

Diese Datei wird nun mit dem Interface Builder geöffnet. Damit diese hier auch der richtigen Größe entspricht, kann man über “View Attributes” als Top Bar eine Navigation Bar simulieren.

Diese View bekommt ein Label, welches ich “displayText” taufe, damit man zumindest irgendetwas erkennen kann.

Weiters muss für diese View auch wieder ein View Controller erstellt werden. Dazu erstellt man im XCode eine neue Datei vom Typ “UIViewController subclass”, die ich View2ViewController taufe.

In diesen beiden Dateien erstelle ich ein IBOutlet für das Label, damit man den Text auch modifizieren kann. Die beiden Dateien sehen danach wie folgt aus:

View2ViewController.h:

1
2
3
4
5
6
7
8
9

#import

@interface View2ViewController : UIViewController {
UILabel *displayText; // LINE ADDED
}

@property (nonatomic, retain) IBOutlet UILabel *displayText; // LINE ADDED

@end

View2ViewController.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#import "View2ViewController.h"

@implementation View2ViewController

@synthesize displayText; // LINE ADDED

/*
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
[super viewDidLoad];
}
*/

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning]; // Releases the view if it doesn't have a superview
// Release anything that's not essential, such as cached data
}

- (void)dealloc {
[super dealloc];
}

@end

View Controller und View müssen im Interface Builder wieder miteinander verbunden werden. Als Class für den “File’s Owner” verwendet man den eben erstellten View2ViewController:

Und das “New Referencing Outlet” des displayText Labels mit dem displayText Attribut des “File’s Owner”. Das Resultat sollte dann wie folgt aussehen:

Außerdem muss noch das View Attribut des “File’s Owner” mit der View verbunden werden. Dazu wird der “File’s Owner” rechts angeklickt, und der Kreis neben “view” auf die View gezogen. Das Ergebnis sollte so aussehen:

Die Umschaltung auf diese View muss nun irgendwie ausgelöst werden, daher füge ich in der MainWindow.xib einen Button hinzu (im Normalfall wird dies vermutlich eher aus einer TableView geschehen), den ich detailsButton taufe. Das sieht im Interface Builder dann wie folgt aus:

Wie man an diesem Bild erkennen kann, wird die View durch den Button ersetzt. Wenn man eine eigene View einsetzen will (was ich durchaus als sinnvoll erachte), so sollte man dem View Controller hier eine eigene XIB Datei angeben (allerdings bin ich mir nicht ganz sicher ob das funktioniert, weil es beim Tab Bar Controller ja nicht geklappt hat).

Anschließend füge ich die Outlets und die Action im AppDelegate ein (eine eigene View hätte hier den Vorteil, das die App Delegate nicht so überfüllt ist). Zustätzlich muss auch die neue View hier eingetragen werden. Die neuen App Delegate Dateien sehen dann so aus:

TutorialNavBarAppDelegate.h:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#import

#import "View2ViewController.h"

@interface TutorialNavigationBarAppDelegate : NSObject {
UIWindow *window;
UINavigationController *navController;

UIButton *detailsButton; // LINE ADDED

View2ViewController *view2Controller; // LINE ADDED
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navController;

@property (nonatomic, retain) IBOutlet UIButton *detailsButton; // LINE ADDED

@property (nonatomic, retain) View2ViewController *view2Controller; // LINE ADDED

- (IBAction) buttonPressed:(id)sender; // LINE ADDED

@end

TutorialNavBarAppDelegate.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

#import "TutorialNavigationBarAppDelegate.h"

@implementation TutorialNavigationBarAppDelegate

@synthesize window;
@synthesize navController;
@synthesize detailsButton; // LINE ADDED

@synthesize view2Controller; // LINE ADDED

- (IBAction) buttonPressed:(id)sender { // BLOCK ADDED
if ( view2Controller == nil ) {
view2Controller = [[View2ViewController alloc] initWithNibName:@"View2" bundle:nil];
[view2Controller displayText].text = @"Details";
}

[navController pushViewController:view2Controller animated:YES];
}

- (void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview:[navController view]];

// Override point for customization after application launch
[window makeKeyAndVisible];
}

- (void)dealloc {
[window release];
[super dealloc];
}

@end

Die buttonPressed Methode erzeugt eine neue View auf Basis des View2ViewControllers mit der View2 XIB als Resource, wobei der Text des Labels mit “Details” beschriftet wird. Anschließend wird der Navigation Controller aufgefordert, die View entsprechend umzuschalten.

Im Anschluss werden die ganzen Dinge wieder im Interface Builder verbunden, d.h. das “New Referencing Outlet” des detailsButton mit dem Tutorial Nav Bar App Delegate displayButton Attribut und das Touch Down Event des detailsButton mit der buttonPressed Methode des Tutorial Nav Bar App Delegates. Das Resultat ist hier dargestellt:

Das fertige Resultat sollte nun so aussehen:

Falls man einen Add Button einsetzen will, muss man dies in der viewDidLoad Methode des entsprechenden ViewControllers hinzufügen (bei diesem Beispiel funktioniert dies daher nur im View2ViewController, da die Startseite keine eigene View besitzt). Der folgende Code erledigt dies:

1
2
3
4
5
6
7
8
9

- (IBAction) addButtonPressed:(id)sender {
// TODO Add Implementation
}

- (void)viewDidLoad {
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(addButtonPressed:)];

[super viewDidLoad];
}

Hier ist nun wieder der komplette Code des Beispiels: TutorialNavBar (ZIP-Archiv)

iPhone Development: Tab Bar Mini HowTo

ComSubVie — Fri, 27 Feb 2009 22:25:44 +0000

Das Interface des iPhones ist in mehrere verschiedene Komponenten unterteilt. Die Tab Bar ist dabei jene Komponenten, die am unteren Rand des Displays angezeigt wird, und zwischen verschiedenen Darstellungen umschaltet.

Beim Telefon ist dies beispielswiese Favoriten, Anrufliste, Kontakte, Ziffernblock und Voicemail; bei der Uhr Weltuhr, Wecker, Stoppuhr sowie Timer.

Eine Tab Bar ist das “höchste” Navigationselement am iPhone. D.h. wenn eine Tab Bar verwendet werden soll, so sind alle anderen Ansichten dieser untergeordnet. Daher muss bei einer Applikation mit Tab Bar basierter Navigation diese Tab Bar als erstes Element implementiert werden.

Für sämtliche Applikationen am iPhone verwende ich die Window-Based Application als Vorlage. Diese generiert nur eine AppDelegate Klasse für die Anwendung sowie eine MainWindow.xib Datei, die das Interface definiert:

Um eine Tab Bar zu verwenden, wird zuerst die Datei MainWindow.xib im Interface Builder geöffnet und ein Tab Bar Controller in das Fenster gezogen. Das Resultat sieht wie folgt aus:

Anschließend wird im XCode der Controller als IBOutlet hinzugefügt, d.h. die Datei TutorialTabBarAppDelegate.h wie folgt geändert:

1
2
3
4
5
6
7
8
9
10
11

#import

@interface TutorialTabBarAppDelegate : NSObject {
UIWindow *window;
UITabBarController *tabBarController; // LINE ADDED
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController; // LINE ADDED

@end

Anschließend wird der Tab Bar Controller als View der Anwendung initialisiert, d.h. die Datei TutorialTabBarAppDelegate.m wie folgt modifiziert:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#import "TutorialTabBarAppDelegate.h"

@implementation TutorialTabBarAppDelegate

@synthesize window;
@synthesize tabBarController; // LINE ADDED

- (void)applicationDidFinishLaunching:(UIApplication *)application {
[window addSubview:[tabBarController view]]; // LINE ADDED

// Override point for customization after application launch
[window makeKeyAndVisible];
}

- (void)dealloc {
[window release];
[super dealloc];
}

@end

Anschließend geht es wieder zurück zum Interface Builder. Hier wird der Tab Bar Controller rechts angeklickt. Daraufhin erscheint ein Popup-Fenster, in dem man den Kreis neben “New Referencing Outlet” auf das Tutorial Tab Bar App Delegate Objekt dragt, wo dann wieder ein Popup mit dem Inhalt “tabBarController” erscheint. Dieser tabBarController entspricht der IBOutlet-Variablen, die wir zuvor gerade angelegt haben. Das Resultat sollte wie folgt aussehen:

Die Applikation sollte jetzt bereits laufen und eine funktionierende Tab Bar darstellen:

Damit die ganze Anwendung überhaupt erst Sinn ergibt müssen für die einzelnen Tabs noch entsprechende Inhalte generiert werden. Dazu wird für jedes Tab eine eigene View angelegt.

Dazu wird im XCode eine neue Datei vom Typ UIViewController subclass angelegt, die den Namen “Tab1ViewController” erhält:

Die dadurch erstellten Dateien lasse ich vorerst unangetastet. Weiterhin wird eine Interface Builder Datei für diesen Controller erstellt, d.h. eine neue Datei vom Typ “View XIB” mit dem Namen “Tab1View” zum Projekt hinzugefügt:

Die Datei Tab1View.xib muss nun mit dem Interface Builder geöffnet werden. Für den “File’s Owner” wird im Identity Inspector als Class das NSObject durch Tab1ViewController ersetzt:

Anschließend muss das “New Referencing Outlet” der View mit dem Attribut view des “File’s Owner” verbunden werden. Dazu dient wieder ein Rechtsklick auf View und ein anschließendes Draggen des Krieses auf “File’s Owner”.

Um die View in der Tutorial-Applikation auch identifizieren zu können, wird ein entsprechendes Label in die View gezogen. Das Resultat sieht im Interface Builder dann so aus:

Das View muss nun noch entsprechend in der Tab Bar eingebunden werden. Die Idee dies direkt im Interface Builder zu machen ist zwar naheliegend und funktioniert auch prinzipiell – zumindest solange bis man dann versucht das Programm auszuführen, dann endet es mit einer Exception. Also muss man doch wieder zum Code greifen. Daher muss die App Delegate wir folgt angepasst werden:

TutorialTabBarAppDelegate.h:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#import

#import "Tab1ViewController.h" // LINE ADDED

@interface TutorialTabBarAppDelegate : NSObject {
UIWindow *window;
UITabBarController *tabBarController;

Tab1ViewController *tab1ViewController; // LINE ADDED
}

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITabBarController *tabBarController;

@property (nonatomic, retain) Tab1ViewController *tab1ViewController;// LINE ADDED

@end

TutorialTabBarAppDelegate.m:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

#import "TutorialTabBarAppDelegate.h"

@implementation TutorialTabBarAppDelegate

@synthesize window;
@synthesize tabBarController;

@synthesize tab1ViewController; // LINE ADDED

- (void)applicationDidFinishLaunching:(UIApplication *)application {
tab1ViewController = // LINES ADDED
[[Tab1ViewController alloc] initWithNibName:@"Tab1View" bundle:nil];

[[[[tabBarController viewControllers] objectAtIndex:0] view] addSubview:[tab1ViewController view]];

[window addSubview:[tabBarController view]];

// Override point for customization after application launch
[window makeKeyAndVisible];
}

- (void)dealloc {
[window release];
[super dealloc];
}

@end

Äquivalent wird ein Tab2ViewController sowie eine Tab2View angelegt sowie im AppDelegate eingebaut. Das fertige Programm sieht dann wie folgt aus:

Der fertige Sourcecode des Programms ist hier als Download verfügbar: TutorialTabBar (ZIP-Archiv)

Viel Erfolg beim Programmieren!