版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2017.08.07 |
前言
很多时候视图的颜色并不是单一的，需要渐变或者更炫的色彩，这里我就说一下控件渐变色的实现方法。希望能帮助大家。
功能要求
利用CAGradientLayer控件渐变色的实现。
功能实现
1. 重要的类
这里实现渐变主要是利用类CAGradientLayer实现，下面先看一下这个类的API文档。
#import
#import
NS_ASSUME_NONNULL_BEGIN
CA_CLASS_AVAILABLE (10.6, 3.0, 9.0, 2.0)
@interface CAGradientLayer : CALayer
/* The array of CGColorRef objects defining the color of each gradient
* stop. Defaults to nil. Animatable. */
//定义每个渐变颜色的CGColorRef对象数组，默认为nil，可动画。
@property(nullable, copy) NSArray *colors;
/* 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. */
/**
* 一个NSNumber对象的可选数组，将每个渐变停止的位置定义为[0,1]范围内的一个值。 值必须单调递增。 如果给出一个零数组，则假定停止点在[0,1]范围内均匀分布。 渲染时，在插值之前将颜色映射到输出颜色空间，默认为nil，可动画。
*/
@property(nullable, copy) NSArray *locations;
/* 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. */
//当绘制到层的坐标空间中时，渐变的起点和终点。 起始点对应于第一个梯度停止，终点到最后一个梯度停止。 两个点在单位坐标空间中定义，然后在绘制时映射到图层的边界矩形。 （例如[0,0]是图层的左下角，[1,1]是右上角。）默认值分别为[.5,0]和[.5,1]。 两者都是动画的。
@property CGPoint startPoint;
@property CGPoint endPoint;
/* The kind of gradient that will be drawn. Currently the only allowed
* value is `axial' (the default value). */
//将绘制的渐变类型。 目前唯一允许的值为“轴”（默认值）
@property(copy) NSString *type;
@end
/** `type' values. **/
CA_EXTERN NSString * const kCAGradientLayerAxial
CA_AVAILABLE_STARTING (10.6, 3.0, 9.0, 2.0);
NS_ASSUME_NONNULL_END
这里面简单介绍几个属性：
-
colors：颜色数组，存储的是几个渐变的颜色。 -
locations： NSNumber数据类型，存储的是每一个渐变色停止时的位置。 -
startPoint： 起始点，默认值为(0.5, 0)，起始点对应于第一个梯度停止。 -
endPoint: 终止点，同起始点一样，左下角为(0, 0)，右上角为(1.0, 0)，默认值为(0.5, 1)，终点到最后一个梯度停止。它们两个的存在可以控制是横着渲染还是竖着渲染，下面我会给出横竖渲染时的不同效果。
2. 代码实现
先看一下代码。
#import "JJGradientColorVC.h"
@interface JJGradientColorVC ()
@end
@implementation JJGradientColorVC
#pragma mark - OVerride Base Function
- (void)viewDidLoad
{
[super viewDidLoad];
self.title = @"渐变色";
self.view.backgroundColor = [UIColor whiteColor];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = @[(__bridge id)[UIColor blueColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor magentaColor].CGColor,
(__bridge id)[UIColor darkGrayColor].CGColor
];
gradientLayer.locations = @[@0.2, @0.4, @0.6, @0.9];
gradientLayer.startPoint = CGPointMake(0.0, 0.0);
gradientLayer.endPoint = CGPointMake(1.0, 0.0);
gradientLayer.frame = CGRectMake(50.0, 200.0, 200.0, 150.0);
[self.view.layer addSublayer:gradientLayer];
}
@end
这里我碰到个坑，一开始几个渐变色我是按照下面这么设置的，但是效果总是渲染不出来。
gradientLayer.colors = @[[UIColor blueColor],
[UIColor greenColor],
[UIColor magentaColor],
[UIColor darkGrayColor]
];
后来查了点资料，找到了原因，按照下面进行了修改。
gradientLayer.colors = @[(__bridge id)[UIColor blueColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor magentaColor].CGColor,
(__bridge id)[UIColor darkGrayColor].CGColor
];
这样就渲染出来了。
上面是横着方向的渲染，我们可以修改gradientLayer.endPoint的值，让其x不变，变化y，就成为了竖着方向渲染。
gradientLayer.endPoint = CGPointMake(0.0, 1.0);
具体效果图后面会给出。
功能效果
下面我们就看一下功能效果。
x方向渐变
y方向渐变
后记
未完，待续~~~~
秋意浓