iOS 修改状态栏、导航条颜色及文字颜色

在开发过程中，我们总是遇到这样那样的特殊要求，比如在指定页面展示特殊的样式，完全异于整个app的风格，为此有很多办法解决，今天我来记录其中一种，我们互相学习交流。如有不妥还请指正，如有更好的方案，欢迎交流学习。
  
修改状态栏、导航条颜色及文字颜色

• 一、只改变状态栏颜色
  
• 
  
  
  
  • 
    
    
    
    • 
      
      
      
      • 1、首先在info.plist设置View controller-based status bar appearance，并将其值设置为YES。
        
      • 2、在需要修改状态栏颜色的页面重写系统方法-preferredStatusBarStyle
        
      • 3、手动触发 preferredStatusBarStyle 更新状态栏颜色
        
         
      
      
    
    
  
• 二、同时改变状态栏、导航条颜色
  
• 
  
  
  
  • 
    
    
    
    • 
      
      
      
      • 1、将要显示时设置样式。将要消失时恢复原有样式。
        
      • 2、在需要改变时，调用-updateNavColor:second:fontColor:方法，改变样式
        
         
      
      
    
    
  
• 三、 依赖的扩展类：UIImage+GradientColor
  
• 四、预览完成效果：
  

一、只改变状态栏颜色

1、首先在info.plist设置View controller-based status bar appearance，并将其值设置为YES。

2、在需要修改状态栏颜色的页面重写系统方法-preferredStatusBarStyle

1. // 仅当前页面状态栏文字颜色 - 系统方法
2. - (UIStatusBarStyle)preferredStatusBarStyle {
3.     if (self.isLightStyle) {
4.         // 白色
5.         return UIStatusBarStyleLightContent;
6.     }else{
7.         // 黑色
8.         if (@available(iOS 13.0, *)) {
9.             return UIStatusBarStyleDarkContent;
10.         } else {
11.             return UIStatusBarStyleDefault; //黑色, 默认值
12.         }
13.     }
14. }

复制代码

3、手动触发 preferredStatusBarStyle 更新状态栏颜色

如果依赖返回数据来决定状态栏颜色，可以调用下面方法手动触发preferredStatusBarStyle

1. // 手动触发 preferredStatusBarStyle 更新状态栏颜色
2. [self setNeedsStatusBarAppearanceUpdate];

复制代码

---

二、同时改变状态栏、导航条颜色

1、将要显示时设置样式。将要消失时恢复原有样式。

