总结iOS实现渐变颜色的三种方法

 更新时间:2016年10月10日 10:35:05   投稿:daisy  
这篇文章主要给大家总结了iOS实现渐变颜色的三种方法,分别是利用CAGradientLayer实现渐变、Core Graphics相关方法实现渐变以及用CAShapeLayer作为layer的mask属性实现,大家可以根据自己的需要选择使用,下面来一起看看吧。

在iOS开发过程中有的时候会需要用到渐变的颜色,这篇文章总结了三种方法来实现,有需要的朋友们下面来一起看看吧。

一、CAGradientLayer实现渐变

CAGradientLayer是CALayer的一个特殊子类,用于生成颜色渐变的图层,使用较为方便

下面介绍下它的相关属性:

      colors 渐变的颜色

      locations 渐变颜色的分割点

      startPoint&endPoint 颜色渐变的方向,范围在(0,0)与(1.0,1.0)之间,如(0,0)(1.0,0)代表水平方向渐变,(0,0)(0,1.0)代表竖直方向渐变

 CAGradientLayer *gradientLayer = [CAGradientLayer layer];
 gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
 gradientLayer.locations = @[@0.3, @0.5, @1.0];
 gradientLayer.startPoint = CGPointMake(0, 0);
 gradientLayer.endPoint = CGPointMake(1.0, 0);
 gradientLayer.frame = CGRectMake(0, 100, 300, 100);
 [self.view.layer addSublayer:gradientLayer];

CAGradientLayer实现渐变标间简单直观,但存在一定的局限性,比如无法自定义整个渐变区域的形状,如环形、曲线形的渐变。

二、Core Graphics相关方法实现渐变

iOS Core Graphics中有两个方法用于绘制渐变颜色,CGContextDrawLinearGradient可以用于生成线性渐变,CGContextDrawRadialGradient用于生成圆半径方向颜色渐变。函数可以自定义path,无论是什么形状都可以,原理都是用来做Clip,所以需要在CGContextClip函数前调用CGContextAddPath函数把CGPathRef加入到Context中。
另外一个需要注意的地方是渐变的方向,方向是由两个点控制的,点的单位就是坐标。因此需要正确从CGPathRef中找到正确的点,方法当然有很多种看具体实现,本例中,我就是简单得通过调用CGPathGetBoundingBox函数,返回CGPathRef的矩形区域,然后根据这个矩形取两个点,读者可以根据自行需求修改具体代码。

1-> 线性渐变

- (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);
}

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

 //创建CGContextRef
 UIGraphicsBeginImageContext(self.view.bounds.size);
 CGContextRef gc = UIGraphicsGetCurrentContext();

 //创建CGMutablePathRef
 CGMutablePathRef path = CGPathCreateMutable();

 //绘制Path
 CGRect rect = CGRectMake(0, 100, 300, 200);
 CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
 CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));
 CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));
 CGPathCloseSubpath(path);

 //绘制渐变
 [self drawLinearGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor];

 //注意释放CGMutablePathRef
 CGPathRelease(path);

 //从Context中获取图像,并显示在界面上
 UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();

 UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
 [self.view addSubview:imgView];
}

2-> 圆半径方向渐变

- (void)drawRadialGradient:(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 center = CGPointMake(CGRectGetMidX(pathRect), CGRectGetMidY(pathRect));
 CGFloat radius = MAX(pathRect.size.width / 2.0, pathRect.size.height / 2.0) * sqrt(2);

 CGContextSaveGState(context);
 CGContextAddPath(context, path);
 CGContextEOClip(context);

 CGContextDrawRadialGradient(context, gradient, center, 0, center, radius, 0);

 CGContextRestoreGState(context);

 CGGradientRelease(gradient);
 CGColorSpaceRelease(colorSpace);
}

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

 //创建CGContextRef
 UIGraphicsBeginImageContext(self.view.bounds.size);
 CGContextRef gc = UIGraphicsGetCurrentContext();

 //创建CGMutablePathRef
 CGMutablePathRef path = CGPathCreateMutable();

 //绘制Path
 CGRect rect = CGRectMake(0, 100, 300, 200);
 CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
 CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));
 CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));
 CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMinY(rect));
 CGPathCloseSubpath(path);

 //绘制渐变
 [self drawRadialGradient:gc path:path startColor:[UIColor greenColor].CGColor endColor:[UIColor redColor].CGColor];

 //注意释放CGMutablePathRef
 CGPathRelease(path);

 //从Context中获取图像,并显示在界面上
 UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
 UIGraphicsEndImageContext();

 UIImageView *imgView = [[UIImageView alloc] initWithImage:img];
 [self.view addSubview:imgView];
}

三、以CAShapeLayer作为layer的mask属性

CALayer的mask属性可以作为遮罩让layer显示mask遮住(非透明)的部分;CAShapeLayer为CALayer的子类,通过path属性可以生成不同的形状,将CAShapeLayer对象用作layer的mask属性的话,就可以生成不同形状的图层。

