1.CAGradientLayer

  • 代码
1
#define MF_ColorFromHex(c) [UIColor colorWithRed:((c>>16)&0xFF)/255.0f green:((c>>8)&0xFF)/255.0f blue:(c&0xFF)/255.0f alpha:1.0f]
1
2
3
4
5
6
7
8
9
10
11
12
//创建渐变层并添加到view的图层
    CAGradientLayer *layer = [CAGradientLayer layer];
    layer.frame = self.view.bounds;
    [self.view.layer addSublayer:layer];

    //渐变起始点结束点，使用单位坐标。左上角(0, 0) 右下角(1, 1)
    layer.startPoint = CGPointMake(0.5, 0);
    layer.endPoint = CGPointMake(0.5, 1);
    //用来调整渐变空间,也是单位坐标，0.0开头，1.0结尾，描述了每种颜色在渐变线上的位置
    layer.locations = @[@0.0, @0.5,@1.0];
    //共有哪几种颜色，数组里面要求放CGColorRef objects，要和locations数量对应,如果不对应,就只能依少的来渐变，没有出现变空白的现象
    layer.colors = @[(__bridge id)MF_ColorFromHex(0x00ff00).CGColor, (__bridge id)MF_ColorFromHex(0x0000ff).CGColor, (__bridge id)MF_ColorFromHex(0xff0000).CGColor];
  • 效果

  • 说明

CAGradientLayer是CALayer的一个子类，专门处理渐变效果，gradient就是渐变的意思。如果只是两种颜色的渐变可以不设置locations属性。颜色是16位颜色，所以需要用位移和与运算操作转换一下。
实际上CAGradientLayer是对Core Graphics的封装，底部实现是使用Core Graphics绘制。说法来自于iOS Core Animation Advanced Techniques (ios核心动画高级技巧)这本书。

2.Core Graphics绘制渐变

  • 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();
    //C浮点型数组，取值区间0到1，中间可以插值，如果起始点不是0，前面都是起始点的颜色，结尾同理
    CGFloat locations[3] = { 0.0, 0.6, 1.0 };
    //RGBA颜色，4个代表一个颜色
    CGFloat components[12] = { 1.0, 0.0, 0.0, 1.0,
                               0.0, 1.0, 0.0, 1.0,
                               1.0, 1.0, 0.0, 1.0 };
    //色彩空间
    CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
    //创建渐变，最后一个参数代表一共过渡几种颜色，与locations个数对应，小于，例如如果填了2只显示前两种颜色渐变，大于，例如填了4则什么都不显示了
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorspace, components, locations, 3);
    //起始点
    CGPoint startPoint = CGPointMake(rect.size.width/2, 200);
    CGPoint endPoint = CGPointMake(rect.size.width/2 , rect.size.height-200);

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:startPoint];
    [path addLineToPoint:CGPointMake(rect.size.width-100, rect.size.height-200)];
    [path addLineToPoint:CGPointMake(100, rect.size.height-200)];
    [path moveToPoint:startPoint];
    //保存绘制前状态，绘制之后无法删除
    CGContextSaveGState(context);
    //使用路径裁剪上下文
    [path addClip];
    //绘制线性渐变，还有径向渐变，参数会是圆心，角度什么的。最后一个参数表示起始点之前或者终点之后的填充颜色会和起始点或终点一样
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
    //恢复绘制前的上下文状态，现在的上下文不是裁剪的那块了
    CGContextRestoreGState(context);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorspace);
}
  • 效果

  • 说明

来源于iOS 编程(第四版)，但是书上说，到目前为止还无法使用OC类绘制阴影和渐变。去查文档Core Graphics iOS2 就可以用，CALayer所属的QuartzCore应该是iOS3就出来了。这本书基于iOS7，竟然说没有OC类可以绘制，不知道为什么？顺便提一嘴，这本书还是不错的，新手向，可以查漏补缺，豆瓣评分挺高，京东有售。