iOS 15下Objective-C如何通过UINavigationBarAppearance设置导航栏渐变背景

你需要将渐变效果渲染为UIImage，再赋值给UINavigationBarAppearance的backgroundImage属性即可实现需求，具体实现步骤如下： #

步骤1：添加渐变图片生成方法 #

你可以将该方法封装成UIImage分类，或者直接放在当前实现文件中使用，示例OC代码如下：

/// 生成线性渐变UIImage
/// @param size 图片尺寸 传导航栏+状态栏总尺寸即可适配
/// @param startColor 渐变起始颜色
/// @param endColor 渐变结束颜色
/// @param startPoint 渐变起始位置 (0,0)为左上角 (1,1)为右下角
/// @param endPoint 渐变结束位置
+ (UIImage *)gradientImageWithSize:(CGSize)size startColor:(UIColor *)startColor endColor:(UIColor *)endColor startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint {
    UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithSize:size];
    return [renderer imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
        CGContextRef context = rendererContext.CGContext;
        NSArray *colors = @[(id)startColor.CGColor, (id)endColor.CGColor];
        CGGradientRef gradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), (CFArrayRef)colors, nil);
        CGContextDrawLinearGradient(context, gradient, 
            CGPointMake(size.width * startPoint.x, size.height * startPoint.y), 
            CGPointMake(size.width * endPoint.x, size.height * endPoint.y), 
            kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
        CGGradientRelease(gradient);
    }];
}

步骤2：修改原有iOS15适配代码 #

替换原来[appearance setBackgroundColor:startColor]的代码，改为设置渐变背景图，修改后完整代码如下：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // 原有初始化逻辑保留
    if (@available(iOS 15, *)){
        UINavigationBarAppearance *appearance = [[UINavigationBarAppearance alloc] init];
        [appearance configureWithTransparentBackground];
        // 计算导航栏总尺寸（状态栏高度+导航栏本身高度44）
        CGFloat statusBarHeight = [UIApplication sharedApplication].statusBarFrame.size.height;
        CGSize navTotalSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 44 + statusBarHeight);
        // 生成渐变图片，示例为从上到下渐变，可自行调整startPoint、endPoint修改渐变方向
        UIImage *gradientBg = [self gradientImageWithSize:navTotalSize 
                                                startColor:startColor 
                                                  endColor:endColor 
                                                startPoint:CGPointMake(0, 0) 
                                                  endPoint:CGPointMake(0, 1)];
        // 赋值渐变背景图
        appearance.backgroundImage = gradientBg;
        // 可选：去掉导航栏底部分隔线，不需要可删除此行
        appearance.shadowColor = [UIColor clearColor];
        
        [UINavigationBar appearance].standardAppearance = appearance;
        [UINavigationBar appearance].scrollEdgeAppearance = appearance;
    }
    return YES;
}

注意事项 #

• 如果你的App支持横竖屏切换，需要在横竖屏切换回调中重新生成对应宽度的渐变图片，重新赋值给当前导航控制器的导航栏外观属性即可
• 如果全App导航栏渐变规则统一，也可以将渐变图片设置为左右可拉伸，无需每次横竖屏切换都重新生成图片

内容的提问来源于stack exchange，提问作者Fabrizio L.