设置TabBar和navigation两个控制器的颜色、图片时,系统默认提供了渲染样式,往往都需要重新设置
1.NavigationController下分别设置navigationItem和navigationBar两个属性
2.TabBarController分别设置tabBarItem和tabBarItemtabBar这两个属性
Item和Bar下分别还有一些属性,Bar可以理解为代表这个导航栏/标签栏,设置导航栏/标签栏的某一样式,Item为具体的导航栏/标签栏上的一个单元,设置某一单元的样式
UINavigationItem有主要有以下属性影响着导航栏的内容
@property(nonatomic,retain) UIBarButtonItem *backBarButtonItem;左上角的返回按钮
@property(nonatomic,retain) UIView *titleView;中间的标题视图
@property(nonatomic,copy) NSString *title;中间的标题文字
@property(nonatomic,retain) UIBarButtonItem *leftBarButtonItem;左上角的视图
@property(nonatomic,retain) UIBarButtonItem *rightBarButtonItem;右上角的视图
//backBarButtonItem和leftBarButtonItem使用场景:
//backBarButtonItem是在上一级控制器上进行设置,而leftBarButtonItem是对应当前控制器进行设置的
UITabBarItem有以下属性影响着UITabBarButton的内容
UITabBarButton里面显示什么内容，由对应子控制器的tabBarItem属性决定
@property(nonatomic,copy) NSString *title;标题文字
@property(nonatomic,retain) UIImage *image;图标
@property(nonatomic,retain) UIImage *selectedImage;选中时的图标
@property(nonatomic,copy) NSString *badgeValue;提醒数字
导航控制器和标签控制器样式设置容易混淆的地方:
- 导航控制器默认状态:
n_bar_normal.png
- 通过navigationBar的setTitleTextAttributes方法设置导航栏的字体颜色
[navigationController.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor redColor]}];
n_bar_setTitleTextAttributes.png
- 通过navigationBar的setBackgroundColor设置背景色,默认系统提供了渲染
[navigationController.navigationBar setBackgroundColor:[UIColor redColor]];
效果图:
n_bar_backgroundClolor.png
- 通过navigationBar的barTintColor来设置导航栏颜色(系统不再提供渲染)
navigationController.navigationBar.barTintColor = [UIColor redColor];
效果图:
n_bar_barTintColor.png
- 通过navigationBar的tintColor设置返回按钮的颜色(push到下级控制器后返回按钮的颜色)
navigationController.navigationBar.tintColor = [UIColor redColor];
效果图:
n_bar_tintColor.png
- 通过navigationBar的setBackgroundImage设置导航栏背景图
// UIBarMetricsDefault, 横竖屏下 图片都有效
// UIBarMetricsCompact, 竖屏下无效 横屏有效
// UIBarMetricsDefaultPrompt = 101, 有副标题 竖屏有效 横屏无效 无副标题 横竖屏都无效
// UIBarMetricsCompactPrompt, 有副标题 竖屏无效 横屏有效 无副标题 横竖屏都无效
[self.navigationBar setBackgroundImage:[UIImage imageNamed:@"NavBar64"] forBarMetrics:UIBarMetricsDefault];
效果图:
n_bar_setBackgroundImage.png
- 标签控制器默认状态,系统同样默认提供了渲染(图片实际为橙色)
t_normal.png
- 通过tabBar的barTintColor设置标签栏的背景色
self.tabBar.barTintColor = [UIColor orangeColor];
效果图:
t_bar_barTintColor.png
- 通过tabBar的tintColor设置标签栏文字和图片的颜色(选中状态时)
与navigationbar的tintColor不同,navigation bar的tintColor设置的是下级控制器返回按钮的字体颜色
t_bar_tintColor.png
- 除了通过TabBar的tintColor实现取消默认渲染色设置颜色外,还可以通过tabBarItem分开分别设置标签栏上的文字和图片
先设置图片取消渲染,再设置文字颜色(图文分开的情况下)
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_bar_imageRenderingMode.png
[viewController.tabBarItem setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor orangeColor]} forState:UIControlStateSelected];
t_bar_setTitleTextAttributes.png
也一样实现了效果
或者是只需要在delegate中加入下面一句代码实现同样效果:
// swift
UITabBar.appearance().tintColor = UIColor.orangeColor()
// Object-C
[UITabBar appearance].tintColor = [UIColor orangeColor];