「iOS」 开发笔记 (1) : 导航栏设置渐变颜色 (非滚动渐隐渐现)

你们好, 我是杜才.

这篇文章主要写导航栏设置渐变颜色的两种方法, 并非滚动渐隐渐现导航栏(部分资料来自网络).

两种方法本质都是经过设置渐变颜色, 来生成图片, 再设置导航栏 barTintColor. 目前在使用第二种方法, 第一种方法在 iPad 上显示有问题, 暂未解决. 有其余方式欢迎评论, 共同交流共同进步~

代码中相关宏定义或者本地方法调用已替换, 以保证能够直接使用.

• 方法一

- (UIImage *)gradientColorImage
{
    // 建立CGContextRef
    UIGraphicsBeginImageContext(self.view.bounds.size);
    CGContextRef gc = UIGraphicsGetCurrentContext();
    
    // 建立CGMutablePathRef
    CGMutablePathRef path = CGPathCreateMutable();
    
    // 绘制Path
    CGRect rect = CGRectMake(0.f, 0.f, [UIScreen mainScreen].bounds.size.width, [[UIApplication sharedApplication] statusBarFrame].size.height + self.navigationController.navigationBar.frame.size.height);
    CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect));
    CGPathCloseSubpath(path);
    
    // 绘制渐变
    [self drawLinearGradient:gc path:path startColor:[UIColor redColor].CGColor endColor:[UIColor blueColor].CGColor];
    
    // 注意释放CGMutablePathRef
    CGPathRelease(path);
    
    // 从Context中获取图像
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return img;
}

- (void)drawLinearGradient:(CGContextRef)context
                      path:(CGPathRef)path
                startColor:(CGColorRef)startColor
                  endColor:(CGColorRef)endColor
{
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = { 0.0, 1.0 };
    
    NSArray *colors = @[(__bridge id) startColor, (__bridge id) endColor];
    
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
    
    CGRect pathRect = CGPathGetBoundingBox(path);
    
    // 渐变方向可修改
    CGPoint startPoint = CGPointMake(CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));
    CGPoint endPoint = CGPointMake(CGRectGetMaxX(pathRect), CGRectGetMidY(pathRect));
    
    CGContextSaveGState(context);
    CGContextAddPath(context, path);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    CGContextRestoreGState(context);
    
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
}
复制代码

调用

self.navigationController.navigationBar.barTintColor = [UIColor colorWithPatternImage:[self gradientColorImage]];
复制代码

问题

此方法在 iPhone 端彻底正常显示, 可是在 iPad 上部分页面会出现颜色错位的问题, 暂未研究解决.

• 方法二

- (UIView *)gradientView
{
    CGRect gradientRect = CGRectMake(0.f, 0.f, [UIScreen mainScreen].bounds.size.width, [[UIApplication sharedApplication] statusBarFrame].size.height + self.navigationController.navigationBar.frame.size.height);
    
    UIView *gradientView = [[UIView alloc] initWithFrame:gradientRect];
    
    CAGradientLayer *gradientLayer = [[CAGradientLayer alloc] init];
    
    gradientLayer.frame = gradientRect;
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor blueColor].CGColor];
    // 经过修改 startPoint 和 endPoint 调整渐变方向
    gradientLayer.startPoint = CGPointMake(0, 1);
    gradientLayer.endPoint = CGPointMake(1, 1);
    
    [gradientView.layer addSublayer:gradientLayer];
    
    return gradientView;
}

- (UIImage *)makeImageWithView:(UIView *)view
{
    CGSize size = view.bounds.size;
    
    /**
     * size: 表示区域大小
     * opaque: 是否透明, NO - 半透明, YES - 非透明
     * scale: 屏幕密度(几倍像素)
     */
    UIGraphicsBeginImageContextWithOptions(size, NO, [UIScreen mainScreen].scale);
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage*image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return image;
}
复制代码

调用

self.navigationController.navigationBar.barTintColor = [UIColor colorWithPatternImage:[self makeImageWithView:[self gradientView]]];
复制代码

这样在 iPhone 和 iPad 端均可以正常显示了.