1. /// 导航栏背景颜色，准备2个颜色，是应对渐变颜色
2. @interface ZBWebViewVC ()
3. @property (nonatomic, copy) NSString *navColorOne;
4. @property (nonatomic, copy) NSString *navColorTwo;
6. @property (nonatomic, strong) UIView *statusBar;
7. @property (nonatomic, assign) BOOL isLightStyle;
8. @end
11. @implementation ZBWebViewVC
13. - (void)viewWillAppear:(BOOL)animated {
14.     [super viewWillAppear:animated];
15.     //设置显示样式，也可以返回数据后调用此方法，根据返回数据决定颜色
16.     [self updateNavColor:@"#ffffff" second:nil fontColor:@"#000000"];
17.     // 手动触发 preferredStatusBarStyle 更新状态栏颜色
18.         [self setNeedsStatusBarAppearanceUpdate];
19. }
21. //页面消失，还原导航条颜色
22. - (void)viewWillDisappear:(BOOL)animated {
23.     [super viewWillDisappear:animated];
25.     //恢复webView状态栏为白色
26.     if (@available(iOS 13.0, *)) {
27.         if ([[UIApplication sharedApplication].keyWindow.subviews containsObject:self.statusBar]) {
28.             [self.statusBar removeFromSuperview];
29.         }
30.     } else {
31.         UIView *statusBar = [[[UIApplication sharedApplication] valueForKey:@"statusBarWindow"] valueForKey:@"statusBar"];
32.         if ([statusBar respondsToSelector:@selector(setBackgroundColor:)]) {
33.             statusBar.backgroundColor = UIColor.clearColor;
34.         }
35.     }
36. }
38. /// 更新状态栏颜色
39. - (void)updateStatusBarStyleIsWhite:(BOOL)isWhite{
40.     //修改隐藏导航栏后，状态栏颜色还原
41.     UIColor *bgColor = UIColor.whiteColor;
42.     if (self.navColorOne.length && !isWhite) {
43.         bgColor = [UIColor colorWithHexString:self.navColorOne];
44.     }
45.     if (@available(iOS 13.0, *)) {
46.         if (![[UIApplication sharedApplication].keyWindow.subviews containsObject:self.statusBar]) {
47.             [[UIApplication sharedApplication].keyWindow addSubview:self.statusBar];
48.         }
49.         self.statusBar.backgroundColor = bgColor;
50.     } else {
51.         UIView *statusBar = [[[UIApplication sharedApplication] valueForKey:@"statusBarWindow"] valueForKey:@"statusBar"];
52.         if ([statusBar respondsToSelector:@selector(setBackgroundColor:)]) {
53.             statusBar.backgroundColor = bgColor;
54.         }
55.     }
56. }
58. /// 配置导航条、文字颜色
59. /// @param first 第一种颜色，例 白色：#ffffff
60. /// @param second 第二种颜色，例 黑色：#000000
61. /// @param fontColor title颜色，例 黑色：#000000
62. - (void)updateNavColor:(NSString *)first second:(NSString *)second fontColor:(NSString *)fontColor{
63.     UIColor *topleftColor = [UIColor colorWithHexString:first];
64.     UIColor *bottomrightColor = second ? [UIColor colorWithHexString:second] : topleftColor;
65.     UIColor *fColor;
66.    
67.     if (self.isLightStyle) {
68.         [self.btnLeftOne setImage:[UIImage imageNamed:@"nav_back_white"] forState:UIControlStateNormal];
69.         [self.btnLeftTwo setImage:[UIImage imageNamed:@"nav_close_white"] forState:UIControlStateNormal];
70.         
71.         [self.btnRightOne setImage:[UIImage imageNamed:@"caigoudannew_white"] forState:UIControlStateNormal];
72.         [self.btnRightTwo setImage:[UIImage imageNamed:@"share_white"] forState:UIControlStateNormal];
73.         
74.         fColor = fontColor ? [UIColor colorWithHexString:fontColor] : UIColor.whiteColor;
75.         [self updateStatusBarStyleIsWhite:NO];
76.     }else{
77.         [self.btnLeftOne setImage:[UIImage imageNamed:@"nav_back_black"] forState:UIControlStateNormal];
78.         [self.btnLeftTwo setImage:[UIImage imageNamed:@"nav_close_black"] forState:UIControlStateNormal];
79.         
80.         [self.btnRightOne setImage:[UIImage imageNamed:@"caigoudannew"] forState:UIControlStateNormal];
81.         [self.btnRightTwo setImage:[UIImage imageNamed:@"share_black"] forState:UIControlStateNormal];
82.         
83.         fColor = fontColor ? [UIColor colorWithHexString:fontColor] : UIColor.blackColor;
84.         [self updateStatusBarStyleIsWhite:YES];
85.     }
86.    
87.     // 设置导航条背景图
88.     UIImage *bgImg = [UIImage gradientColorImageFromColors:@[topleftColor, bottomrightColor] gradientType:GradientTypeLeftToRight imgSize:CGSizeMake(XYYScreenW, kNavBarHeight)];
89.     if (@available(iOS 13.0, *)) {
90.         UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
91.         [appearance configureWithOpaqueBackground];
92.         appearance.backgroundImage = bgImg;
93.         appearance.titleTextAttributes = @{NSForegroundColorAttributeName:fColor, NSFontAttributeName:[UIFont systemFontOfSize:17]};
94.         self.navigationController.navigationBar.standardAppearance = appearance;
95.         self.navigationController.navigationBar.scrollEdgeAppearance = appearance;
96.     }else{
97.         self.navigationController.navigationBar.titleTextAttributes =
98.         @{NSForegroundColorAttributeName:fColor, NSFontAttributeName:[UIFont systemFontOfSize:17]};
99.     }
100.     [self.navigationController.navigationBar setBackgroundImage:bgImg forBarMetrics:UIBarMetricsDefault];
101. }
103. #pragma mark - lazy
104. - (UIView *)statusBar{
105.     if (!_statusBar) {
106.         if (@available(iOS 13.0, *)) {
107.             _statusBar = [[UIView alloc] initWithFrame:[UIApplication sharedApplication].keyWindow.windowScene.statusBarManager.statusBarFrame];
108.         }
109.     }
110.     return _statusBar;
111. }

