ios7狀態列和導航條的一些設定

標籤：

iOS7的最新版本引入了大量的視覺變化。從開發人員的角度來看，導覽列和狀態列是2個最顯而易見的變化。狀態列現在是透明/半透明的，也就是說view 可以透過狀態列,導覽列的背景映像可以向上延伸的狀態列的後面。預設的導覽列在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 ] ] ;

 

簡單地把它在某處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上狀態列 就是指的最上面的20像素高的部分 
狀態列分前後兩部分，要分清這兩個概念，後面會用到：

• 前景部分：就是指的顯示電池、時間等部分；

• 背景部分：就是顯示黑色或者圖片的背景部分；

  如：前景部分為白色，背景部分為黑色

設定statusBar的【前景部分】

簡單來說，就是設定顯示電池電量、時間、網路部分標示的顏色， 
這裡只能設定兩種顏色：

• 預設的黑色（UIStatusBarStyleDefault）
• 白色（UIStatusBarStyleLightContent）

可以設定的地方有兩個：plist設定裡面 和 程式碼裡

1.plist設定statusBar

在plist裡增加一行 UIStatusBarStyle(或者是“Status bar style”也可以)，這裡可以設定兩個值，就是上面提到那兩個 
UIStatusBarStyleDefault 和 UIStatusBarStyleLightContent

這樣在app啟動的launch頁顯示的時候，statusBar的樣式就是上面plist設定的風格。

2.程式碼裡設定statusBar

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];  

或者

//相對於上面的介面，這個介面可以動畫的改變statusBar的前景色彩  [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent animated:YES];

不僅如此，ios還很貼心的在UIViewController也增加了幾個介面， 
目的是讓狀態列根據當前顯示的UIViewController來定製statusBar的前景部分。

• - (UIStatusBarStyle)preferredStatusBarStyle;

• - (UIViewController *)childViewControllerForStatusBarStyle;

• - (void)setNeedsStatusBarAppearanceUpdate

- (UIStatusBarStyle)preferredStatusBarStyle:

在你自己的UIViewController裡重寫此方法，返回你需要的值(UIStatusBarStyleDefault 或者 UIStatusBarStyleLightContent)；

注意：

• 這裡如果你只是簡單的return一個固定的值，那麼該UIViewController顯示的時候，程式就會馬上調用該方法，來改變statusBar的前景部分；
• 如果在該UIViewController已經在顯示在當前，你可能還要在當前頁面不時的更改statusBar的前景色彩，那麼，你首先需要調用下面的setNeedsStatusBarAppearanceUpdate方法(這個方法會通知系統去調用當前UIViewController的preferredStatusBarStyle方法)， 這個和UIView的setNeedsDisplay原理差不多(調用UIView對象的setNeedsDisplay方法後，系統會在下次頁面重新整理時，調用重繪該view，系統最快能1秒重新整理60次頁面，具體要看程式設定)。

- (UIViewController *)childViewControllerForStatusBarStyle:

這個介面也很重要，預設傳回值為nil。當我們調用setNeedsStatusBarAppearanceUpdate時，系統會調用application.window的rootViewController的preferredStatusBarStyle方法，我們的程式裡一般都是用UINavigationController做root，如果是這種情況，那我們自己的UIViewController裡的preferredStatusBarStyle根本不會被調用； 
這種情況下childViewControllerForStatusBarStyle就派上用場了， 
我們要子類化一個UINavigationController，在這個子類裡面重寫childViewControllerForStatusBarStyle方法，如下：

- (UIViewController *)childViewControllerForStatusBarStyle{    return self.topViewController;}

上面代碼的意思就是說，不要調用我自己(就是UINavigationController)的preferredStatusBarStyle方法，而是去調用navigationController.topViewController的preferredStatusBarStyle方法，這樣寫的話，就能保證當前顯示的UIViewController的preferredStatusBarStyle方法能影響statusBar的前景部分。

