產品需求如下：
在其背景色上繪制顏色漸變,從左到右的背景漸變效果。
我的思路：
這個布局很簡單，我主要說下背景的漸變效果如何實現的即可。首先我需要一個bgView用來承載布局。這個背景漸變顏色是從左到右的，所以我還需要使用CAGradientLayer來實現漸變效果，然后將其添加到bgView.layer上面。
[_bgView.layer addSublayer:self.bottomMaskLayer];
代碼塊如下
-(UIView *)bgView{
if (!_bgView) {
_bgView = [[UIView alloc] init];
_bgView.layer.masksToBounds = YES;
_bgView.layer.cornerRadius = 8.0;
_bgView.contentMode = UIViewContentModeScaleAspectFill;
_bgView.clipsToBounds = YES;
[_bgView.layer addSublayer:self.bottomMaskLayer];
}
return _bgView;
}
- (CAGradientLayer *)bottomMaskLayer {
if (!_bottomMaskLayer) {
_bottomMaskLayer = [CAGradientLayer layer];
_bottomMaskLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithHexString:@"#5C9BEC"]CGColor],(id)[[UIColor colorWithHexString:@"#0E65D7"]CGColor], nil];
_bottomMaskLayer.startPoint = CGPointMake(0, .5);
_bottomMaskLayer.endPoint = CGPointMake(1, .5);
// _bottomMaskLayer.locations = @[@(0.15f),@(0.9f)];
_bottomMaskLayer.borderWidth = 0.0;
}
return _bottomMaskLayer;
}
- (void)addSubViews{
[self.contentView addSubview:self.bgView];
}
- (void)setConstraints{
[self.bgView mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.mas_equalTo(self.contentView).offset(15);
make.trailing.mas_equalTo(self.contentView).offset(-15);
make.top.mas_equalTo(self.contentView);
make.bottom.mas_equalTo(-10);
}];
}
- (void)setCellWithModel:(SCDeviceSeriesModel *)obj{
self.seriesNameLabel.text = obj.series_name;
self.seriesValueLabel.text = [NSString stringWithFormat:@"%@%@",obj.series_value,obj.series_unit];
self.bottomMaskLayer.frame = CGRectMake(0, 0, kSCREEN_WIDTH-30, 86);
}
以上就是針對View漸變效果整理的代碼。下面簡單說下CAGradientLayer。因為主要用的就是這個來實現的。
繼承關系：
因為CAGradientLayer繼承與CALayer，所以CAGradientLayer可以使用其父類CALayer所有開放的屬性
作用：
1，CAGradientLayer用于處理漸變色的層結構
2，CAGradientLayer的漸變色可以做隱式動畫
3，大部分情況下，CAGradientLayer時和CAShapeLayer配合使用的。
4，CAGradientLayer可以用作PNG的遮罩效果
關于CAGradientLayer的坐標系統
為什么要提到CAGradientLayer的坐標系統呢？因為漸變色的作用范圍，變化梯度的方向，顏色變換的作用點都和CAGradientLayer的坐標系統有關
根據上圖的坐標，設定好起點和終點，漸變色的方向就會根據起點指向終點的方向來漸變了。
1，CAGradientLayer的坐標系統是從（0，0）到（1，1）繪制的矩形
2，CAGradientLayer的frame值的size不為正方形的話，坐標系統會被拉伸
3，CAGradientLayer的startPoint和endPoint會直接決定顏色的繪制方向
4，CAGradientLayer的顏色分割點時以0到1的比例來計算的
設置漸變顏色
設置漸變的顏色，這是個數組，可以添加多個顏色
/* The array of CGColorRef objects defining the color of each gradient
* stop. Defaults to nil. Animatable. */
@property(nullable, copy) NSArray *colors;
例如：
//設定顏色組
self.gradientLayer.colors = @[(__bridge id)[UIColor clearColor].CGColor,
(__bridge id)[UIColor purpleColor].CGColor];
_bottomMaskLayer.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithHexString:@"#5C9BEC"]CGColor],(id)[[UIColor colorWithHexString:@"#0E65D7"]CGColor], nil];
重要??
顏色屬于CGColorRef類，所以必須加CGColor，而且前面還要加(id)。
設置顏色分割點
/* 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，會平均分布。locations的真實作用是控制漸變發生的位置。
//設定顏色分割點
self.gradientLayer.locations = @[@(0.5f) ,@(1.0f)];
設置漸變的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);
type
默認值是kCAGradientLayerAxial，表示按像素均勻變化。除了默認值也無其它選項。
/* The kind of gradient that will be drawn. Currently the only allowed
* value is `axial' (the default value). */
@property(copy) NSString *type;
