iOS实现颜色渐变

iOS实现颜色渐变

颜色渐变素材图

我们在平时开发再设置背景渐变色的时候经常就用一个图片来代替,昨天看到一个美工素材,如果没给我们背景图片,那就只好用代码来绘制.素材图如下:
这里写图片描述

CAGradientLayer类

CAGradientLayer类在苹果API文档中其说明为:CAGradientLayer类对其绘制渐变背景颜色、填充层的形状(包括圆角).
其继承关系图如下:
这里写图片描述
其继承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类上进行扩展

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

在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];

模拟器运行如下:
这里写图片描述

总结

CAGradientLayer实现渐变标间简单直观,但存在一定的局限性,比如无法自定义整个渐变区域的形状,如环形、曲线形的渐变。
发布了7 篇原创文章 · 获赞 0 · 访问量 5938
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览