另外，有時我們的當前顯示的UIViewController可能有多個childViewController，重寫當前UIViewController的childViewControllerForStatusBarStyle方法，讓childViewController的preferredStatusBarStyle生效(當前UIViewController的preferredStatusBarStyle就不會被調用了)。

簡單來說，只要UIViewController重寫的的childViewControllerForStatusBarStyle方法傳回值不是nil，那麼，UIViewController的preferredStatusBarStyle方法就不會被系統調用，系統會調用childViewControllerForStatusBarStyle方法返回的UIViewController的preferredStatusBarStyle方法。

- (void)setNeedsStatusBarAppearanceUpdate:

讓系統去調用application.window的rootViewController的preferredStatusBarStyle方法,如果rootViewController的childViewControllerForStatusBarStyle傳回值不為nil，則參考上面的講解。

設定statusBar的【背景部分】

背景部分，簡單來說，就是背景色；改變方法有兩種：

系統提供的方法

navigationBar的setBarTintColor介面，用此介面可改變statusBar的背景色

注意：一旦你設定了navigationBar的- (void)setBackgroundImage:(UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics介面，那麼上面的setBarTintColor介面就不能改變statusBar的背景色，statusBar的背景色就會變成純黑色。

另闢蹊徑

建立一個UIView， 
設定該UIView的frame.size 和statusBar大小一樣， 
設定該UIView的frame.origin 為{0,-20}, 
設定該UIView的背景色為你希望的statusBar的顏色， 
在navigationBar上addSubView該UIView即可。

隱藏狀態列

在任何情況下，你要隱藏狀態列，可以覆蓋prefersStatusBarHidden：在你的控制器：

- (BOOL)prefersStatusBarHidden { return YES; }

總結

iOS的7為開發人員提供新的自由定製的導覽列和狀態列的外觀。如果您是從的iOS 6移植應用程式到iOS 7或建立一個全新的應用程式為iOS 7，我希望你會發現這些有用的技巧。

 

自訂導航條和狀態列：

在自訂導覽列背景時，可能會遇到以下一些問題：

1、當設定導覽列背景後，狀態列的顏色也會跟著一起改變掉，這可能不是你說希望看到的

2、IOS7以上的版本和低版本顯示出來的導覽列高度位置有差別，這個差別就是狀態列的高度20，為了相容低版本，必須統一

解決思路：

1、不正常的是狀態列的背景也一起變了，而狀態列的文字是可以通過其他API去設定的：如 [[UIApplicationsharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

2、文字是附於背景上方的，因此考慮在這之間插入一個矩形顏色塊（甚至圖片也可以）

3、根據這種思路，第二種思路也隨之產生，就是製作出20+44=64高度的圖片，作為導覽列背景圖，其中上方20為狀態列的顏色。

4、本文實現第一種思路，並且模擬器和真機以及IOS6，7均已驗證可行

//7.0以上版本通過一句代碼解決高度上升問題

if ([[[UIDevicecurrentDevice] systemVersion] doubleValue]>=7.0) {

     self.edgesForExtendedLayout=UIRectEdgeNone;

}

//建立一個高20的假狀態列背景

UIView *statusBarView = [[UIView alloc] initWithFrame:CGRectMake(0, -20, 320, 20)];

//將它的顏色設定成你所需要的，這裡我選擇了黑色，表示我很沉穩

    statusBarView.backgroundColor=[UIColor blackColor];

//這裡我的思路是：之前不理想的狀態是狀態列顏色也變成了導覽列的顏色，但根據這種情況，反而協助我判斷出此時的狀態列也是導覽列的一部分，而狀態列文字浮於上方，因此理論上直接在導覽列上添加一個subview就是他們中間的那一層了。

//推得這樣的代碼：

    [self.navigationController.navigationBar addSubview:statusBarView];

//修改導覽列文字顏色，這裡我選擇白色，表示我很純潔

    [[UIApplicationsharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

//設定導覽列的背景圖片

[self.navigationController.navigationBarsetBackgroundImage:[UIImageimageNamed:@"bg.jpg"] forBarMetrics:UIBarMetricsDefault];

ios7狀態列和導航條的一些設定