自定義ios7標題欄和狀態欄

跟你們同樣，我一直忙碌的適配個人APP在ios7下的表現。iOS7的最新版本引入了大量的視覺變化。從開發人員的角度來看，導航欄和狀態欄是2個最顯而易見的變化。狀態欄如今是透明/半透明的，也就是說view 能夠透過狀態欄,導航欄的背景圖像能夠向上延伸的狀態欄的後面。

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

若是你本身閱讀此片文章 你能夠學會如上的幾個技巧:

本工程是在xcode5下編寫的。因此，若是你還在使用舊版本的Xcode，請確保您運行示例Xcode項目以前升級到Xcode中5。

默認的導航欄在iOS中7

在咱們進去的定製，讓咱們先來看看由Xcode 5和iOS 7生成的默認導航欄。只需用單-視圖-控制器模板的Xcode項目。嵌入視圖控制器在導航控制器。若是您不想從頭開始，你能夠下載這個示例的Xcode項目。

Xcode5下面有iOS 6和iOS7兩個模擬器。你能夠嘗試用這兩個不一樣版本的模擬器運行示例項目。

正如你所看到的，在iOS的7導航欄默認是交織在一塊兒的狀態欄。默認的顏色也改成淺灰色，以及。

更改導航欄的背景顏色

在iOS7，tintColor屬性不能再用於設置欄的顏色。相反，使用barTintColor屬性來改變背景顏色。您能夠將下面的代碼在didFinishLaunchingWithOptions：AppDelegate.m文件下。

1	[ [ 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的開始，並使用它來建立與任何RGB色彩你想要的任何的UIColor對象。下面是一個例子：

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

默認狀況下，導航欄的半透明屬性設置爲YES。此外，還有適用於全部導航欄系統模糊。在此設定下，iOS的7趨於飽和度的欄的顏色。下面是示例導航欄用不一樣的半透明設置。

要禁用半透明的屬性，你能夠簡單地選擇在xib的導航欄。在屬性檢查裏面，取消半透明覆選框,以下圖。

在導航欄使用背景圖片

若是您的應用程序使用了自定義圖像做爲欄的背景，你須要提供一個「更大」的圖片，使其延伸了狀態欄的後面。導航欄的高度是從44點（88像素）更改成64點（128像素）。

你仍然能夠使用了setBackgroundImage：方法來指定自定義圖像的導航欄。下面是代碼行設置背景圖片：

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

 

例程捆綁了兩種不一樣的背景圖片：nav_bg.png和nav_bg_ios7.png。

vcC4sbO+sM28xqw=" class="aligncenter size-full wp-image-2553" src="http://www.2cto.com/uploadfile/Collfiles/20131208/Navigation-Bar-Background-Image.jpg" />

改變導航欄標題的字體

就像iOS 6，您能夠經過使用導航欄的「titleTextAttributes」屬性來自定義的文本樣式。您能夠指定字體，文字顏色，文字陰影顏色，文字陰影在文本標題偏移屬性字典，使用下面的文本屬性鍵：

• UITextAttributeFont - 字體
• UITextAttributeTextColor - 文字顏色
• UITextAttributeTextShadowColor - 文字陰影顏色
• UITextAttributeTextShadowOffset - 偏移用於文本陰影

  下面是示例代碼片斷改變的導航欄標題的字體樣式：

  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]];

   

  若是您更改該示例應用程序，導航欄中的標題看起來應該像這樣：

  自定義後退按鈕的顏色

  在iOS7，全部的欄按鈕都是沒編輯的的。你能夠改變tintColor屬性，它提供了一個快速和簡單的方式，。下面是一個示例代碼片斷：

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

  除了後退按鈕，請注意，tintColor屬性影響全部按鈕標題和按鈕圖像。

  若是你想使用一個自定義圖像來替換默認的字體，能夠設置backIndicatorImage和backIndicatorTransitionMaskImage。

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

   

  圖像的顏色由tintColor屬性控制。

  使用圖片做爲導航欄標題

  不想標題欄是光禿禿的文字？您能夠經過使用代碼行中的圖像或標誌取代它：

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

  咱們簡單地改變titleview用來自定義圖像來。這不是在iOS7的新功能。該代碼也適用於較低版本的iOS。

  添加多個欄按鈕項目

  一樣，這個技巧是否是專門爲iOS 7。，您但願添加導航欄的一側不止一個欄按鈕項目。不管是leftBarButtonItems和rightBarButtonItems 您在導航欄左側/右側指定自定義欄按鈕項目。好比你想添加一個攝像頭和一個共享按鈕右側的吧。您能夠使用下面的代碼：

  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的發佈，你能夠改變每一個視圖控制器狀態欄的外觀。您能夠使用UIStatusBarStyle常量來指定狀態欄的內容是否應該或深或淺。默認狀況下，狀態欄會顯示暗的內容。換句話說，如時間，電池指示燈和Wi-Fi信號的項目顯示爲暗色。若是您使用的是深色背景在導航欄上，你最終會像這樣：

  在這種狀況下，你可能須要的狀態欄的風格改變從暗到亮。有兩種方法能夠作到這一點。在iOS系統7，你能夠控制從單個視圖控制器經過覆蓋preferredStatusBarStyle狀態欄的樣式：

  -(UIStatusBarStyle)preferredStatusBarStyle
  {
  return UIStatusBarStyleLightContent;
  }
  

  對於示例應用程序，只要把上面的代碼中RecipeNavigationController.m和狀態欄和白得的內容。

  上面介紹的方法是首選的方法來改變狀態欄風格的iOS 7。或者，您也能夠使用的UIApplication statusBarStyle方法設置狀態欄的風格。但首先你須要選擇退出「「View controller-based status bar appearance」。根據項目目標的信息選項卡中，插入一個名爲「View controller-based status bar appearance」新字符串並將其值設置爲NO。

  經過禁用「View controller-based status bar appearance」，您能夠經過使用下面的代碼設置狀態欄的樣式：

  1	[ [的UIApplication sharedApplication ] setStatusBarStyle ： UIStatusBarStyleLightContent ] ;

  隱藏狀態欄

  在任何狀況下，你要隱藏狀態欄，能夠覆蓋prefersStatusBarHidden：在你的控制器：

  - (BOOL)prefersStatusBarHidden { return YES; }

  總結

  iOS的7爲開發人員提供新的自由定製的導航欄和狀態欄的外觀。若是您是從的iOS 6移植應用程序到iOS 7或建立一個全新的應用程序爲iOS 7，我但願你會發現這些有用的技巧。

  爲了您的完整的參考，你能夠從這裏下載本演示項目的源代碼。只是取消註釋在示例項目中的任何代碼片斷來測試的變化。

  像大家許多人，我還在探索的iOS 7 SDK的全部新的變化。我毫不是在iOS 7的專家。若是您發現文中的任何錯誤，請讓我知道。若是您發現與導航欄和狀態欄的任何提示和技巧，也請與咱們留下評論以下分享。