border渐变 ios_iOS给视图添加渐变色

在iOS中系统框架提供了好多方法来供我们绘图,今天我们就研究渐变色.

1   用CAGradientLayer来实现

我们可以用CAGradientLayer来实现给试图添加渐变色.关于CAGradientLayer我们点击进去会发现主要有以下几个属性@interface CAGradientLayer : CALayer

@property(nullable, copy) NSArray *colors;

@property(nullable, copy) NSArray *locations;

@property CGPoint startPoint;

@property CGPoint endPoint;

@property(copy) NSString *type;

@end

解释下各个属性

colors 渐变的颜色

locations 渐变颜色的分割点

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

CAGradientLayer 继承于CALayer ,所以CAlayer得各个方法我们也可以使用.好了知识复习完毕 我们开始操作,先上代码#pragma mark  渐变色

-(void)gradineViewOne

{

CAGradientLayer* gradinentlayer=[CAGradientLayer layer];

gradinentlayer.colors=@[(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor redColor].CGColor];

//分割点  设置 风电设置不同渐变的效果也不相同

gradinentlayer.locations=@[@0.2,@0.4,@1.0];

gradinentlayer.startPoint=CGPointMake(0, 0);

gradinentlayer.endPoint=CGPointMake(1.0, 0);

gradinentlayer.frame=CGRectMake(20, 100, 300, 400);

[self.view.layer  addSublayer:gradinentlayer];

}

效果图

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

很显然知识这样并不能满足我们实际生活中所需要面对的需求.那么还有其他方法吗?答案是肯定的.

下面我们用另外的方法实现

2  Core Graphics相关方法实现渐变

OS Core Graphics中有两个方法用于绘制渐变颜色，CGContextDrawLinearGradient可以用于生成线性渐变，CGContextDrawRadialGradient用于生成圆半径方向颜色渐变。

我们先完成线性渐变的处理  上代码

线性渐变//线性渐变

-(void)makeLineGradient

{

//创建CGContextRef

UIGraphicsBeginImageContext(self.view.bounds.size);

//创建绘图上下文

CGContextRef gcontext = UIGraphicsGetCurrentContext();

//创建CGMutablePathRef

CGMutablePathRef path = CGPathCreateMutable();

//绘制Path

CGRect rect = CGRectMake(20, 100, 300, 300);

CGPathMoveToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));

CGPathAddLineToPoint(path, NULL, CGRectGetMidX(rect), CGRectGetMaxY(rect));

CGPathAddLineToPoint(path, NULL, CGRectGetWidth(rect), CGRectGetMaxY(rect));

CGPathCloseSubpath(path);

//渐变绘制

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGFloat locations[] = { 0.0, 1.0 };

CGColorRef startColor =[UIColor greenColor].CGColor;

CGColorRef endColor =[UIColor redColor].CGColor;

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

CGContextAddPath(gcontext, path);

CGContextClip(gcontext);

CGContextDrawLinearGradient(gcontext, gradient, startPoint, endPoint, 0);

CGContextRestoreGState(gcontext);

CGGradientRelease(gradient);

CGColorSpaceRelease(colorSpace);

//注意释放CGMutablePathRef

CGPathRelease(path);

//从Context中获取图像，并显示在界面上

UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

UIImageView *imgView = [[UIImageView alloc] initWithImage:img];

[self.view addSubview:imgView];

}

上效果图

半径渐变//半径渐变

-(void)makeradisGradient

{

//创建CGContextRef

UIGraphicsBeginImageContext(self.view.bounds.size);

//创建绘图上下文

CGContextRef gcontext = UIGraphicsGetCurrentContext();

//创建CGMutablePathRef

CGMutablePathRef path = CGPathCreateMutable();

//绘制Path

CGRect rect = CGRectMake(50, 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);

//渐变绘制

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

CGFloat locations[] = { 0.0, 1.0 };

CGColorRef startColor =[UIColor greenColor].CGColor;

CGColorRef endColor =[UIColor blackColor].CGColor;

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

CGContextAddPath(gcontext, path);

CGContextEOClip(gcontext);

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

CGContextRestoreGState(gcontext);

CGGradientRelease(gradient);

CGColorSpaceRelease(colorSpace);

//注意释放CGMutablePathRef

CGPathRelease(path);

//从Context中获取图像，并显示在界面上

UIImage *img = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

UIImageView *imgView = [[UIImageView alloc] initWithImage:img];

[self.view addSubview:imgView];

}

效果图

使用 CAShapeLayer 来实现

原理就是利用CALayer的mask属性

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

这样做的前提是先有一个渐变色的图片 然后利用CAShapeLayer 来自定义形状mask遮住不想要的部分,显示出我们想要的样式.

上代码//使用cashapelayer 实现渐变

-(void)gradineViewTwo

{

UIImageView *gCircle=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"circleBackground"]];

[self.view addSubview:gCircle];

gCircle.layer.masksToBounds = YES;

gCircle.alpha = 1.0;

gCircle.frame=CGRectMake(0, 0, 200, 200);

gCircle.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2.0, CGRectGetHeight(self.view.bounds) / 2.0);

CGFloat lineWidth = 5;

//生成shapelayer

CAShapeLayer *wavelinelayer = [CAShapeLayer layer];

wavelinelayer.lineCap = kCALineCapButt;

wavelinelayer.lineJoin = kCALineJoinRound;

wavelinelayer.strokeColor = [UIColor redColor].CGColor;

wavelinelayer.fillColor = [[UIColor clearColor] CGColor];

wavelinelayer.lineWidth = lineWidth;

wavelinelayer.backgroundColor = [UIColor clearColor].CGColor;

//生成path 自定义形状

CGPoint center =CGPointMake(100, 100);

//调整半径和中心点的位置 遮住的部分不一样

CGFloat radius=95;

UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO];

wavelinelayer.path=circlePath.CGPath;

//CALayer的mask属性可以作为遮罩让layer显示mask遮住(非透明)部分

gCircle.layer.mask=wavelinelayer;

}

上原来的渐变图 和效果图

效果图

总结 实现渐变色其实还是主要是对Core Graphics 这个绘图框架的底层运用,涉及到CAShapeLayer等相关知识点.