「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 端均可以正常顯示了.