定製iOS 7中的導航欄和狀態欄

因爲種種緣由，申請了一個開源中國的賬號，也許會因爲個人不耐心，不會親自去一步步的寫博文，但準備把本身看到的好的，都轉載過來，就當時資源的存儲，也算是一種推廣吧。

iOS 7 教程：定製iOS 7中的導航欄和狀態欄

注：本文譯自Customizing Navigation Bar and Status Bar in iOS 7

近期，跟大多數開發者同樣，我也正忙於對程序進行升級以適配iOS 7。最新的iOS 7外觀上有大量的改動。從開發者的角度來看，導航欄和狀態欄就發生了明顯的變化。狀態欄如今是半透明的了，這也就意味着導航欄會顯示在狀態欄後面。有些狀況下，導航欄的背景圖片能夠延伸顯示到狀態欄後面。

以前我曾經寫過一篇關於如何定製導航欄的文章。不過如今是時候對其進行更新了。下面就是本文將要介紹的內容：

• iOS 7中默認的導航欄
• 設置導航欄的背景顏色
• 在導航欄中使用背景圖片
• 定製返回按鈕的顏色
• 修改導航欄標題的字體
• 修改導航欄標題爲圖片
• 添加多個按鈕
• 修改狀態欄的風格
• 隱藏狀態欄
• 總結

本文提供的代碼須要用Xcode 5來執行。若是你還在使用老版本的Xcode，那麼在運行示例以前請將Xcode升級到Xcode 5。

iOS 7中默認的導航欄

在開始定製以前，咱們先來看看iOS 7中默認導航欄的外觀。經過Xcode用Single View Controller模板建立一個工程。而後將view controller嵌入到一個navigation controller中。若是你不想從頭開始，那麼也能夠在這裏下載到這個示例工程。

Xcode 5包含有iOS 6和iOS 7模擬器，咱們能夠在這兩個不一樣的模擬器版本中運行示例程序，進行對比，以下圖所示：

如上圖所示，在iOS 7中的導航欄默認狀況下跟狀態欄是交織在一塊兒的，而且它的顏色也被修改成亮灰色。

設置導航欄的背景顏色

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

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

效果以下圖所示：

通常狀況，咱們都會使用本身的顏色，下面這個宏用來設置RGB顏色很是方便：

1	#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文件中，而後經過這個宏來建立一個UIColor對象(根據指定的RGB)。以下示例：

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

默認狀況下，導航欄的translucent屬性爲YES。另外，系統還會對全部的導航欄作模糊處理，這樣可讓iOS 7中導航欄的顏色更加飽和。以下圖，是translucent值爲NO和YES的對比效果：

要想禁用translucent屬性，能夠在Storyboard中選中導航欄，而後在Attribute Inspectors中，取消translucent的勾選。

在導航欄中使用背景圖片

若是但願在導航欄中使用一個圖片當作背景，那麼你須要提供一個稍微高一點的圖片(這樣能夠延伸到導航欄背後)。導航欄的高度從44 points(88 pixels)變爲了64 points(128 pixels)。

咱們依然可使用setBackgroundImage:方法爲導航欄設置自定義圖片。以下代碼所示：

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

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

定製返回按鈕的顏

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

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

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

若是想要用本身的圖片替換V型，能夠設置圖片的backIndicatorImage和backIndicatorTransitionMaskImage。以下代碼所示：

1 2	[[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

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

1 2 3 4 5 6 7

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，那麼只須要使用下面這行代碼便可：

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

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

具體效果以下圖所示：

添加多個按鈕

一樣，這個技巧也不是iOS 7的，開發者常常會在導航欄中添加多個按鈕，因此我決定在這裏進行介紹。咱們能夠在導航欄左邊或者右邊添加多個按鈕。例如，咱們但願在導航欄右邊添加一個照相機和分享按鈕，那隻須要使用下面的代碼便可：

1 2 3 4 5

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;

以下效果：

修改狀態欄的風格

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

如上圖這種狀況下，咱們可能但願將導航欄的風格修改成亮色。這裏有兩個方法能夠實現。在iOS 7中，咱們能夠在每一個view controller中overridingpreferredStatusBarStyle:方法，以下所示：

1 2 3 4

-(UIStatusBarStyle)preferredStatusBarStyle { return UIStatusBarStyleLightContent; }

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

在iOS 7中，經過上面的方法來修改狀態欄風格很是的棒。另外，咱們也可使用UIApplication的statusBarStyle方法來設置狀態欄，不過，首先須要中止使用View controller-based status bar appearance。在project target的Info tab中，插入一個新的key，名字爲View controller-based status bar appearance，並將其值設置爲NO。

而後就可使用下面的代碼來設置狀態欄風格了：

1	[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

隱藏狀態欄

有時候咱們須要隱藏狀態欄，那麼此時咱們在view controller中override方法prefersStatusBarHidden:便可，以下代碼所示：

1 2 3 4

- (BOOL)prefersStatusBarHidden { return YES; }

總結

iOS 7給開發者提供了一些新的自由度來定製導航欄和狀態欄的外觀。但願上面的這些技巧能對你有用。

這裏能夠下載到示例工程源碼。只須要取消相關代碼註釋便可進行測試。