http://www.cocoachina.com/industry/20131104/7287.html -- 轉載

近期，跟大多數(shù)開發(fā)者一樣，我也正忙于對程序進行升級以適配iOS 7。最新的iOS 7外觀上有大量的改動。從開發(fā)者的角度來看，導航欄和狀態(tài)欄就發(fā)生了明顯的變化。狀態(tài)欄現(xiàn)在是半透明的了，這也就意味著導航欄會顯示在狀態(tài)欄后面。有些情況下，導航欄的背景圖片可以延伸顯示到狀態(tài)欄后面。

之前我曾經寫過一篇關于如何定制導航欄的文章。不過現(xiàn)在是時候對其進行更新了。下面就是本文將要介紹的內容：

iOS 7中默認的導航欄

設置導航欄的背景顏色

在導航欄中使用背景圖片

定制返回按鈕的顏色

修改導航欄標題的字體

修改導航欄標題為圖片

添加多個按鈕

修改狀態(tài)欄的風格

隱藏狀態(tài)欄

總結

本文提供的代碼需要用Xcode 5來執(zhí)行。如果你還在使用老版本的Xcode，那么在運行示例之前請將Xcode升級到Xcode 5。

iOS 7中默認的導航欄

在開始定制之前，我們先來看看iOS 7中默認導航欄的外觀。通過Xcode用Single View Controller模板創(chuàng)建一個工程。然后將view controller嵌入到一個navigation controller中。如果你不想從頭開始，那么也可以在這里下載到這個示例工程。Xcode 5包含有iOS 6和iOS 7模擬器，我們可以在這兩個不同的模擬器版本中運行示例程序，進行對比，如下圖所示：

如上圖所示，在iOS 7中的導航欄默認情況下跟狀態(tài)欄是交織在一起的，并且它的顏色也被修改為亮灰色。

設置導航欄的背景顏色

在iOS 7中，不再使用tintColor屬性來設置導航欄的顏色，而是使用barTintColor屬性來修改背景色。我們可以在AppDelegate.m文件中的方法didFinishLaunchingWithOptions:里面添加如下代碼來修改顏色：

[[UINavigationBar appearance] setBarTintColor:[UIColor yellowColor]];

效果如下圖所示：

一般情況，我們都會使用自己的顏色，下面這個宏用來設置RGB顏色非常方便：

#define UIColorFromRGB(rgbValue) [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16))/255.0 green:((float)((rgbValue & 0xFF00) >> 8))/255.0 blue:((float)(rgbValue & 0xFF))/255.0 alpha:1.0]

將上面這個宏放到AppDelegate.m文件中，然后通過這個宏來創(chuàng)建一個UIColor對象(根據(jù)指定的RGB)。如下示例：

[[UINavigationBar appearance] setBarTintColor:UIColorFromRGB(0x067AB5)];

默認情況下，導航欄的translucent屬性為YES。另外，系統(tǒng)還會對所有的導航欄做模糊處理，這樣可以讓iOS 7中導航欄的顏色更加飽和。如下圖，是translucent值為NO和YES的對比效果：

要想禁用translucent屬性，可以在Storyboard中選中導航欄，然后在Attribute Inspectors中，取消translucent的勾選。

在導航欄中使用背景圖片

如果希望在導航欄中使用一個圖片當做背景，那么你需要提供一個稍微高一點的圖片(這樣可以延伸到導航欄背后)。導航欄的高度從44 points(88 pixels)變?yōu)榱?4 points(128 pixels)。我們依然可以使用setBackgroundImage:方法為導航欄設置自定義圖片。如下代碼所示：

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"nav_bg.png"] forBarMetrics:UIBarMetricsDefault];

示例工程中提供了兩個背景圖片：nav_bg.png 和 nav_bg_ios7.png。運行一下試試看吧，如下效果：

定制返回按鈕的顏

在iOS 7中，所有的按鈕都是無邊框的。其中返回按鈕會有一個V型箭頭，以及上一個屏幕中的標題(如果上一屏幕的標題是空，那么就顯示”返回”)。要想給返回按鈕著色，可以使用tintColor屬性。如下代碼所示：

