导航栏渐变色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
关键点解释
-
生成渐变背景图片 (
gradientImageWithBounds:
方法):- 使用
UIGraphicsBeginImageContext
和CGGradientRef
生成一张横向渐变的图片。 - 渐变颜色从左到右的效果通过设置
startPoint
和endPoint
来实现。 - 通过
UIGraphicsGetImageFromCurrentImageContext
获取生成的渐变图片。
- 使用
-
设置导航栏的背景图片:
- 使用
setBackgroundImage:forBarMetrics:
方法将生成的渐变图片设置为导航栏的背景,这样可以确保其他 UI 元素(如标题和按钮)不会被遮挡。
- 使用
-
修复导航栏在 iOS 15 中的显示问题:
- 在
ios15nvbug
方法中设置UINavigationBarAppearance
,确保导航栏背景透明,以便使用渐变背景图片。
- 在