陈斌彬的技术博客

Stay foolish,stay hungry

iOS实现一个带有渐变的UIView

早上在做项目的时候要做一个带有渐变背景的页面。。。之前以为是美工切图就行了,结果美工就给了我渐变的开始值和结束值····这也行吧····渐变在android上都可以实现,何况是ios呢。。。果然,百度google了一番,就找到了一个方法,不过略坑爹啊·····方法竟然是在背景UIView上不断addSubView····颜色的值用循环产生····然后就实现了渐变。。。这不坑爹么·····要实现一个View的渐变还得加无数个UIView····麻烦不说···内存也得耗费不少吧~···这样肯定不行。。于是又继续看其他文章,终于找到个比较靠谱的···关键的函数:

/** 
 画图形渐进色方法,此方法只支持双色值渐变 
 @param context     图形上下文的CGContextRef 
 @param clipRect    需要画颜色的rect 
 @param startPoint  画颜色的起始点坐标 
 @param endPoint    画颜色的结束点坐标 
 @param options     CGGradientDrawingOptions 
 @param startColor  开始的颜色值 
 @param endColor    结束的颜色值 
 */  
- (void)DrawGradientColor:(CGContextRef)context  
                     rect:(CGRect)clipRect  
                    point:(CGPoint) startPoint  
                    point:(CGPoint) endPoint  
                  options:(CGGradientDrawingOptions) options  
               startColor:(UIColor*)startColor  
                 endColor:(UIColor*)endColor  
{  
    UIColor* colors [2] = {startColor,endColor};  
    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();  
    CGFloat colorComponents[8];  

    for (int i = 0; i < 2; i++) {  
        UIColor *color = colors[i];  
        CGColorRef temcolorRef = color.CGColor;  

        const CGFloat *components = CGColorGetComponents(temcolorRef);  
        for (int j = 0; j < 4; j++) {  
            colorComponents[i * 4 + j] = components[j];  
        }  
    }  

    CGGradientRef gradient =  CGGradientCreateWithColorComponents(rgb, colorComponents, NULL, 2);  

    CGColorSpaceRelease(rgb);  
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, options);  
    CGGradientRelease(gradient);  
}  

这就实现了对UIView的渐变处理···只需要传入几个参数就行了···开始点,结束点、开始颜色和结束颜色这些。。。然后它具体实现其实我现在都还看不太懂····之后有时间慢慢研究吧~··之后我觉得这东西以后可能会比较常使用,于是我就封装了一下,写了一个自定义的UIView,然后只需传入开始颜色和结束颜色就可以实现整个View垂直的渐变,当然也可以实现水平的渐变和两种倾斜的渐变,项目里使用就差不多这些就足够了吧·····以后需要用到就可以直接拿来用了。。。 放在这里也方便在项目里需要用到的童鞋直接使用····以下是实现源码

.h

#import <UIKit/UIKit.h>  

typedef NS_ENUM(NSInteger, GradientViewType){  
    kGradientViewTypeHorizontal = 0,  
    kGradientViewTypeVertical = 1,  
    kGradientViewTypeInclinedLeft = 2,  
    kGradientViewTypeInclinedRight = 3  
};  

@interface KKGradientView : UIView  
@property (nonatomic, strong) UIColor *startColor;  
@property (nonatomic, strong) UIColor *endColor;  
@property (nonatomic, assign) GradientViewType gradientViewType;  

- (id)initWithFrame:(CGRect)frame startColor:(UIColor *)startColor endColor:(UIColor *)endColor;  

@end  

.m

#import "KKGradientView.h"  

@implementation KKGradientView  

- (id)initWithFrame:(CGRect)frame  
{  
    self = [super initWithFrame:frame];  
    if (self) {  
        // Initialization code  
        _startColor = [UIColor colorWithWhite:1.0 alpha:1.0];  
        _endColor = [UIColor colorWithWhite:0.0 alpha:1.0];  
        _gradientViewType = kGradientViewTypeVertical;  
    }  
    return self;  
}  
- (id)initWithFrame:(CGRect)frame startColor:(UIColor *)startColor endColor:(UIColor *)endColor{  
    self = [self initWithFrame:frame];  
    if (self) {  
        _startColor = startColor;  
        _endColor = endColor;  
    }  
    return self;  
}  


