iOS應(yīng)用開發(fā)中導(dǎo)航欄按鈕UIBarButtonItem的添加教程

更新時(shí)間：2016年02月04日 09:47:59 作者：容芳志

這篇文章主要介紹了iOS應(yīng)用開發(fā)中導(dǎo)航欄按鈕UIBarButtonItem的添加教程,文中詳細(xì)介紹了使用UINavigationController導(dǎo)航控制器添加的過程,需要的朋友可以參考下

1、UINavigationController導(dǎo)航控制器如何使用
UINavigationController可以翻譯為導(dǎo)航控制器，在iOS里經(jīng)常用到。
我們看看它的如何使用：
下面的圖顯示了導(dǎo)航控制器的流程。最左側(cè)是根視圖，當(dāng)用戶點(diǎn)擊其中的General項(xiàng)時(shí) ，General視圖會滑入屏幕；當(dāng)用戶繼續(xù)點(diǎn)擊Auto-Lock項(xiàng)時(shí)，Auto-Lock視圖將滑入屏幕。相應(yīng)地，在對象管理上，導(dǎo)航控制器使用了導(dǎo)航堆棧。根視圖控制器在堆棧最底層，接下來入棧的是General視圖控制器和Auto-Lock視圖控制器?？梢哉{(diào)用pushViewControllerAnimated:方法將視圖控制器推入棧頂，也可以調(diào)用popViewControllerAnimated:方法將視圖控制

20162494526157.png (636×288)

2、UINavigationController的結(jié)構(gòu)組成
看下圖，UINavigationController有Navigation bar ,Navigation View ,Navigation toobar等組成。

20162494548655.png (646×476)

現(xiàn)在我們建立一個(gè)例子，看看如何使用UINavigationController
3、新建一個(gè)項(xiàng)目
命名為UINavigationControllerDemo,為了更好理解UINavigationController，我們選擇Empty Application模板

20162494608179.png (728×491)

4、創(chuàng)建一個(gè)View Controller，命名為RootViewController：依次選擇File——New——New File，默認(rèn)勾上With XIB for user interface.

20162494625133.png (728×491)

選擇正確位置創(chuàng)建完成，這時(shí)項(xiàng)目里多了三個(gè)文件，分別是RootViewController.h RootViewController.m RootViewController.xib文件。
打開RootViewController.xib，添加一個(gè)按鈕控件，按鈕Button改成：Goto SecondView,為跳轉(zhuǎn)做準(zhǔn)備

20162494706858.png (923×284)

5、打開AppDelegate.h，向其中添加屬性：

復(fù)制代碼代碼如下:

@property (strong, nonatomic) UINavigationController *navController;

添加后AppDelegate.h文件代碼如下：

復(fù)制代碼代碼如下:

#import <UIKit/UIKit.h>  

@class ViewController;  

@interface AppDelegate : UIResponder <UIApplicationDelegate>  

@property (strong, nonatomic) UIWindow *window;  

@property (strong, nonatomic) ViewController *viewController;  

@property (strong, nonatomic) UINavigationController *navController;  

@end

6、在AppDelegate.m 文件的didFinishLaunchingWithOptions方法中創(chuàng)建添加navController，RootViewController視圖。

復(fù)制代碼代碼如下:

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

{  

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

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

    rootView.title = @"Root View";  

    self.navController = [[UINavigationController alloc] init];  

    [self.navController pushViewController:rootView animated:YES];  

    [self.window addSubview:self.navController.view];  

    [self.window makeKeyAndVisible];  

    return YES;  

}

給rootView的titie命名為 Root View，好識別View直接的切換關(guān)系。用pushViewController把rootView加入到navController的視圖棧中。
7、現(xiàn)在Root視圖添加完成
看看效果：

20162494734438.png (368×716)

現(xiàn)在還沒有Navigation bar 。只有title。
8、添加UIBarButtonItem
bar ButtonItem分左右UIBarButtonItem。我們把左右的都添加上去。
在RootViewController.m中添加代碼如下：

復(fù)制代碼代碼如下:

- (void)viewDidLoad  

{  

    [super viewDidLoad];  

    UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(selectLeftAction:)];  

    self.navigationItem.leftBarButtonItem = leftButton;  

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

    self.navigationItem.rightBarButtonItem = rightButton;<p class="p1">}

這樣添加了UIBarButtonItem了，效果如下：

20162494751281.png (362×214)

這里重點(diǎn)介紹下

復(fù)制代碼代碼如下:

UIBarButtonItem *leftButton = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemActiontarget:selfaction:@selector(selectLeftAction:)];

UIBarButtonSystemItemAction的風(fēng)格，這是系統(tǒng)自帶的按鈕風(fēng)格，看下圖，你不用一個(gè)個(gè)試驗(yàn)，你也知道想用那個(gè)item，如下圖：

20162494809920.png (692×640)

9、響應(yīng)UIBarButtonItem的事件的實(shí)現(xiàn)
我們在 action:@selector(selectLeftAction:);
action添加了selectLeftAction和selectRightAction
在RootViewController.m文件中添加代碼實(shí)現(xiàn)：

復(fù)制代碼代碼如下:

-(void)selectLeftAction:(id)sender  

{  

    UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:@"你點(diǎn)擊了導(dǎo)航欄左按鈕" delegate:self  cancelButtonTitle:@"確定" otherButtonTitles:nil, nil];  

    [alter show];  

}  

-(void)selectRightAction:(id)sender  

{  

    UIAlertView *alter = [[UIAlertView alloc] initWithTitle:@"提示" message:@"你點(diǎn)擊了導(dǎo)航欄右按鈕" delegate:self  cancelButtonTitle:@"確定" otherButtonTitles:nil, nil];  

    [alter show];  

}

這樣在點(diǎn)擊左右的UIBarButtonItem時(shí)，彈出提示：

20162494825463.png (281×302)

兩個(gè)按鈕切換的簡單例子

下面這個(gè)代碼例子的背景是：導(dǎo)航條右側(cè)有個(gè) edit button，左側(cè)是 back button 和 add button。代碼實(shí)現(xiàn)的按鈕切換/隱藏功能具體就是：點(diǎn)擊 edti button 的話，back button 隱藏，同時(shí)顯示 add button。用戶編輯完以后則顯示 back button 隱藏 add button。這一功能在很多應(yīng)用里都會用到，而且適當(dāng)隱藏掉無用按鈕對保持界面簡潔以及引導(dǎo)用戶操作都是有意義的。

復(fù)制代碼代碼如下:

- (void)viewDidLoad {

[super viewDidLoad];

self.navigationItem.rightBarButtonItem = self.editButtonItem;

}

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

    [super setEditing:editing animated:animated];

// Don't show the Back button while editing.

[self.navigationItem setHidesBackButton:editing animated:YES];

if (editing) {

    self.navigationItem.leftBarButtonItem = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAdd target:self action:@selector(insertMe)] autorelease];

}else {

    self.navigationItem.leftBarButtonItem = nil;

//self.navigationItem.leftBarButtonItem = [[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(backButton) ] autorelease];

 }

}