故生成颜色渐变有以下几个步骤:

     1、生成一个imageView(也可以为layer),image的属性为颜色渐变的图片

     2、生成一个CAShapeLayer对象,根据path属性指定所需的形状

     3、将CAShapeLayer对象赋值给imageView的mask属性

- (void)viewDidLoad
{
 [super viewDidLoad];

 [self.view addSubview:self.firstCircle];
 _firstCircle.frame = CGRectMake(0, 0, 200, 200);
 _firstCircle.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2.0, CGRectGetHeight(self.view.bounds) / 2.0);
 CGFloat firsCircleWidth = 5;
 self.firstCircleShapeLayer = [self generateShapeLayerWithLineWidth:firsCircleWidth];
 _firstCircleShapeLayer.path = [self generateBezierPathWithCenter:CGPointMake(100, 100) radius:100].CGPath;
 _firstCircle.layer.mask = _firstCircleShapeLayer;
} 

- (CAShapeLayer *)generateShapeLayerWithLineWidth:(CGFloat)lineWidth
{
 CAShapeLayer *waveline = [CAShapeLayer layer];
 waveline.lineCap = kCALineCapButt;
 waveline.lineJoin = kCALineJoinRound;
 waveline.strokeColor = [UIColor redColor].CGColor;
 waveline.fillColor = [[UIColor clearColor] CGColor];
 waveline.lineWidth = lineWidth;
 waveline.backgroundColor = [UIColor clearColor].CGColor;

 return waveline;
}

- (UIBezierPath *)generateBezierPathWithCenter:(CGPoint)center radius:(CGFloat)radius
{
 UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO];

 return circlePath;
}

- (UIImageView *)firstCircle
{
 if (!_firstCircle) {
 self.firstCircle = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"circleBackground"]];
 _firstCircle.layer.masksToBounds = YES;
 _firstCircle.alpha = 1.0;
 }

 return _firstCircle;
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对各位iOS开发者们能有所帮助,如果有疑问大家可以留言交流。

相关文章

  • IOS中对Url进行编码和解码示例

    IOS中对Url进行编码和解码示例

    本篇文章主要介绍了IOS中对Url进行编码和解码示例,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • iOS中无限循环滚动简单处理实现原理分析

    iOS中无限循环滚动简单处理实现原理分析

    这篇文章主要介绍了iOS中无限循环滚动简单处理实现原理分析,需要的朋友可以参考下
    2017-12-12
  • iOS自定义相机实现拍照、录制视频

    iOS自定义相机实现拍照、录制视频

    这篇文章主要为大家详细介绍了iOS自定义相机实现拍照、录制视频,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-04-04
  • 详解iOS Method Swizzling使用陷阱

    详解iOS Method Swizzling使用陷阱

    这篇文章主要介绍了详解iOS Method Swizzling使用陷阱,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • IOS 中NSTimer定时器的使用

    IOS 中NSTimer定时器的使用

    这篇文章主要介绍了IOS 中NSTimer定时器的使用的相关资料,希望通过本文能帮助到大家,能让大家彻底理解使用该方法,需要的朋友可以参考下
    2017-10-10
  • iOS实现设备判断是否安装相关地图(百度、高德等)

    iOS实现设备判断是否安装相关地图(百度、高德等)

    这篇文章主要给大家介绍了关于iOS如何实现设备判断是否安装相关地图,比如百度、高德等,其实实现的方法还是很简单,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友下面来一起看看吧。
    2018-01-01
  • IOS网络请求之NSURLSession使用详解

    IOS网络请求之NSURLSession使用详解

    这篇文章主要介绍了IOS网络请求之NSURLSession使用详解,今天使用NSURLConnection分别实现了get、post、表单提交、文件上传、文件下载,有兴趣的可以了解一下。
    2017-02-02
  • iOS开发中苹果输入手机号变用户的名字

    iOS开发中苹果输入手机号变用户的名字

    今天我们的用户输入手机号之后变成了用户的名字,没办法获取验证码,因为手机格式不对。下面通过本文给大家分享开发中苹果输入手机号变用户的名字,需要的朋友可以参考下
    2017-05-05
  • 解决ios微信下vue项目组件切换并自动播放音频问题

    解决ios微信下vue项目组件切换并自动播放音频问题

    最近在做一个英语答题项目,项目需求是通过答题取的成绩 , 答题的题型是分为,听音选图,看图选词和填空题.下面小编给大家带来了ios微信下vue项目组件切换并自动播放音频的解决方案,需要的朋友参考下吧
    2018-01-01
  • iOS11和iPhoneX适配的一些坑

    iOS11和iPhoneX适配的一些坑

    前阵子项目开发忙成狗,就一直没做iOS11的适配,直到XcodeGM版发布后,我胸有成竹的在iPhoneX上跑起项目,整个人都凉透了...下面总结一下我遇到的坑,感兴趣的朋友一起看看吧
    2017-09-09

最新评论