当前位置: 首页 > article >正文

导航栏渐变色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: 方法):

    • 使用 UIGraphicsBeginImageContextCGGradientRef 生成一张横向渐变的图片。
    • 渐变颜色从左到右的效果通过设置 startPointendPoint 来实现。
    • 通过 UIGraphicsGetImageFromCurrentImageContext 获取生成的渐变图片。
  2. 设置导航栏的背景图片:

    • 使用 setBackgroundImage:forBarMetrics: 方法将生成的渐变图片设置为导航栏的背景,这样可以确保其他 UI 元素(如标题和按钮)不会被遮挡。
  3. 修复导航栏在 iOS 15 中的显示问题:

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


http://www.kler.cn/a/382469.html

相关文章:

  • 08LangChain实战课 - 输出解析器深入与Pydantic解析器实战
  • CST汽车天线仿真(双向混合求解)
  • 大模型微调技术 --> 脉络
  • GPIO子系统中Controller驱动源码分析
  • Jmeter命令监控CPU等指标
  • 如何学习Python编程?
  • 在不知道root密码的情况下向MobaXterm发送信息
  • 机器学习在运维中的应用
  • 仓库(Repository)
  • Go + Wasm
  • 深入理解 C++ 中的 std::vector
  • 淘宝商品详情 API:助力电商业务腾飞的新桥梁
  • 流程与模式
  • Python正则表达式匹配汉字、英文、数字、常用符号等
  • Automated Isotope Identification Algorithm UsingArtificial Neural Networks-论文阅读
  • Rust常用数据结构教程 String与str,元组和数组
  • 【K8S系列】Kubernetes 中 Service 更改未生效的故障排查与解决方案【已解决】
  • 智能提醒助理系列-jdk8升级到21,springboot2.3升级到3.3【性能篇】
  • WandB概念、主要功能、详细说明和总结
  • 鸿蒙ArkTS中的布局容器组件(Scroll、List、Tabs)
  • react中得类组件和函数组件有啥区别,怎么理解这两个函数
  • 源文件到可执行文件流程
  • Vue.js组件开发:构建高效、可复用的前端应用
  • 【MATLAB源码-第200期】基于matlab的鸡群优化算法(CSO)机器人栅格路径规划,输出做短路径图和适应度曲线。
  • 蓝桥杯-网络安全比赛题目-遗漏的压缩包
  • 15分钟学 Go 第 30 天:测试基础