iOS绘制渐变色背景 iOS绘制渐变色背景

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)代表竖直方向渐变

绘制渐变色相关代码 【iOS绘制渐变色背景】我把具体的实现方法细节贴出来,相关的封装怎么做都可以.因为涉及到颜色,所以我是在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];

模拟器运行如下: