iPhone开发之NavigationController

 unicorn+nginx部署rails

iPhone开发之TabBarController »

 

在上图中红线框住的就是导航栏，应用也很广泛，系统自带应用也在用它。如何从零创建一个导航栏应用。

新建项目，可以选择“Master-Detail Application”，但是默认就创建了TableView视图，这个我们不需要，所以还是从空项目创建，选择“Empty Appliction”，项目命名为“NavigationDemo”

新建一个视图，“New file..” -> “UIViewController subclass”，命名为RootViewController，并勾选“With XIB for user interface”

修改AppDelegate.h和AppDelegate.m源代码

//  AppDelegate.h

 

#import <UIKit/UIKit.h>

 

@interface AppDelegate : UIResponder <UIApplicationDelegate>

{

    UINavigationController *navController;

}

 

@property (strong, nonatomic) UIWindow *window;

 

@end

//  AppDelegate.m

 

#import "AppDelegate.h"

#import "RootViewController.h"

 

@implementation AppDelegate

 

@synthesize window = _window;

 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    navController = [[UINavigationController alloc] init];

    RootViewController *rootViewController = [[RootViewController alloc] init];

 

 

    // 这时navController会增加rootViewController的引用计数

    [navController pushViewController:rootViewController animated:NO];

    [self.window addSubview:navController.view];

    [self.window makeKeyAndVisible];

	// 所以这里可以release先前的引用，UINavigationController它会掌控rootViewController

	[rootViewController release];

    return YES;

}

 

...

 

- (void)dealloc

{

    [navController release];

    [self.window release];

    [super dealloc];

}

 

@end

这时候运行只是一个空的导航栏程序，咋都没有，接下来我们添加第二个视图并设置标题文字
新建一个视图，“New file..” -> “UIViewController subclass”，命名为SecondViewController，并勾选“With XIB for user interface”

在RootViewController.xib中添加一个按钮并绑定到(IBAction)displaySecondView

//  AppDelegate.m

 

 

#import "AppDelegate.h"

#import "RootViewController.h"

 

@implementation AppDelegate

 

@synthesize window = _window;

 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

{

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    navController = [[UINavigationController alloc] init];

    RootViewController *rootViewController = [[RootViewController alloc] init];

	// 修改 rootViewController 标题

    rootViewController.title = @"Root View";

 

    // Override point for customization after application launch.

    [navController pushViewController:rootViewController animated:NO];  

    [self.window addSubview:navController.view];

    [self.window makeKeyAndVisible];

 

    [rootViewController release];

 

    return YES;

}

//  RootViewController.h

 

#import <UIKit/UIKit.h>

 

@interface RootViewController : UIViewController

 

- (IBAction)displaySecondView:(id)sender;

 

@end

//  RootViewController.m

 

#import "RootViewController.h"

#import "SecondViewController.h"

 

@implementation RootViewController

 

...

 

- (void)displaySecondView:(id)sender

{

    SecondViewController *secondViewController = [[SecondViewController alloc] init];

	// 向视图询问它的导航控制器，因为在AppDelegate.m中我们已经在navController中rootViewController，

	// 所以这里我们询问rootViewController的导航控制器就会返回先前navController指针，如果没有就返回空

    [self.navigationController pushViewController:secondViewController animated:YES];

	// 设置 secondViewController 标题

    secondViewController.title = @"Second View";

 

    [secondViewController release];

}

 

@end

运行程序，当点击按钮，动画切换到secondViewController，导航栏自动显示返回rootViewController按钮。

我们看第一张截图，左右各有一个按钮，那么这两个按钮是怎么创建的，UINavigationController上面的区域叫UINavigationItem，UINavigationItem中可以添加UIBarButtonItem，创建界面最好的时机就是在- (void)viewDidLoad方法中.

//  RootViewController.m

 

#import "RootViewController.h"

#import "SecondViewController.h"

 

@implementation RootViewController

 

...

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view from its nib.

    UIBarButtonItem *testButton = [[UIBarButtonItem alloc] initWithTitle:@"test" style:UIBarButtonItemStyleBordered target:self action:@selector(testClicked:)];

    self.navigationItem.leftBarButtonItem = testButton;

    [testButton release];

}

...

这时候点击导航栏上的“test”按钮没有任何行为，因为我们还没有创建action testClicked方法

