导航栏渐变色iOS

- (void)viewDidLoad {[super viewDidLoad];// 设置导航栏属性self.navigationBar.translucent = NO;[self.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor], NSFontAttributeName:[UIFont boldSystemFontOfSize:28]}];// 修复iOS 15后导航栏变白色的bug并设置渐变背景[self ios15nvbug];
}
- (UIImage *)gradientImageWithBounds:(CGRect)bounds {CGSize size = bounds.size;if (size.width == 0 || size.height == 0) {size = CGSizeMake([UIScreen mainScreen].bounds.size.width, 88); // 默认宽度和导航栏高度}UIGraphicsBeginImageContext(size);CGContextRef context = UIGraphicsGetCurrentContext();// 创建渐变CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();CGFloat locations[] = {0.0, 1.0};NSArray *colors = @[(__bridge id)[UIColor colorWithRed:244/255.0 green:102/255.0 blue:36/255.0 alpha:1].CGColor,(__bridge id)[UIColor colorWithRed:205/255.0 green:75/255.0 blue:0 alpha:1].CGColor];CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, locations);// 横向渐变（从左到右）CGPoint startPoint = CGPointMake(0, 0);CGPoint endPoint = CGPointMake(size.width, 0);CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);// 获取渐变图像UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();CGGradientRelease(gradient);CGColorSpaceRelease(colorSpace);return gradientImage;
}
- (void)ios15nvbug {if (@available(iOS 13.0, *)) {UINavigationBarAppearance *appearance = [UINavigationBarAppearance new];[appearance configureWithOpaqueBackground];// 设置渐变背景图片UIImage *gradientImage = [self gradientImageWithBounds:self.navigationBar.bounds];appearance.backgroundImage = gradientImage;appearance.shadowImage = [[UIImage alloc] init];appearance.shadowColor = nil;// 设置导航栏标题的文本属性[appearance setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor], NSFontAttributeName: [UIFont boldSystemFontOfSize:22]}];self.navigationBar.standardAppearance = appearance;self.navigationBar.scrollEdgeAppearance = appearance;} else {// iOS 13 以下使用旧的方法设置背景图片UIImage *gradientImage = [self gradientImageWithBounds:self.navigationBar.bounds];[self.navigationBar setBackgroundImage:gradientImage forBarMetrics:UIBarMetricsDefault];[self.navigationBar setShadowImage:[UIImage new]]; // 去除默认的阴影线[self.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor whiteColor], NSFontAttributeName: [UIFont boldSystemFontOfSize:22]}];}
}// 其余方法保持不变...@end

关键点解释

1. 生成渐变背景图片 (gradientImageWithBounds: 方法):

   • 使用 UIGraphicsBeginImageContext 和 CGGradientRef 生成一张横向渐变的图片。
   • 渐变颜色从左到右的效果通过设置 startPoint 和 endPoint 来实现。
   • 通过 UIGraphicsGetImageFromCurrentImageContext 获取生成的渐变图片。

2. 设置导航栏的背景图片:

   • 使用 setBackgroundImage:forBarMetrics: 方法将生成的渐变图片设置为导航栏的背景，这样可以确保其他 UI 元素（如标题和按钮）不会被遮挡。

3. 修复导航栏在 iOS 15 中的显示问题:

   • 在 ios15nvbug 方法中设置 UINavigationBarAppearance，确保导航栏背景透明，以便使用渐变背景图片。