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

最后完整使用demo的工程包在这····

http://download.csdn.net/detail/kekeqiaokeli/6802035