iOS开发17：使用Navigation Controller切换视图

概述之前有两篇文章讲了使用Tool Bar和Tab Bar切换视图。其实，切换视图并不复杂，无非就是View Controller的切换。 这篇文章介绍使用UINavigationController切换视图。这个Navigation Controller功能强大，主要用来切换多级的视图。可以将Navigation Controller理解成一个栈，这个栈中可以存放很多View Controller。

之前有两篇文章讲了使用Tool bar和Tab bar切换视图。其实，切换视图并不复杂，无非就是VIEw Controller的切换。

这篇文章介绍使用UINavigationController切换视图。这个Navigation Controller功能强大，主要用来切换多级的视图。可以将Navigation Controller理解成一个栈，这个栈中可以存放很多VIEw Controller。在这个栈创建的时候，我们先给它添加一个VIEw Controller，称为Root VIEw Controller，它放在栈底，代表的是刚加载程序的时候显示的视图。当用户新选择了一个想要显示的视图时，那个新的VIEw Controller入栈，它所控制的视图就会显示出来。这个新的VIEw Controller通常称作Sub Controller。

进入一个新的视图后，左上方会出现一个按钮，叫做Navigation button，它就像浏览器的后退按钮一样，点击此按钮，当前的VIEw Controller出栈，之前的VIEw就会显示。

这种设计模式使得开发变得简单，我们只需知道每一个VIEw Controller的Sub Controller就好了。

我们这次要做的小例子运行如下图：

     

左边的图片是刚运行时显示的效果，它是一个表格，表格中的每一行代表不通过的VIEw Controller。注意到每一行的右边有一个图标，叫做disclosure Indicator，它用来告诉用户单击这一行会进入另一个视图。当点击某行，就进入中间图片显示的视图。中间图片中，左上角的按钮就是Navigation button。中间的图片中，每一行右边有一个按钮，叫做Detail disclosure button，它不仅仅是一个图标，实际上它是一个控件，用户点击它会进入该行的详细说明。点击某行的Detail disclosure button，进入相应的视图，如右边的图片。

为了更好地理解Navigation Controller的原理，我们从Empty Application开始我们的小例子。

1、运行Xcode 4.2，新建一个Empty Application，名称为：Navigation Controller Test：

2、创建一个VIEw Controller，作为Root VIEw Controller：依次选择file——New——New file，在d出的窗口，左边选择iOS下的Cocoa touch，右边选择UIVIEwController subclass：

单击Next，在新窗口输入名称为RootVIEwController，sub of选择UItableVIEwController：

之后选好位置，完成创建。

3、打开AppDelegate.h，向其中添加属性：

@property (strong,nonatomic) UINavigationController *navController;

然后打开AppDelegate.m，在@implementation之前添加代码：

#import "RootVIEwController.h"

在@synthesize window = _window;之后添加代码：

@synthesize navController;#pragma mark - #pragma mark Application lifecycle

在dIDFinishLaunchingWithOptions方法中添加代码：

