iOS開發 : Navigation Bar的簡單設定

標籤：

前面的一篇文章《iOS開發16：使用Navigation Controller切換視圖》中的小例子在運行時，螢幕上方出現的工具列就是Navigation Bar，而所謂UINavigationItem就可以理解為Navigation Bar中的內容，通過編輯UINavigationItem，我們可以使得在Navigation Bar中顯示想要的東西，比如設定標題、添加按鈕等。

這篇部落格將會以一個小例子來示範如何設定UINavigationItem。

現在我用的是Xcode 4.3，在使用上跟Xcode 4.2差不多。

1、首先運行Xcode 4.3，建立一個Single View Application，名稱為UINavigationItem Tes

2、其次，我們要使得程式運行時能夠顯示Navigation Bar：

2.1 單擊AppDelegate.h，向其中添加屬性：

@property (strong, nonatomic) UINavigationController *navController;

2.2 開啟AppDelegate.m，在@synthesize viewController = _viewController;之後添加代碼：

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

2.3 修改didFinishLaunchingWithOptions方法代碼如下：

 

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];    // Override point for customization after application launch.    self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];        self.navController = [[UINavigationController alloc] initWithRootViewController:self.viewController];     [self.window addSubview:navController.view];        [self.window makeKeyAndVisible];    return YES;}

此時運行程式，會發現出現了Navigation Bar：

 

下面講一下關於NavigationItem的簡單設定。

3、設定標題：

開啟ViewController.m，在viewDidLoad方法中[super viewDidLoad];之後添加代碼：

self.navigationItem.title = @"標題";

運行：

 

4、自訂標題，設定titleView：

如果我們想改變標題的顏色和字型，就需要自己定義一個UILabel，並且已經設定好這個Label的內容，可以設定自己想要的字型、大小和顏色等。然後執行self.navigationItem.titleView = myLabel;就可以看到想要的效果。

4.1 開啟ViewController.h，向其中添加屬性：

@property (strong, nonatomic) UILabel *titleLabel;

4.2 開啟ViewController.m，在@implementation ViewController下面一行添加代碼：

@synthesize titleLabel;

4.3 在viewDidLoad方法中，去掉self.navigationItem.title = @"標題";，並添加代碼：

 

//自訂標題titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0 , 100, 44)];titleLabel.backgroundColor = [UIColor clearColor];  //設定Label背景透明titleLabel.font = [UIFont boldSystemFontOfSize:20];  //設定文本字型與大小titleLabel.textColor = [UIColor colorWithRed:(0.0/255.0) green:(255.0 / 255.0) blue:(0.0 / 255.0) alpha:1];  //設定文本顏色titleLabel.textAlignment = UITextAlignmentCenter;titleLabel.text = @"自訂標題";  //設定標題self.navigationItem.titleView = self.titleLabel;

運行：

 

實際上，不僅僅可以將titleView設定成Label，只要是UIView的對象都可以設為titleView，例如，將4.3中的代碼改成：

UIButton *button = [UIButtonbuttonWithType: UIButtonTypeRoundedRect];[button setTitle: @"按鈕" forState: UIControlStateNormal];[button sizeToFit];self.navigationItem.titleView = button;

則運行起來效果如下：

 

5、為Navigation Bar添加左按鈕

以下是進行leftBarButtonItem設定的代碼：

self.navigationItem.leftBarButtonItem = (UIBarButtonItem *)self.navigationItem.leftBarButtonItems = (UIBarButtonItem *)self.navigationItemsetLeftBarButtonItem:(UIBarButtonItem *)self.navigationItemsetLeftBarButtonItem:(UIBarButtonItem *) animated:(BOOL)self.navigationItemsetLeftBarButtonItems:(NSArray *)self.navigationItemsetLeftBarButtonItems:(NSArray *) animated:(BOOL)

其實很簡單，只要定義好一個UIBarButtonItem，然後執行上述某行代碼就行了。

5.1 為了使得運行時不出錯，我們在ViewController.m中添加一個空方法，由將要建立的左右按鈕使用：

//空方法-(void)myAction {}

5.2 添加一個左按鈕：

在ViewDidLoad方法最後添加代碼：

 

//添加左按鈕UIBarButtonItem *leftButton = [[UIBarButtonItem alloc]                                          initWithTitle:@"左按鈕"                                          style:UIBarButtonItemStylePlain                                          target:self                                           action:@selector(myAction)];[self.navigationItem setLeftBarButtonItem:leftButton];

運行效果如下：

 

建立一個UIBarButtonItem用的方法主要有：

