如何利用CoreGraphics绘制一个渐变色图片,渐变色仿QQ

2017-06-29  本文已影响82人  雪_晟

之前写过一篇文章,怎样做一个渐变色的NavBar:iOS Navbar设置渐变色,可是在使用中会拦截NavBar上按钮的点击事件,最好的办法就是生成一张渐变色的图片,然后设置为bakcGroundImage.(当然,你也可以找UI要一张)
效果图:

渐变Nav.gif

代码如下:

写一个UIImage的分类,

#import <UIKit/UIKit.h>

@interface UIImage (ColorImage)
+ (UIImage *)imageWithColor:(UIColor*)color size:(CGSize)size;

//生成渐变色
+(UIImage*) createGradientImageWithRect:(CGRect)rect startColor:(UIColor *)startColor endColor:(UIColor *)endColor;
@end
#import "UIImage+ColorImage.h"

@implementation UIImage (ColorImage)
+(UIImage *)imageWithColor:(UIColor*)color size:(CGSize)size{
    
    CGRect rect =CGRectMake(0,0, size.width, size.height);
    
    UIGraphicsBeginImageContext(rect.size);
    
    CGContextRef context =UIGraphicsGetCurrentContext();
    
    CGContextSetFillColorWithColor(context, [color CGColor]);
    
    CGContextFillRect(context, rect);
    
    UIImage *image =UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return image;
    
}
+(UIImage*) createGradientImageWithRect:(CGRect)rect startColor:(UIColor *)startColor endColor:(UIColor *)endColor;
{
    
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    
    
    
    drawLinearGradient(context, rect, startColor.CGColor, endColor.CGColor);
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    return image;
}
void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, 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);
    CGPoint startPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMaxX(rect), CGRectGetMaxY(rect));
    
    CGContextSaveGState(context);
    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    
    CGContextRestoreGState(context);
    
    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);
    // More coming...
}

新建一个类继承与UINavigationController,然后设置backgroundImage.


#import "GradientNavController.h"
#import "UIColor+Expanded.h"
#import "UIImage+ColorImage.h"
#define Device_Width  [[UIScreen mainScreen] bounds].size.width//获取屏幕宽高
#define Device_Height [[UIScreen mainScreen] bounds].size.height
#define LBColor(r, g, b) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]
@interface GradientNavController ()

@end

@implementation GradientNavController

- (void)viewDidLoad {
    [super viewDidLoad];
//     Do any additional setup after loading the view.

    
    UIImage *image =[UIImage createGradientImageWithRect:CGRectMake(0, 0, Device_Width, 64) startColor:[UIColor hexStringToColor:@"#5F98FC"] endColor:[UIColor hexStringToColor:@"#47BFFC"]];
    [self.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
    
}

上一篇下一篇

猜你喜欢

热点阅读