//  RootViewController.m

 

#import "RootViewController.h"

#import "SecondViewController.h"

 

@implementation RootViewController

...

 

- (void)testClicked:(id)sender

{

    NSLog(@"test button clicked.");

}

 

...

有时候我们可能想创建下面的按钮，右边的按钮上面有个小十字，这些系统小图标是iPhone内部预设的，下面来看看这些按钮.

//  RootViewController.m

 

#import "RootViewController.h"

#import "SecondViewController.h"

 

@implementation RootViewController

 

...

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view from its nib.

    UIBarButtonItem *testButton = [[UIBarButtonItem alloc] initWithTitle:@"test" style:UIBarButtonItemStyleBordered target:self action:@selector(testClicked:)];

    self.navigationItem.leftBarButtonItem = testButton;

 

    UIBarButtonItem *addButton =[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(addClicked:)];

    self.navigationItem.rightBarButtonItem = addButton;

 

    [testButton release];

    [addButton release];

}

 

...

 

- (void)addClicked:(id)sender

{

    NSLog(@"add button clicked.");

}

@end

创建这些按钮很方便，只要打入UIBarButtonSystemItem，Xcode会自动补全，后面列出的都是系统预设按钮。

还有一些按钮按钮和行为，系统已经帮我们定义好了，Edit和Done按钮行为，我们只要实现它就好了

//  RootViewController.m

 

#import "RootViewController.h"

#import "SecondViewController.h"

 

@implementation RootViewController

 

...

 

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view from its nib.

    UIBarButtonItem *testButton = [[UIBarButtonItem alloc] initWithTitle:@"test" style:UIBarButtonItemStyleBordered target:self action:@selector(testClicked:)];

    self.navigationItem.leftBarButtonItem = testButton;

 

    self.navigationItem.rightBarButtonItem = self.editButtonItem;

 

    [testButton release];

}

 

...

 

- (void)setEditing:(BOOL)editing animated:(BOOL)animated

{

    [super setEditing:editing animated:animated];

    if (editing) {

        NSLog(@"editing");

    } else {

        NSLog(@"done");

    }

}

 

@end

有时候我们会在导航栏上看到这样的按钮排列，这个又是怎么实现的

//  RootViewController.m

 

#import "RootViewController.h"

#import "SecondViewController.h"

 

@implementation RootViewController

 

...

 

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view from its nib.

    UIBarButtonItem *testButton = [[UIBarButtonItem alloc] initWithTitle:@"test" style:UIBarButtonItemStyleBordered target:self action:@selector(testClicked:)];

    self.navigationItem.leftBarButtonItem = testButton;

 

    self.navigationItem.rightBarButtonItem = self.editButtonItem;

    NSArray *segmentButtons = [NSArray arrayWithObjects:@"升序", @"降序", nil];

    UISegmentedControl *segmentedController = [[UISegmentedControl alloc] initWithItems:segmentButtons];

    segmentedController.segmentedControlStyle = UISegmentedControlStyleBar;

    [segmentedController addTarget:self action:@selector(segmentAction:) forControlEvents:UIControlEventValueChanged];

    self.navigationItem.titleView = segmentedController;

 

    [testButton release];

    [segmentedController release];

}

 

...

- (void)segmentAction:(id)sender

{

    switch ([sender selectedSegmentIndex]) {

        case 0:

            NSLog(@"button 0 clicked");

            break;

 

        case 1:

            NSLog(@"button 1 clicked");

            break;

 

        default:

            break;

    }

}

...

@end

返回按钮的定制，如果导航栏的标题很长的话，返回按钮的长度也会变长，而我们并不希望这样的事发生，我们可以设置返回按钮的标题来达到目的，关键是我们要返回哪个视图控制器，就在哪个视图控制器类里修改。

//  RootViewController.m

 

#import "RootViewController.h"

#import "SecondViewController.h"

 

@implementation RootViewController

...

- (void)viewDidLoad

{

    [super viewDidLoad];

    // Do any additional setup after loading the view from its nib.

    ...

    UIBarButtonItem *backButton = [[UIBarButtonItem alloc] initWithTitle:@"Root" style:UIBarButtonItemStylePlain target:nil action:nil];

    self.navigationItem.backBarButtonItem = backButton;

 

    [backButton release];

}

...

@end

完整代码

下载