// Only override drawRect: if you perform custom drawing.  
// An empty implementation adversely affects performance during animation.  
- (void)drawRect:(CGRect)rect  
{  
    // Drawing code  
    CGContextRef context = UIGraphicsGetCurrentContext();  
    CGPoint startPoint;  
    CGPoint endPoint;  
    //从上到下  
    if (_gradientViewType == kGradientViewTypeVertical) {  
        startPoint = CGPointZero;  
        endPoint = CGPointMake(0, rect.size.height);  
    }  
    //从左到右  
    if (_gradientViewType == kGradientViewTypeHorizontal) {  
        startPoint = CGPointZero;  
        endPoint = CGPointMake(rect.size.width, 0);  
    }  
    //从左上到右下  
    if (_gradientViewType == kGradientViewTypeInclinedLeft) {  
        startPoint = CGPointZero;  
        endPoint = CGPointMake(rect.size.width, rect.size.height);  
    }  
    //从右上到左下  
    if (_gradientViewType == kGradientViewTypeInclinedRight) {  
        startPoint = CGPointMake(rect.size.width, 0);  
        endPoint = CGPointMake(0, rect.size.height);  
    }  
    [self DrawGradientColor:context rect:rect point:startPoint point:endPoint options:kCGGradientDrawsAfterEndLocation startColor:_startColor endColor:_endColor];  
}  

/** 
 画图形渐进色方法,此方法只支持双色值渐变 
 @param context     图形上下文的CGContextRef 
 @param clipRect    需要画颜色的rect 
 @param startPoint  画颜色的起始点坐标 
 @param endPoint    画颜色的结束点坐标 
 @param options     CGGradientDrawingOptions 
 @param startColor  开始的颜色值 
 @param endColor    结束的颜色值 
 */  
- (void)DrawGradientColor:(CGContextRef)context  
                     rect:(CGRect)clipRect  
                    point:(CGPoint) startPoint  
                    point:(CGPoint) endPoint  
                  options:(CGGradientDrawingOptions) options  
               startColor:(UIColor*)startColor  
                 endColor:(UIColor*)endColor  
{  
    UIColor* colors [2] = {startColor,endColor};  
    CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();  
    CGFloat colorComponents[8];  

    for (int i = 0; i < 2; i++) {  
        UIColor *color = colors[i];  
        CGColorRef temcolorRef = color.CGColor;  

        const CGFloat *components = CGColorGetComponents(temcolorRef);  
        for (int j = 0; j < 4; j++) {  
            colorComponents[i * 4 + j] = components[j];  
        }  
    }  

    CGGradientRef gradient =  CGGradientCreateWithColorComponents(rgb, colorComponents, NULL, 2);  

    CGColorSpaceRelease(rgb);  
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, options);  
    CGGradientRelease(gradient);  
}  


@end  

然后使用···

#import "ViewController.h"  
#import "KKGradientView.h"  

@interface ViewController ()  

@end  

@implementation ViewController  

- (void)viewDidLoad  
{  
    [super viewDidLoad];  
    // Do any additional setup after loading the view, typically from a nib.  
    /** 
     整个View被切成四个等分的矩形,不是三个·····那是错觉 
     都是纯红色到纯绿色的渐变 
     */  

    //默认是垂直的  
    KKGradientView *gradientViewV = [[KKGradientView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width / 2, self.view.frame.size.height / 2) startColor:[UIColor redColor] endColor:[UIColor greenColor]];  
    [self.view addSubview:gradientViewV];  

    //水平  
    KKGradientView *gradientViewH = [[KKGradientView alloc]initWithFrame:CGRectMake(self.view.frame.size.width / 2, 0, self.view.frame.size.width / 2, self.view.frame.size.height / 2) startColor:[UIColor redColor] endColor:[UIColor greenColor]];  
    [gradientViewH setGradientViewType:kGradientViewTypeHorizontal];  
    [self.view addSubview:gradientViewH];  

    //从左上角开始倾斜  
    KKGradientView *gradientViewIL = [[KKGradientView alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height / 2, self.view.frame.size.width / 2, self.view.frame.size.height / 2) startColor:[UIColor redColor] endColor:[UIColor greenColor]];  
    [gradientViewIL setGradientViewType:kGradientViewTypeInclinedLeft];  
    [self.view addSubview:gradientViewIL];  

    //从右上角开始倾斜  
    KKGradientView *gradientViewIR = [[KKGradientView alloc]initWithFrame:CGRectMake(self.view.frame.size.width / 2, self.view.frame.size.height / 2, self.view.frame.size.width / 2, self.view.frame.size.height / 2) startColor:[UIColor redColor] endColor:[UIColor greenColor]];  
    [gradientViewIR setGradientViewType:kGradientViewTypeInclinedRight];  
    [self.view addSubview:gradientViewIR];  


}  

- (void)didReceiveMemoryWarning  
{  
    [super didReceiveMemoryWarning];  
    // Dispose of any resources that can be recreated.  
}  

@end  

Resource Reference