在上图中红线框住的就是导航栏,应用也很广泛,系统自带应用也在用它。如何从零创建一个导航栏应用。
新建项目,可以选择“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