UINavigationBar是我們在開發(fā)過程中經(jīng)常要用到的一個控件判莉，下面我會為大家介紹一些常用的用法豆挽。
1. 設(shè)置導(dǎo)航欄的標(biāo)題
這個不多說，直接上代碼
self.navigationItem.title = @"UINavigationBar使用總結(jié)";
2. 設(shè)置導(dǎo)航欄的背景顏色
//通過barTintColor來設(shè)置背景色
self.navigationController.navigationBar.barTintColor = [UIColor redColor];```
得到的效果如下：
> barTintColor: 這個屬性需要在iOS7以上才可以使用; 如果要支持iOS6以及以下的系統(tǒng)券盅，可以參考這篇文章：[UINavigationBar Background Color ](http://www.saturngod.net/articles/uinavigationbar-background-color/)
## 3. 設(shè)置導(dǎo)航欄的背景圖片
除了通過設(shè)置背景顏色來改變導(dǎo)航欄的外觀外帮哈，我們還可以通過背景圖片來設(shè)置導(dǎo)航欄的外觀。
[self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"Background"]
forBarMetrics:UIBarMetricsDefault];```
在這里得稍微說說UIBarMetrics這個枚舉, 它主要是用來控制在不同狀態(tài)下導(dǎo)航欄的顯示锰镀。和UIButton的
- (void)setBackgroundImage:(nullable UIImage *)image forState:(UIControlState)state 這個方法有點類似娘侍。
//表示橫屏豎屏都顯示
UIBarMetricsDefault,
//表示在只橫屏下才顯示，和UIBarMetricsLandscapePhone功效一樣泳炉，不過iOS8已經(jīng)棄用了
UIBarMetricsCompact,
UIBarMetricsDefaultPrompt和UIBarMetricsCompactPrompt這兩個我還沒搞清楚是什么意思憾筏，有知道的朋友不妨給我們來普及一下。花鹅。
4. 更改頂部狀態(tài)欄的顏色
從效果圖可以看出氧腰，我們設(shè)置背景色或者背景圖之后，狀態(tài)欄依然還是默認(rèn)的黑色，這樣感覺不好看古拴。好在箩帚，系統(tǒng)給我們提供了UIStatusBarStyleDefault和UIStatusBarStyleLightContent兩種樣式供我們選擇。
- UIStatusBarStyleDefault斤富，系統(tǒng)的默認(rèn)樣式膏潮，黑色內(nèi)容锻狗，用于淺色的背景（如白色）
- UIStatusBarStyleLightContent 白色內(nèi)容满力，用于深色的背景（如紅色）
下面來看看具體怎么實現(xiàn)，主流的實現(xiàn)方式是分兩步：
- 在工程的Info.plist文件中添加一行UIViewControllerBasedStatusBarAppearance轻纪，選擇Boolean類型油额，并設(shè)置為YES，Xcode會自動把名稱變?yōu)閂iew controller-based status bar appearance刻帚。
Snip20150913_4.png - 在你的ViewController中添加下面的方法
-(UIStatusBarStyle)preferredStatusBarStyle{
return UIStatusBarStyleLightContent;
}
想知道更多地方式潦嘶，可以參考這兩個頁面：How to change Status Bar text color in iOS 7 和 iOS7下Status Bar字體顏色修改
另外，特別需要注意的是崇众，如果你的ViewController是通過navigationController push進來的掂僵，還需要加下面一句代碼才能生效：
self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
具體，可參考UIStatusBarStyle PreferredStatusBarStyle does not work on iOS 7
恩顷歌，我們來看看運行效果锰蓬。
5. 設(shè)置返回按鈕
從上面的效果圖中我們可以看到返回按鈕還是默認(rèn)的藍(lán)色按鈕，下面我將會大家來介紹返回按鈕的個性化眯漩。
- 設(shè)置返回按鈕的顏色
只需要設(shè)置tintColor屬性即可
self.navigationController.navigationBar.tintColor = [UIColor whiteColor];
得到的效果圖如下：
- 只設(shè)置返回按鈕的圖片
- (void)goToBack {
[self.navigationController popViewControllerAnimated:YES];
}
- (void)setBackButtonWithImage {
UIImage *leftButtonIcon = [[UIImage imageNamed:@"LeftButton_back_Icon"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithImage:leftButtonIcon
style:UIBarButtonItemStyleBordered
target:self
action:@selector(goToBack)];
self.navigationItem.leftBarButtonItem = leftButton;
//修復(fù)navigationController側(cè)滑關(guān)閉失效的問題
self.navigationController.interactivePopGestureRecognizer.delegate = (id)self;
}
得到的效果如下：
這里需要注意的地方有三點：
- 需要自己實現(xiàn)返回按鈕的事件芹扭。
- 特別的解釋下UIImage的imageWithRenderingMode:方法，參數(shù)UIImageRenderingModeAlwaysOriginal 表示總是用原圖渲染赦抖，如果不這么設(shè)置舱卡，返回按鈕將會顯示tintColor的顏色(默認(rèn)為藍(lán)色)。UITabbarItem也存在同樣地問題队萤。
- 我們自己設(shè)置返回按鈕轮锥，會導(dǎo)致系統(tǒng)的側(cè)滑關(guān)閉效果失效。添加上面代碼中最后一句代碼即可修復(fù)要尔。
- 僅設(shè)置返回按鈕的文字
- (void)setBackButtonTitle {
UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:NSLocalizedString(@"取消", nil)
style:UIBarButtonItemStylePlain
target:self action:@selector(goToBack)];
leftButton.tintColor = [UIColor whiteColor];
self.navigationItem.leftBarButtonItem = leftButton;
}
得到的效果如下：
- 自定義返回按鈕
如果上面幾種方式還無法滿足你的要求（比如舍杜，需要同時設(shè)置返回按鈕文字和圖片），就需要用到UIBarButtonItem的initWithCustomView方法盈电。
- (void)setCustomLeftButton {
UIView* leftButtonView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 60, 40)];
UIButton* leftButton = [UIButton buttonWithType:UIButtonTypeSystem];
leftButton.backgroundColor = [UIColor clearColor];
leftButton.frame = leftButtonView.frame;
[leftButton setImage:[UIImage imageNamed:@"LeftButton_back_Icon"] forState:UIControlStateNormal];
[leftButton setTitle:@"返回" forState:UIControlStateNormal];
leftButton.tintColor = [UIColor redColor];
leftButton.autoresizesSubviews = YES;
leftButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
leftButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin;
[leftButton addTarget:self action:@selector(goToBack) forControlEvents:UIControlEventTouchUpInside];
[leftButtonView addSubview:leftButton];
UIBarButtonItem* leftBarButton = [[UIBarButtonItem alloc] initWithCustomView:leftButtonView];
self.navigationItem.leftBarButtonItem = leftBarButton;
}
得到的效果圖如下：
設(shè)置rightBarButtonItem基本上脫離不了上面的幾種方式蝴簇，大家可以參照上面返回按鈕的設(shè)置方式。
6. 隱藏導(dǎo)航欄底部的線條
有時候遇到一些特殊的要求匆帚，需要隱藏導(dǎo)航欄底部的線條熬词。
兩行代碼就可以做到。
- 設(shè)置導(dǎo)航欄的背景圖（setBackgroundImage方法）
- 設(shè)置導(dǎo)航欄的shadowImage (setShadowImage方法)
UINavigationBar *navigationBar = self.navigationController.navigationBar;
//設(shè)置透明的背景圖，便于識別底部線條有沒有被隱藏
[navigationBar setBackgroundImage:[[UIImage alloc] init]
forBarPosition:UIBarPositionAny
barMetrics:UIBarMetricsDefault];
//此處使底部線條失效
[navigationBar setShadowImage:[UIImage new]];
來看看效果圖：
另外互拾，還有一種做法歪今，一行代碼就可以達(dá)到效果，也真是夠神奇的颜矿。寄猩。
//方法二：
self.navigationController.navigationBar.clipsToBounds = YES;
想要知道更詳細(xì)的內(nèi)容可以參考這個頁面：How to hide iOS7 UINavigationBar 1px bottom line
7. 設(shè)置導(dǎo)航條底部線條的顏色
有了上面的基礎(chǔ)，設(shè)置導(dǎo)航欄線條的顏色就變得很簡單了骑疆。
首先田篇，我做了個UIImage的分類：通過顏色轉(zhuǎn)成UIImage；
然后箍铭，用上面的方案來設(shè)置導(dǎo)航欄底部線條泊柬。
顏色轉(zhuǎn)圖片的代碼：
@implementation UIImage (ColorImage)
+ (UIImage *)imageWithColor:(UIColor *)color
{
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
@end
設(shè)置導(dǎo)航欄底部線條顏色的代碼：
UINavigationBar *navigationBar = self.navigationController.navigationBar;
[navigationBar setBackgroundImage:[[UIImage alloc] init]
forBarPosition:UIBarPositionAny
barMetrics:UIBarMetricsDefault];
//此處使底部線條顏色為紅色
[navigationBar setShadowImage:[UIImage imageWithColor:[UIColor redColor]]];
依照慣例，看下效果圖：
當(dāng)然還有其他的方式也可以做到诈火，如addSubview, addSubLayer等兽赁。感興趣的話可以參考下這個頁面：iOS7 - Change UINavigationBar border color
8. 在導(dǎo)航欄上添加多個按鈕
以微信打開網(wǎng)頁時的效果為例，效果圖如下冷守，有兩個按鈕：返回和關(guān)閉刀崖。
有下面兩種方式可供選擇，但是最終還是要用到leftBarButtonItems這個方法拍摇。
#define UserMethod1 0
UIBarButtonItem *closeItem = [[UIBarButtonItem alloc] initWithTitle:@"關(guān)閉" style:UIBarButtonItemStylePlain target:self action:@selector(closeAction)];
if (UserMethod1) {
//方法一:
self.navigationItem.leftBarButtonItems = @[closeItem];
//要求顯示默認(rèn)的返回按鈕亮钦，但是文字會顯示默認(rèn)的Back，暫時還不知道這個文字怎么改
self.navigationItem.leftItemsSupplementBackButton = YES;
}
else {
//方法二
UIButton* leftButton = [UIButton buttonWithType:UIButtonTypeSystem];
leftButton.backgroundColor = [UIColor clearColor];
leftButton.frame = CGRectMake(0, 0, 45, 40);
[leftButton setImage:[UIImage imageNamed:@"LeftButton_back_Icon"] forState:UIControlStateNormal];
[leftButton setTitle:@"返回" forState:UIControlStateNormal];
leftButton.tintColor = [UIColor whiteColor];
leftButton.autoresizesSubviews = YES;
leftButton.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
leftButton.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleLeftMargin;
[leftButton addTarget:self action:@selector(goToBack) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem* backItem = [[UIBarButtonItem alloc] initWithCustomView:leftButton];
self.navigationItem.leftBarButtonItems = @[backItem,closeItem];
}
然后授翻，運行的效果圖如下：
方法一用到了
leftItemsSupplementBackButton這個屬性或悲，會顯示系統(tǒng)默認(rèn)的返回按鈕，但是文字也是顯示默認(rèn)的Back文字堪唐，目前還沒找到怎么修改這個文字巡语，如果有誰知道，還請不吝賜教淮菠；所以我暫時還是建議大家用方法二男公。相應(yīng)的還有 rightBarButtonItems 這個屬性，如果要在導(dǎo)航欄右側(cè)展示多個按鈕的話合陵，可以設(shè)置這個屬性枢赔。
9. 在導(dǎo)航欄上添加分段控件
這次，以QQ為例拥知，代碼如下：
UISegmentedControl *segControl = [[UISegmentedControl alloc] initWithItems:@[@"消息",@"電話"]];
segControl.tintColor = [UIColor colorWithRed:0.07 green:0.72 blue:0.96 alpha:1];
[segControl setSelectedSegmentIndex:0];
self.navigationItem.titleView = segControl;
代碼很簡單踏拜，就是設(shè)置titleView這個屬性，當(dāng)然低剔，你也可以把這個屬性設(shè)置為你自定義的View速梗。
10. 導(dǎo)航欄全局屬性設(shè)置
//全局設(shè)置導(dǎo)航欄主題
- (void)setNavigationControllerAppearance {
[UINavigationBar appearance].barStyle = UIBarStyleBlack;
[[UINavigationBar appearance] setBarTintColor:[UIColor colorWithWhite:0.1 alpha:0.5]];
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
}
全局設(shè)置導(dǎo)航欄的好處有兩個：一是不用對每個NavigationBar進行設(shè)置肮塞；二是方便做主題管理，切換主題姻锁，只需要更改全局設(shè)置即可枕赵。
11. 與導(dǎo)航欄相關(guān)的一些開源組件
11.1 NJKWebViewProgress - 類似于Safiri加載網(wǎng)頁時的進度顯示
11.2 FDFullscreenPopGesture - 一個絲滑的全屏滑動返回手勢
對應(yīng)的文章介紹可以點這個鏈接。
最后位隶，奉上Demo的地址：NavigationBarDemo
