定制iOS 7中的導航欄和狀態(tài)欄


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

近期,跟大多數開發(fā)者一樣,我也正忙于對程序進行升級以適配iOS 7膝晾。最新的iOS 7外觀上有大量的改動。從開發(fā)者的角度來看,導航欄和狀態(tài)欄就發(fā)生了明顯的變化。狀態(tài)欄現在是半透明的了,這也就意味著導航欄會顯示在狀態(tài)欄后面掏呼。有些情況下,導航欄的背景圖片可以延伸顯示到狀態(tài)欄后面铅檩。
之前我曾經寫過一篇關于如何定制導航欄的文章憎夷。不過現在是時候對其進行更新了。下面就是本文將要介紹的內容:
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:
里面添加如下代碼來修改顏色:
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
文件中,然后通過這個宏來創(chuàng)建一個UIColor對象(根據指定的RGB)扯旷。如下示例:
1

[[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:
方法為導航欄設置自定義圖片搜锰。如下代碼所示:
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的,開發(fā)者經常會在導航欄中添加多個按鈕儒拂,所以我決定在這里進行介紹寸潦。我們可以在導航欄左邊或者右邊添加多個按鈕。例如社痛,我們希望在導航欄右邊添加一個照相機和分享按鈕见转,那只需要使用下面的代碼即可:
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;

如下效果:


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

如上圖這種情況下耸成,我們可能希望將導航欄的風格修改為亮色报亩。這里有兩個方法可以實現。在iOS 7中井氢,我們可以在每個view controller中overridingpreferredStatusBarStyle:
方法弦追,如下所示:
1
2
3
4

-(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)欄風格了:
1

[[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];

隱藏狀態(tài)欄
有時候我們需要隱藏狀態(tài)欄奴饮,那么此時我們在view controller中override方法prefersStatusBarHidden:即可纬向,如下代碼所示:
1
2
3
4

  • (BOOL)prefersStatusBarHidden
    {
    return YES;
    }

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

聲明:文章轉載自破船之家

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末投剥,一起剝皮案震驚了整個濱河市师脂,隨后出現的幾起案子,更是在濱河造成了極大的恐慌薇缅,老刑警劉巖危彩,帶你破解...
    沈念sama閱讀 222,000評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異泳桦,居然都是意外死亡汤徽,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 94,745評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事级零⊥暌撸” “怎么了泰鸡?”我有些...
    開封第一講書人閱讀 168,561評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長壳鹤。 經常有香客問我盛龄,道長,這世上最難降的妖魔是什么芳誓? 我笑而不...
    開封第一講書人閱讀 59,782評論 1 298
  • 正文 為了忘掉前任余舶,我火速辦了婚禮,結果婚禮上锹淌,老公的妹妹穿的比我還像新娘匿值。我一直安慰自己,他們只是感情好赂摆,可當我...
    茶點故事閱讀 68,798評論 6 397
  • 文/花漫 我一把揭開白布挟憔。 她就那樣靜靜地躺著,像睡著了一般烟号。 火紅的嫁衣襯著肌膚如雪绊谭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,394評論 1 310
  • 那天褥符,我揣著相機與錄音龙誊,去河邊找鬼抚垃。 笑死喷楣,一個胖子當著我的面吹牛,可吹牛的內容都是我干的鹤树。 我是一名探鬼主播铣焊,決...
    沈念sama閱讀 40,952評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼罕伯!你這毒婦竟也來了曲伊?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,852評論 0 276
  • 序言:老撾萬榮一對情侶失蹤追他,失蹤者是張志新(化名)和其女友劉穎坟募,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體邑狸,經...
    沈念sama閱讀 46,409評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡懈糯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,483評論 3 341
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了单雾。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赚哗。...
    茶點故事閱讀 40,615評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡她紫,死狀恐怖,靈堂內的尸體忽然破棺而出屿储,到底是詐尸還是另有隱情贿讹,我是刑警寧澤,帶...
    沈念sama閱讀 36,303評論 5 350
  • 正文 年R本政府宣布够掠,位于F島的核電站民褂,受9級特大地震影響,放射性物質發(fā)生泄漏疯潭。R本人自食惡果不足惜助赞,卻給世界環(huán)境...
    茶點故事閱讀 41,979評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望袁勺。 院中可真熱鬧雹食,春花似錦、人聲如沸期丰。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,470評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽钝荡。三九已至街立,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間埠通,已是汗流浹背赎离。 一陣腳步聲響...
    開封第一講書人閱讀 33,571評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留端辱,地道東北人梁剔。 一個月前我還...
    沈念sama閱讀 49,041評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像舞蔽,于是被迫代替她去往敵國和親荣病。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,630評論 2 359

推薦閱讀更多精彩內容