iOS学习笔记----实现一个带有渐变的UIView

来源：互联网发布：逆袭网络剧编辑：程序博客网时间：2024/05/16 13:00

又是好久没写博了·····最近项目缠身又临近期末考···虽然有很多东西都想记下来···可是时间真的是不太允许啊。。。今天就先记下个简单的东西吧！！！

早上在做项目的时候要做一个带有渐变背景的页面。。。之前以为是美工切图就行了，结果美工就给了我渐变的开始值和结束值····这也行吧····渐变在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垂直的渐变，当然也可以实现水平的渐变和两种倾斜的渐变，项目里使用就差不多这些就足够了吧·····以后需要用到就可以直接拿来用了。。。

放在这里也方便在项目里需要用到的童鞋直接使用····以下是实现源码

#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

#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

0 0