設(shè)置TabBar和navigation兩個控制器的顏色、圖片時,系統(tǒng)默認(rèn)提供了渲染樣式,往往都需要重新設(shè)置
1.NavigationController下分別設(shè)置navigationItem和navigationBar兩個屬性
2.TabBarController分別設(shè)置tabBarItem和tabBarItemtabBar這兩個屬性
Item和Bar下分別還有一些屬性,Bar可以理解為代表這個導(dǎo)航欄/標(biāo)簽欄,設(shè)置導(dǎo)航欄/標(biāo)簽欄的某一樣式,Item為具體的導(dǎo)航欄/標(biāo)簽欄上的一個單元,設(shè)置某一單元的樣式
UINavigationItem有主要有以下屬性影響著導(dǎo)航欄的內(nèi)容
@property(nonatomic,retain) UIBarButtonItem *backBarButtonItem;左上角的返回按鈕
@property(nonatomic,retain) UIView *titleView;中間的標(biāo)題視圖
@property(nonatomic,copy) NSString *title;中間的標(biāo)題文字
@property(nonatomic,retain) UIBarButtonItem *leftBarButtonItem;左上角的視圖
@property(nonatomic,retain) UIBarButtonItem *rightBarButtonItem;右上角的視圖
//backBarButtonItem和leftBarButtonItem使用場景:
//backBarButtonItem是在上一級控制器上進行設(shè)置,而leftBarButtonItem是對應(yīng)當(dāng)前控制器進行設(shè)置的
UITabBarItem有以下屬性影響著UITabBarButton的內(nèi)容
UITabBarButton里面顯示什么內(nèi)容嘱支，由對應(yīng)子控制器的tabBarItem屬性決定
@property(nonatomic,copy) NSString *title;標(biāo)題文字
@property(nonatomic,retain) UIImage *image;圖標(biāo)
@property(nonatomic,retain) UIImage *selectedImage;選中時的圖標(biāo)
@property(nonatomic,copy) NSString *badgeValue;提醒數(shù)字
導(dǎo)航控制器和標(biāo)簽控制器樣式設(shè)置容易混淆的地方:
- 導(dǎo)航控制器默認(rèn)狀態(tài):
n_bar_normal.png
- 通過navigationBar的setTitleTextAttributes方法設(shè)置導(dǎo)航欄的字體顏色
[navigationController.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor redColor]}];
n_bar_setTitleTextAttributes.png
- 通過navigationBar的setBackgroundColor設(shè)置背景色,默認(rèn)系統(tǒng)提供了渲染
[navigationController.navigationBar setBackgroundColor:[UIColor redColor]];
效果圖:
n_bar_backgroundClolor.png
- 通過navigationBar的barTintColor來設(shè)置導(dǎo)航欄顏色(系統(tǒng)不再提供渲染)
navigationController.navigationBar.barTintColor = [UIColor redColor];
效果圖:
n_bar_barTintColor.png
- 通過navigationBar的tintColor設(shè)置返回按鈕的顏色(push到下級控制器后返回按鈕的顏色)
navigationController.navigationBar.tintColor = [UIColor redColor];
效果圖:
n_bar_tintColor.png
- 通過navigationBar的setBackgroundImage設(shè)置導(dǎo)航欄背景圖
// UIBarMetricsDefault, 橫豎屏下 圖片都有效
// UIBarMetricsCompact, 豎屏下無效 橫屏有效
// UIBarMetricsDefaultPrompt = 101, 有副標(biāo)題 豎屏有效 橫屏無效 無副標(biāo)題 橫豎屏都無效
// UIBarMetricsCompactPrompt, 有副標(biāo)題 豎屏無效 橫屏有效 無副標(biāo)題 橫豎屏都無效
[self.navigationBar setBackgroundImage:[UIImage imageNamed:@"NavBar64"] forBarMetrics:UIBarMetricsDefault];
效果圖:
n_bar_setBackgroundImage.png
- 標(biāo)簽控制器默認(rèn)狀態(tài),系統(tǒng)同樣默認(rèn)提供了渲染(圖片實際為橙色)
t_normal.png
- 通過tabBar的barTintColor設(shè)置標(biāo)簽欄的背景色
self.tabBar.barTintColor = [UIColor orangeColor];
效果圖:
t_bar_barTintColor.png
- 通過tabBar的tintColor設(shè)置標(biāo)簽欄文字和圖片的顏色(選中狀態(tài)時)
與navigationbar的tintColor不同,navigation bar的tintColor設(shè)置的是下級控制器返回按鈕的字體顏色
t_bar_tintColor.png
- 除了通過TabBar的tintColor實現(xiàn)取消默認(rèn)渲染色設(shè)置顏色外,還可以通過tabBarItem分開分別設(shè)置標(biāo)簽欄上的文字和圖片
先設(shè)置圖片取消渲染,再設(shè)置文字顏色(圖文分開的情況下)
UIImage *img_Normal = [[UIImage imageNamed:imageName] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
UIImage *img_Select = [[UIImage imageNamed:[NSString stringWithFormat:@"%@_selected",imageName]]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
viewController.tabBarItem.image = img_Normal;
viewController.tabBarItem.selectedImage = img_Select;
//實際系統(tǒng)只是幫我們將選中狀態(tài)進行渲染,默認(rèn)狀態(tài)下可以不進行設(shè)置
t_bar_imageRenderingMode.png
[viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor orangeColor]} forState:UIControlStateSelected];
t_bar_setTitleTextAttributes.png
也一樣實現(xiàn)了效果
或者是只需要在delegate中加入下面一句代碼實現(xiàn)同樣效果:
// swift
UITabBar.appearance().tintColor = UIColor.orangeColor()
// Object-C
[UITabBar appearance].tintColor = [UIColor orangeColor];
