定制iOS 7中的导航栏和状态栏
近期，跟大多數(shù)開發(fā)者一樣，我也正忙于對(duì)程序進(jìn)行升級(jí)以適配iOS 7。最新的iOS 7外觀上有大量的改動(dòng)。從開發(fā)者的角度來看，導(dǎo)航欄和狀態(tài)欄就發(fā)生了明顯的變化。狀態(tài)欄現(xiàn)在是半透明的了，這也就意味著導(dǎo)航欄會(huì)顯示在狀態(tài)欄后面。有些情況下，導(dǎo)航欄的背景圖片可以延伸顯示到狀態(tài)欄后面。
?
之前我曾經(jīng)寫過一篇關(guān)于如何定制導(dǎo)航欄的文章。不過現(xiàn)在是時(shí)候?qū)ζ溥M(jìn)行更新了。下面就是本文將要介紹的內(nèi)容：
iOS 7中默認(rèn)的導(dǎo)航欄
設(shè)置導(dǎo)航欄的背景顏色
在導(dǎo)航欄中使用背景圖片
定制返回按鈕的顏色
修改導(dǎo)航欄標(biāo)題的字體
修改導(dǎo)航欄標(biāo)題為圖片
添加多個(gè)按鈕
修改狀態(tài)欄的風(fēng)格
隱藏狀態(tài)欄
總結(jié)
本文提供的代碼需要用Xcode 5來執(zhí)行。如果你還在使用老版本的Xcode，那么在運(yùn)行示例之前請(qǐng)將Xcode升級(jí)到Xcode 5。
?
iOS 7中默認(rèn)的導(dǎo)航欄
在開始定制之前，我們先來看看iOS 7中默認(rèn)導(dǎo)航欄的外觀。通過Xcode用Single View Controller模板創(chuàng)建一個(gè)工程。然后將view controller嵌入到一個(gè)navigation controller中。如果你不想從頭開始，那么也可以在這里下載到這個(gè)示例工程。Xcode 5包含有iOS 6和iOS 7模擬器，我們可以在這兩個(gè)不同的模擬器版本中運(yùn)行示例程序，進(jìn)行對(duì)比，如下圖所示：
如上圖所示，在iOS 7中的導(dǎo)航欄默認(rèn)情況下跟狀態(tài)欄是交織在一起的，并且它的顏色也被修改為亮灰色。
?
設(shè)置導(dǎo)航欄的背景顏色
在iOS 7中，不再使用tintColor屬性來設(shè)置導(dǎo)航欄的顏色，而是使用barTintColor屬性來修改背景色。我們可以在AppDelegate.m文件中的方法didFinishLaunchingWithOptions:里面添加如下代碼來修改顏色：
效果如下圖所示：
一般情況，我們都會(huì)使用自己的顏色，下面這個(gè)宏用來設(shè)置RGB顏色非常方便：
將上面這個(gè)宏放到AppDelegate.m文件中，然后通過這個(gè)宏來創(chuàng)建一個(gè)UIColor對(duì)象(根據(jù)指定的RGB)。如下示例：
默認(rèn)情況下，導(dǎo)航欄的translucent屬性為YES。另外，系統(tǒng)還會(huì)對(duì)所有的導(dǎo)航欄做模糊處理，這樣可以讓iOS 7中導(dǎo)航欄的顏色更加飽和。如下圖，是translucent值為NO和YES的對(duì)比效果：
要想禁用translucent屬性，可以在Storyboard中選中導(dǎo)航欄，然后在Attribute Inspectors中，取消translucent的勾選。
?
在導(dǎo)航欄中使用背景圖片
如果希望在導(dǎo)航欄中使用一個(gè)圖片當(dāng)做背景，那么你需要提供一個(gè)稍微高一點(diǎn)的圖片(這樣可以延伸到導(dǎo)航欄背后)。導(dǎo)航欄的高度從44 points(88 pixels)變?yōu)榱?4 points(128 pixels)。我們依然可以使用setBackgroundImage:方法為導(dǎo)航欄設(shè)置自定義圖片。如下代碼所示：
示例工程中提供了兩個(gè)背景圖片：nav_bg.png 和 nav_bg_ios7.png。運(yùn)行一下試試看吧，如下效果：
定制返回按鈕的顏
在iOS 7中，所有的按鈕都是無邊框的。其中返回按鈕會(huì)有一個(gè)V型箭頭，以及上一個(gè)屏幕中的標(biāo)題(如果上一屏幕的標(biāo)題是空，那么就顯示”返回”)。要想給返回按鈕著色，可以使用tintColor屬性。如下代碼所示：
除了返回按鈕，tintColor屬性會(huì)影響到所有按鈕標(biāo)題和圖片。
如果想要用自己的圖片替換V型，可以設(shè)置圖片的backIndicatorImage和backIndicatorTransitionMaskImage。如下代碼所示：
圖片的顏色是由tintColor屬性控制的。
修改導(dǎo)航欄標(biāo)題的字體
跟iOS 6一樣，我們可以使用導(dǎo)航欄的titleTextAttributes屬性來定制導(dǎo)航欄的文字風(fēng)格。在text attributes字典中使用如下一些key，可以指定字體、文字顏色、文字陰影色以及文字陰影偏移量：
UITextAttributeFont – 字體key
UITextAttributeTextColor – 文字顏色key
UITextAttributeTextShadowColor – 文字陰影色key
UITextAttributeTextShadowOffset – 文字陰影偏移量key
?
如下代碼所示，對(duì)導(dǎo)航欄的標(biāo)題風(fēng)格做了修改：
運(yùn)行效果如下圖所示：
修改導(dǎo)航欄標(biāo)題為圖片如果要想將導(dǎo)航欄標(biāo)題修改為一個(gè)圖片或者logo，那么只需要使用下面這行代碼即可：
上面的代碼簡(jiǎn)單的修改了titleView屬性，將一個(gè)圖片賦值給它。 注意：這不是iOS 7中的新功能，之前的iOS版本就可以已經(jīng)有了。具體效果如下圖所示：
?
添加多個(gè)按鈕
同樣，這個(gè)技巧也不是iOS 7的，開發(fā)者經(jīng)常會(huì)在導(dǎo)航欄中添加多個(gè)按鈕，所以我決定在這里進(jìn)行介紹。我們可以在導(dǎo)航欄左邊或者右邊添加多個(gè)按鈕。例如，我們希望在導(dǎo)航欄右邊添加一個(gè)照相機(jī)和分享按鈕，那只需要使用下面的代碼即可：
如下效果：
修改狀態(tài)欄的風(fēng)格在老版本的iOS中，狀態(tài)欄永遠(yuǎn)都是白色風(fēng)格。而在iOS 7中，我們可以修改每個(gè)view controller中狀態(tài)欄的外觀。通過UIStatusBarStyle常量可以指定狀態(tài)欄的內(nèi)容是暗色或亮色。默認(rèn)情況下，狀態(tài)欄的顯示是暗色。也就是說，狀態(tài)欄上的時(shí)間、電池指示器和Wi-Fi信號(hào)顯示為暗色。如果導(dǎo)航欄中使用暗色為背景，那么看起來的效果如下圖所示：
如上圖這種情況下，我們可能希望將導(dǎo)航欄的風(fēng)格修改為亮色。這里有兩個(gè)方法可以實(shí)現(xiàn)。在iOS 7中，我們可以在每個(gè)view controller中overridingpreferredStatusBarStyle:方法，如下所示：
上面代碼的效果如下圖所示：
在iOS 7中，通過上面的方法來修改狀態(tài)欄風(fēng)格非常的棒。另外，我們也可以使用UIApplication的statusBarStyle方法來設(shè)置狀態(tài)欄，不過，首先需要停止使用View controller-based status bar appearance。在project target的Info tab中，插入一個(gè)新的key，名字為View controller-based status bar appearance，并將其值設(shè)置為NO。
然后就可以使用下面的代碼來設(shè)置狀態(tài)欄風(fēng)格了：
?
隱藏狀態(tài)欄
有時(shí)候我們需要隱藏狀態(tài)欄，那么此時(shí)我們?cè)趘iew controller中override方法prefersStatusBarHidden:即可，如下代碼所示：
?
總結(jié)
iOS 7給開發(fā)者提供了一些新的自由度來定制導(dǎo)航欄和狀態(tài)欄的外觀。希望上面的這些技巧能對(duì)你有用。這里可以下載到示例工程源碼。只需要取消相關(guān)代碼注釋即可進(jìn)行測(cè)試。
總結(jié)
以上是生活随笔為你收集整理的定制iOS 7中的导航栏和状态栏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS: bundle name, bu
- 下一篇： MKNetWorkKit使用方法