- (BOol)application:(UIApplication *)application dIDFinishLaunchingWithOptions:(NSDictionary *)launchOptions{    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    // OverrIDe point for customization after application launch.        RootVIEwController *root = [[RootVIEwController alloc] initWithStyle:UItableVIEwStylePlain];     self.navController = [[UINavigationController alloc] initWithRootVIEwController:root];     [self.window addSubvIEw:navController.vIEw];        self.window.backgroundcolor = [UIcolor whitecolor];    [self.window makeKeyAndVisible];    return YES;}

4、我们先要明确，Root VIEw Controller中是一个表格，它的每一行对应一个Sub VIEw Controller。

打开RootVIEwController.h，添加属性：

@property (strong,nonatomic) NSArray *controllerList;

打开RootVIEwController.m，在@implementation之后添加代码：

@synthesize controllerList;

在vIEwDIDLoad中[super vIEwDIDLoad];之后添加代码：

self.Title = @"分类"; NSMutableArray *array = [[NSMutableArray alloc] init]; self.controllerList = array;

在VIEwDIDUnload方法中添加代码：

self.controllerList = nil;

找到numberOfSectionsIntableVIEw方法，修改其返回值为1。

找到numberOfRowsInSection:方法，修改代码为：

return [controllerList count];

找到cellForRowAtIndexPath方法，修改其中代码如下：

- (UItableVIEwCell *)tableVIEw:(UItableVIEw *)tableVIEw cellForRowAtIndexPath:(NSIndexPath *)indexPath{    static Nsstring *RoottableVIEwCell = @"RoottableVIEwCell";     UItableVIEwCell *cell = [tableVIEw dequeueReusableCellWithIDentifIEr: RoottableVIEwCell];     if (cell == nil) {         cell = [[UItableVIEwCell alloc]                 initWithStyle:UItableVIEwCellStyleDefault                reuseIDentifIEr: RoottableVIEwCell];     }     NSUInteger row = [indexPath row];     UItableVIEwController *controller = [controllerList objectAtIndex:row];     //这里设置每一行显示的文本为所对应的VIEw Controller的标题    cell.textLabel.text = controller.Title;    //accessoryType就表示每行右边的图标    cell.accessoryType = UItableVIEwCellAccessorydisclosureIndicator;     return cell; }

找到dIDSelectRowAtIndexPath:方法，修改其中代码如下：

- (voID)tableVIEw:(UItableVIEw *)tableVIEw dIDSelectRowAtIndexPath:(NSIndexPath *)indexPath{    NSUInteger row = [indexPath row];     UItableVIEwController *nextController = [self.controllerList objectAtIndex:row];     [self.navigationController pushVIEwController:nextController animated:YES]; }

5、现在为止，我们还看不到什么效果，那是因为controllerList这个数组现在是空的。

接下来我们创建一个table VIEw Controller，用于显示电影列表。建立的方法同建立RootVIEwController一样，名称为：MovIEVIEwController。

之后再创建一个VIEw Controller，名称为MovIEDetailVIEwController，用于显示电影的详细信息，这次我们要选中include xib file…选项，并且Subof选项为UIVIEwController：

6、打开MovIEDetailVIEwController.xib，拖一个Label到中间，并拉长。将其映射到MovIEDetailVIEwController.h中，名称为detailLabel：

然后在MovIEDetailVIEwController.h中添加属性：

@property (copy,nonatomic) Nsstring *message;

打开MovIEDetailVIEwController.m，在@implementation之后添加代码：

@synthesize message;

在vIEwDIDLoad方法后面添加一个方法：

- (voID)vIEwWillAppear:(BOol)animated {     detailLabel.text = message;     [super vIEwWillAppear:animated]; }

vIEwWillAppear这个方法每次视图加载都会执行，而vIEwDIDLoad方法只有在第一次加载时才会执行。

在vIEwDIDUnload方法中添加代码：

self.detailLabel = nil;self.message = nil;

7、打开MovIEVIEwController.h，向其中添加属性：

@property (strong,nonatomic) NSArray *movIEList;

打开MovIEVIEwController.m，在@implementation之前添加代码：

#import "MovIEDetailVIEwController.h"#import "AppDelegate.h"@interface MovIEVIEwController () @property (strong,nonatomic) MovIEDetailVIEwController *childController; @end

在@implementation之后添加代码：

@synthesize movIEList;@synthesize childController;

在vIEwDIDLoad方法中添加代码：

NSArray *array = [[NSArray alloc] initWithObjects:@"肖申克的救赎",@"教父",@"教父：II",@"低俗小说",@"黄金三镖客",@"十二怒汉",@"辛德勒名单",@"蝙蝠侠前传2：黑暗骑士",@"指环王：王者归来",@"飞越疯人院",@"星球大战Ⅴ：帝国反击战",@"搏击俱乐部",@"盗梦空间",@"七武士",@"指环王：护戒使者",@"好家伙",@"星球大战IV：新希望",@"上帝之城",@"卡萨布兰卡",@"黑客帝国",@"西部往事",@"后窗",@"夺宝奇兵",@"沉默的羔羊",@"非常嫌疑犯",@"七宗罪",@"指环王：双塔奇兵",@"阿甘正传",@"惊魂记",@"美好人生",nil];self.movIEList = array;

在VIEwDIDUnload方法中添加代码：

self.movIEList = nil;self.childController = nil;

找到numberOfSectionsIntableVIEw方法，修改其返回值为1。

找到numberOfRowsInSection:方法，修改代码为：

return [movIEList count];

找到cellForRowAtIndexPath方法，修改其中代码如下：

- (UItableVIEwCell *)tableVIEw:(UItableVIEw *)tableVIEw cellForRowAtIndexPath:(NSIndexPath *)indexPath{    static Nsstring *MovIEtableVIEwCell = @"MovIEtableVIEwCell";     UItableVIEwCell *cell = [tableVIEw                             dequeueReusableCellWithIDentifIEr: MovIEtableVIEwCell];     if (cell == nil) {         cell = [[UItableVIEwCell alloc]                 initWithStyle:UItableVIEwCellStyleDefault                reuseIDentifIEr: MovIEtableVIEwCell];     }     NSUInteger row = [indexPath row];     Nsstring *movIETitle = [movIEList objectAtIndex:row];    //这里设置每一行显示的文本为所对应的VIEw Controller的标题    cell.textLabel.text = movIETitle;    //accessoryType就表示每行右边的图标    cell.accessoryType = UItableVIEwCellAccessoryDetaildisclosurebutton;     return cell;}

修改dIDSelectRowAtIndexPath方法：

- (voID)tableVIEw:(UItableVIEw *)tableVIEw dIDSelectRowAtIndexPath:(NSIndexPath *)indexPath{    [tableVIEw deselectRowAtIndexPath:indexPath animated:YES]; }

在@end之前添加方法：

- (voID)tableVIEw:(UItableVIEw *)tableVIEw  accessorybuttonTappedForRowWithIndexPath:(NSIndexPath *)indexPath {     if (childController == nil) {         childController = [[MovIEDetailVIEwController alloc]                           initWithNibname:@"MovIEDetailVIEwController" bundle:nil];     }     NSUInteger row = [indexPath row];     Nsstring *selectedMovIE = [movIEList objectAtIndex:row];     Nsstring *detailMessage = [[Nsstring alloc]                               initWithFormat:@"你选择了电影：%@.",selectedMovIE];     childController.message = detailMessage;     childController.Title = selectedMovIE;     [self.navigationController pushVIEwController:childController animated:YES]; }

8、打开RootVIEwController.m，在@implementation之前添加代码：

#import "MovIEVIEwController.h"

在vIEwDIDLoad方法中self.controllerList = array;之前添加代码：

//电影 MovIEVIEwController *movIEVIEwController = [[MovIEVIEwController alloc]                                            initWithStyle:UItableVIEwStylePlain]; movIEVIEwController.Title = @"电影";  [array addobject:movIEVIEwController];

9、运行一下：

     

RootVIEwController表格中其他选项的实现跟上面是类似的，重复 *** 作比较多，不再讲了。

总的来说，Navigation Controller还是很强大的。使用的时候把它想象成一个栈，用起来就会比较简单。

最终代码：http://www.oschina.net/code/snippet_164134_12787

总结

以上是内存溢出为你收集整理的iOS开发17：使用Navigation Controller切换视图全部内容，希望文章能够帮你解决iOS开发17：使用Navigation Controller切换视图所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。