[UIBarButtonItemalloc]initWithTitle:(NSString *) style:(UIBarButtonItemStyle) target:(id) action:(SEL)[UIBarButtonItemalloc]initWithBarButtonSystemItem:(UIBarButtonSystemItem) target:(id) action:(SEL)

在第一個方法中，我們可以使用的按鈕樣式有：

UIBarButtonItemStyleBorderedUIBarButtonItemStyleDoneUIBarButtonItemStylePlain

效果分別如下：

 

看上去第一個和第三個樣式效果是一樣的。

6、添加一個右按鈕

在ViewDidLoad方法最後添加代碼：

//添加右按鈕UIBarButtonItem *rightButton = [[UIBarButtonItem alloc]                                initWithBarButtonSystemItem:UIBarButtonSystemItemUndo                                target:self                                action:@selector(myAction)];self.navigationItem.rightBarButtonItem = rightButton;

運行如下：

 

這裡建立UIBarButtonItem用的方法是

[UIBarButtonItemalloc]initWithBarButtonSystemItem:(UIBarButtonSystemItem) target:(id) action:(SEL)

用了系統內建的按鈕樣式，這些樣式的標籤和效果如下：

 

注意，UIBarButtonSystemItemPageCurl只能在Tool Bar上顯示。

7、添加多個右按鈕

在ViewDidLoad方法中最後添加代碼：

 

//添加多個右按鈕UIBarButtonItem *rightButton1 = [[UIBarButtonItem alloc]                                initWithBarButtonSystemItem:UIBarButtonSystemItemDone                                target:self                                action:@selector(myAction)];UIBarButtonItem *rightButton2 = [[UIBarButtonItem alloc]                                 initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpace                                 target:nil                                 action:nil];UIBarButtonItem *rightButton3 = [[UIBarButtonItem alloc]                                 initWithBarButtonSystemItem:UIBarButtonSystemItemEdit                                 target:self                                 action:@selector(myAction)];UIBarButtonItem *rightButton4 = [[UIBarButtonItem alloc]                                 initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace                                 target:nil                                 action:nil];UIBarButtonItem *rightButton5 = [[UIBarButtonItem alloc]                                 initWithBarButtonSystemItem:UIBarButtonSystemItemOrganize                                 target:self                                 action:@selector(myAction)];NSArray *buttonArray = [[NSArray alloc]                        initWithObjects:rightButton1,rightButton2,                        rightButton3,rightButton4,rightButton5, nil];self.navigationItem.rightBarButtonItems = buttonArray;

為了更好的顯示效果，把設定titleView以及設定leftBarButtonItem的代碼注釋掉，運行效果如下：

 

上面的UIBarButtonSystemItemFixedSpace和UIBarButtonSystemItemFlexibleSpace都是系統提供的用於佔位的按鈕樣式。

8、設定Navigation Bar背景顏色

在viewDidLoad方法後面添加代碼：

//設定Navigation Bar顏色self.navigationController.navigationBar.tintColor = [UIColor colorWithRed:(218.0/255.0) green:(228.0 / 255.0) blue:(250.0 / 255.0) alpha:1];

運行如下：

 

9、設定Navigation Bar背景圖片

首先將準備好作為背景的圖片拖到工程中，我用的圖片名稱是title_bg.png。

將上面的代碼改成：

//設定Navigation Bar背景圖片UIImage *title_bg = [UIImage imageNamed:@"title_bg.png"];  //擷取圖片CGSize titleSize = self.navigationController.navigationBar.bounds.size;  //擷取Navigation Bar的位置和大小title_bg = [self scaleToSize:title_bg size:titleSize];//設定圖片的大小與Navigation Bar相同[self.navigationController.navigationBar      setBackgroundImage:title_bg     forBarMetrics:UIBarMetricsDefault];  //設定背景

之後，在ViewController.m中添加一個方法用於調整圖片大小：

//調整圖片大小- (UIImage *)scaleToSize:(UIImage *)img size:(CGSize)size{    UIGraphicsBeginImageContext(size);    [img drawInRect:CGRectMake(0, 0, size.width, size.height)];    UIImage* scaledImage = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    return scaledImage;}

運行：

 

    //設定Navigation Bar背景圖片，但是上面的狀態列和是自己原本內建的效果 ，不和導覽列一起，這個方便不適用，在iOS7之後，基本使用上面那個方法，也沒有仔細看，直接複製過來的代碼

主要是用下面這個方法：

    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"Nav_back_image.jpg"] forBarPosition:UIBarPositionTopAttached barMetrics:UIBarMetricsDefault];

 

iOS開發 : Navigation Bar的簡單設定