一、CAGradientLayer介绍
CAGradientLayer
根据官方的解释是渐变层在其背景色上绘制颜色渐变,即是填充层的形状(包括圆角),通俗的来说就是根据shape形状来绘制渐变色。对于iOS开发者来说,如果不需要太酷炫的渐变效果,这CAGradientLayer
类完全可以胜任一般渐变效果的实现,不管是两种颜色还是三种颜色渐变,都能很好的实现。不需要下载其他功能复杂的第三方,几句代码就可以实现渐变效果,简直了。
二、CAGradientLayer属性介绍
CAGradientLayer
包含的属性很少,而且都很好理解,接下来就带大家简便的熟悉一下:
1、CALayer的所有属性
因为CAGradientLayer
继承与CALayer
,所以CAGradientLayer
可以使用其父类CALayer
所有开放的属性。
2、colors
/* The array of CGColorRef objects defining the color of each gradient
* stop. Defaults to nil. Animatable. */
@property(nullable, copy) NSArray *colors;
设置渐变的颜色,这是个数组,可以添加多个颜色,例如:
gradient.colors = @[(id)[UIColor blackColor].CGColor,(id)[UIColor whiteColor].CGColor];
注:颜色属于CGColorRef
类,所以必须加CGColor
,而且前面还要加(id)
。
3、locations
/* An optional array of NSNumber objects defining the location of each
* gradient stop as a value in the range [0,1]. The values must be
* monotonically increasing. If a nil array is given, the stops are
* assumed to spread uniformly across the [0,1] range. When rendered,
* the colors are mapped to the output colorspace before being
* interpolated. Defaults to nil. Animatable. */
@property(nullable, copy) NSArray<NSNumber *> *locations;
渐变颜色的区间分布,locations的数组长度和color一致也可以不一致,这个值一般不用管它,默认是nil,会平均分布。
4、startPoint和endPoint
/* The start and end points of the gradient when drawn into the layer's
* coordinate space. The start point corresponds to the first gradient
* stop, the end point to the last gradient stop. Both points are
* defined in a unit coordinate space that is then mapped to the
* layer's bounds rectangle when drawn. (I.e. [0,0] is the bottom-left
* corner of the layer, [1,1] is the top-right corner.) The default values
* are [.5,0] and [.5,1] respectively. Both are animatable. */
@property CGPoint startPoint;
@property CGPoint endPoint;
startPoint
与endPoint
分别为渐变的起始方向与结束方向,它是以矩形的四个角为基础的,(0,0)为左上角、(1,0)为右上角、(0,1)为左下角、(1,1)为右下角,默认是值是(0.5,0)和(0.5,1),例如:
//渐变从左下角开始
gradient.startPoint = CGPointMake(0, 1);
//渐变到右上角结束
gradient.endPoint = CGPointMake(1, 0);
5、type
/* The kind of gradient that will be drawn. Currently the only allowed
* value is `axial' (the default value). */
@property(copy) NSString *type;
默认值是kCAGradientLayerAxial,表示按像素均匀变化。除了默认值也无其它选项。
三、代码
UIView *colorView = [[UIView alloc] init];
colorView.frame = CGRectMake(0, 0, 200, 200);
colorView.center = CGPointMake(375/2.0, 667/2.0-100);
[self.view addSubview:colorView];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = colorView.bounds;
gradient.colors = @[(id)[UIColor blackColor].CGColor,(id)[UIColor whiteColor].CGColor];
gradient.startPoint = CGPointMake(0, 1);
gradient.endPoint = CGPointMake(1, 0);
// gradient.locations = @[@(0.5f), @(1.0f)];
[colorView.layer addSublayer:gradient];
这代码实现的渐变效果就和上图一样,接下来带大家分析一下locations
的作用。
在上面代码的基础上加上:
gradient.locations = @[@(0.0f), @(1.0f)];
则效果为:
这样的效果和没有加上这句代码的效果是一样的。
同样在上面代码的基础上加上:
gradient.locations = @[@(0.5f), @(1.0f)];
则效果为:
可以发现左下三角形没有渐变,渐变的开始只是在斜对角线的位置然后到(1,0)位置结束。所以
locations
的真实作用是控制渐变发生的位置。