复制代码

注：我这里的导航条上的按钮是自己写了一下，你用的时候，可以根据自己的需要适当修改。


2、在需要改变时，调用-updateNavColor:second:fontColor:方法，改变样式

1. [self updateNavColor:self.navColorOne second:self.navColorTwo fontColor:fontColor];

复制代码

---

三、 依赖的扩展类：UIImage+GradientColor

UIImage+GradientColor.h

1. #import <UIKit/UIKit.h>
3. ///渐变方向
4. typedef NS_ENUM(NSUInteger, GradientType) {
5.     GradientTypeTopToBottom = 0,//从上到小
6.     GradientTypeLeftToRight = 1,//从左到右
7.     GradientTypeUpleftToLowright = 2,//左上到右下
8.     GradientTypeUprightToLowleft = 3,//右上到左下
9. };
11. @interface UIImage (GradientColor)
12. /// 通过一组颜色生成一个渐变色的图片
13. + (UIImage *)gradientColorImageFromColors:(NSArray*)colors gradientType:(GradientType)gradientType imgSize:(CGSize)imgSize;
15. /// 通过颜色来生成一个纯色图片
16. + (UIImage*)imageWithColor:(UIColor*)color;
18. @end

复制代码

UIImage+GradientColor.m

1. #import "UIImage+GradientColor.h"
3. @implementation UIImage (GradientColor)
4. /// 通过一组颜色生成一个渐变色的图片
5. + (UIImage *)gradientColorImageFromColors:(NSArray*)colors gradientType:(GradientType)gradientType imgSize:(CGSize)imgSize {
6.     if (colors.count == 0) {
7.         return nil;
8.     }
9.     NSMutableArray *ar = [NSMutableArray array];
10.     for(UIColor *c in colors) {
11.         [ar addObject:(id)c.CGColor];
12.     }
13.     UIGraphicsBeginImageContextWithOptions(imgSize, YES, 1);
14.     CGContextRef context = UIGraphicsGetCurrentContext();
15.     CGContextSaveGState(context);
16.     CGColorSpaceRef colorSpace = CGColorGetColorSpace([[colors lastObject] CGColor]);
17.     CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (CFArrayRef)ar, NULL);
18.     CGPoint start;
19.     CGPoint end;
20.     switch (gradientType) {
21.         case GradientTypeTopToBottom:
22.             start = CGPointMake(0.0, 0.0);
23.             end = CGPointMake(0.0, imgSize.height);
24.             break;
25.         case GradientTypeLeftToRight:
26.             start = CGPointMake(0.0, 0.0);
27.             end = CGPointMake(imgSize.width, 0.0);
28.             break;
29.         case GradientTypeUpleftToLowright:
30.             start = CGPointMake(0.0, 0.0);
31.             end = CGPointMake(imgSize.width, imgSize.height);
32.             break;
33.         case GradientTypeUprightToLowleft:
34.             start = CGPointMake(imgSize.width, 0.0);
35.             end = CGPointMake(0.0, imgSize.height);
36.             break;
37.         default:
38.             break;
39.     }
40.     CGContextDrawLinearGradient(context, gradient, start, end, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
41.     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
42.     CGGradientRelease(gradient);
43.     CGContextRestoreGState(context);
44. //    CGColorSpaceRelease(colorSpace); 解决闪退 Assertion failed: (!space->is_singleton), function color_space_dealloc, file /BuildRoot/Library/Caches/com.apple.xbs/Sources/Quartz2D/Quartz2D-1033.1/CoreGraphics/ColorSpaces/color-space.c, line 102.
45.     UIGraphicsEndImageContext();
46.     return image;
47. }
49. //通过颜色来生成一个纯色图片
50. + (UIImage*)imageWithColor:(UIColor*)color{
51.     CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
52.     UIGraphicsBeginImageContext(rect.size);
53.     CGContextRef context = UIGraphicsGetCurrentContext();
55.     CGContextSetFillColorWithColor(context, [color CGColor]);
56.     CGContextFillRect(context, rect);
58.     UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
59.     UIGraphicsEndImageContext();
61.     return image;
62. }
64. @end

复制代码

四、预览完成效果：





免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！