iOS绘制渐变色背景

iOS实现颜色渐变

我们在平时开发经常就用一个图片来代替背景图,但是如果没有背景图片,怎么实现下面的效果?今天的这篇文章将会介绍如何用代码实现下面的效果...

Paste_Image.png

CAGradientLayer类

CAGradientLayer类在苹果API文档中其说明为:CAGradientLayer类对其绘制渐变背景颜色、填充层的形状(包括圆角).
其继承关系图如下:

DEB0F788-271F-40BB-9D67-43CD63876376.png

因为其继承CAlayer,设置其属性都会有GPU绘制运算

用到的属性有:

1. colors 渐变的颜色
2. locations 颜色变化位置的取值范围
3. startPoint 颜色渐变的起始位置:取值范围在(0,0)~(1,1)之间
4. 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了