[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

除了返回按鈕，tintColor屬性會影響到所有按鈕標題和圖片。

如果想要用自己的圖片替換V型，可以設置圖片的backIndicatorImage和backIndicatorTransitionMaskImage。如下代碼所示：

[[UINavigationBar appearance] setBackIndicatorImage:[UIImage imageNamed:@"back_btn.png"]];

[[UINavigationBar appearance] setBackIndicatorTransitionMaskImage:[UIImage imageNamed:@"back_btn.png"]];

圖片的顏色是由tintColor屬性控制的。

修改導航欄標題的字體

跟iOS 6一樣，我們可以使用導航欄的titleTextAttributes屬性來定制導航欄的文字風格。在text attributes字典中使用如下一些key，可以指定字體、文字顏色、文字陰影色以及文字陰影偏移量：

UITextAttributeFont – 字體key

UITextAttributeTextColor – 文字顏色key

UITextAttributeTextShadowColor – 文字陰影色key

UITextAttributeTextShadowOffset – 文字陰影偏移量key

如下代碼所示，對導航欄的標題風格做了修改：

NSShadow *shadow = [[NSShadow alloc] init];

shadow.shadowColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.8];

shadow.shadowOffset = CGSizeMake(0, 1);

[[UINavigationBar appearance] setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:

[UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:245.0/255.0 alpha:1.0], NSForegroundColorAttributeName,

shadow, NSShadowAttributeName,

[UIFont fontWithName:@"HelveticaNeue-CondensedBlack" size:21.0], NSFontAttributeName, nil]];

運行效果如下圖所示：

修改導航欄標題為圖片

如果要想將導航欄標題修改為一個圖片或者logo，那么只需要使用下面這行代碼即可：

self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"appcoda-logo.png"]];

上面的代碼簡單的修改了titleView屬性，將一個圖片賦值給它。 注意：這不是iOS 7中的新功能，之前的iOS版本就可以已經有了。具體效果如下圖所示：

添加多個按鈕

同樣，這個技巧也不是iOS 7的，開發(fā)者經常會在導航欄中添加多個按鈕，所以我決定在這里進行介紹。我們可以在導航欄左邊或者右邊添加多個按鈕。例如，我們希望在導航欄右邊添加一個照相機和分享按鈕，那只需要使用下面的代碼即可：

UIBarButtonItem *shareItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:nil];

UIBarButtonItem *cameraItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCamera target:self action:nil];

NSArray *actionButtonItems = @[shareItem, cameraItem];

self.navigationItem.rightBarButtonItems = actionButtonItems;

如下效果：

修改狀態(tài)欄的風格

在老版本的iOS中，狀態(tài)欄永遠都是白色風格。而在iOS 7中，我們可以修改每個view controller中狀態(tài)欄的外觀。通過UIStatusBarStyle常量可以指定狀態(tài)欄的內容是暗色或亮色。默認情況下，狀態(tài)欄的顯示是暗色。也就是說，狀態(tài)欄上的時間、電池指示器和Wi-Fi信號顯示為暗色。如果導航欄中使用暗色為背景，那么看起來的效果如下圖所示：

如上圖這種情況下，我們可能希望將導航欄的風格修改為亮色。這里有兩個方法可以實現(xiàn)。在iOS 7中，我們可以在每個view controller中overridingpreferredStatusBarStyle:方法，如下所示：

-(UIStatusBarStyle)preferredStatusBarStyle

{

return UIStatusBarStyleLightContent;

}

上面代碼的效果如下圖所示：

在iOS 7中，通過上面的方法來修改狀態(tài)欄風格非常的棒。另外，我們也可以使用UIApplication的statusBarStyle方法來設置狀態(tài)欄，不過，首先需要停止使用View controller-based status bar appearance。在project target的Info tab中，插入一個新的key，名字為View controller-based status bar appearance，并將其值設置為NO。

然后就可以使用下面的代碼來設置狀態(tài)欄風格了：

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

隱藏狀態(tài)欄

有時候我們需要隱藏狀態(tài)欄，那么此時我們在view controller中override方法prefersStatusBarHidden:即可，如下代碼所示：

- (BOOL)prefersStatusBarHidden

{

return YES;

}

總結

iOS 7給開發(fā)者提供了一些新的自由度來定制導航欄和狀態(tài)欄的外觀。希望上面的這些技巧能對你有用。這里可以下載到示例工程源碼。只需要取消相關代碼注釋即可進行測試。