iOS实现颜色渐变
我们在平时开发经常就用一个图片来代替背景图,但是如果没有背景图片,怎么实现下面的效果?今天的这篇文章将会介绍如何用代码实现下面的效果...
Paste_Image.png
CAGradientLayer类
CAGradientLayer类在苹果API文档中其说明为:CAGradientLayer类对其绘制渐变背景颜色、填充层的形状(包括圆角).
其继承关系图如下:
DEB0F788-271F-40BB-9D67-43CD63876376.png
因为其继承CAlayer,设置其属性都会有GPU绘制运算
用到的属性有:
- colors 渐变的颜色
- locations 颜色变化位置的取值范围
- startPoint 颜色渐变的起始位置:取值范围在(0,0)~(1,1)之间
- endPoint 颜色渐变的终点位置,取值范围也是在(0,0)~(1,1)之间
补充下:startPoint & endPoint设置为(0,0)(1.0,0)代表水平方向渐变,(0,0)(0,1.0)代表竖直方向渐变
绘制渐变色相关代码
我把具体的实现方法细节贴出来,相关的封装怎么做都可以.因为涉及到颜色,所以我是在Color类上进行扩展方法(下面方法涉及到的colorWithHex:方法,在该方法下面也补充上了)
//绘制渐变色颜色的方法
+ (CAGradientLayer *)setGradualChangingColor:(UIView *)view fromColor:(NSString *)fromHexColorStr toColor:(NSString *)toHexColorStr{
// CAGradientLayer类对其绘制渐变背景颜色、填充层的形状(包括圆角)
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = view.bounds;
// 创建渐变色数组，需要转换为CGColor颜色
gradientLayer.colors = @[(__bridge id)[UIColor colorWithHex:fromHexColorStr].CGColor,(__bridge id)[UIColor colorWithHex:toHexColorStr].CGColor];
// 设置渐变颜色方向，左上点为(0,0), 右下点为(1,1)
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
// 设置颜色变化点，取值范围 0.0~1.0
gradientLayer.locations = @[@0,@1];
return gradientLayer;
}
//获取16进制颜色的方法
+ (UIColor *)colorWithHex:(NSString *)hexColor {
hexColor = [hexColor stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
if ([hexColor length] < 6) {
return nil;
}
if ([hexColor hasPrefix:@"#"]) {
hexColor = [hexColor substringFromIndex:1];
}
NSRange range;
range.length = 2;
range.location = 0;
NSString *rs = [hexColor substringWithRange:range];
range.location = 2;
NSString *gs = [hexColor substringWithRange:range];
range.location = 4;
NSString *bs = [hexColor substringWithRange:range];
unsigned int r, g, b, a;
[[NSScanner scannerWithString:rs] scanHexInt:&r];
[[NSScanner scannerWithString:gs] scanHexInt:&g];
[[NSScanner scannerWithString:bs] scanHexInt:&b];
if ([hexColor length] == 8) {
range.location = 4;
NSString *as = [hexColor substringWithRange:range];
[[NSScanner scannerWithString:as] scanHexInt:&a];
} else {
a = 255;
}
return [UIColor colorWithRed:((float)r / 255.0f) green:((float)g / 255.0f) blue:((float)b / 255.0f) alpha:((float)a / 255.0f)];
}
在VC里调用下:
UIView *sysView = [UIView new];
[sysView setFrame:CGRectMake(60, 60, 100, 40)];
sysView.layer.cornerRadius = 20.0;
sysView.layer.masksToBounds = YES;
[sysView.layer addSublayer:[UIColor setGradualChangingColor:sysView fromColor:@"F76B1C" toColor:@"FBDA61"]];
[self.view addSubview:sysView];
模拟器运行如下:
Paste_Image.png
总结
CAGradientLayer实现渐变标间简单直观，但存在一定的局限性，比如无法自定义整个渐变区域的形状，如环形、曲线形的渐变。
本想把代码传到Github上,一直没传上去,可能是网络的缘故吧,demo改天在传,具体实现方法已经写好了,用的时候直接调下就OK了
