渐变色GradientLayer使用需要注意的问题

一个渐变的背景View:

@interface RXViewHolderGradientLayerView ()

@property (nonatomic, strong) CAGradientLayer *gradientLayer;
@end

@implementation RXViewHolderGradientLayerView

- (void)layoutSubviews {
    [super layoutSubviews];
    if (self.frame.size.width > 0 && self.gradientLayer == nil) {
        NSLog(@"RXViewHolderGradientLayerView updateGradientLayer");
        // 初始化CAGradientlayer对象，使它的大小为UIView的大小
        self.gradientLayer = [CAGradientLayer layer];
        self.gradientLayer.frame = self.bounds;
        // 将CAGradientlayer对象添加在我们要设置背景色的视图的layer层
        [self.layer addSublayer:self.gradientLayer];
        // 设置渐变区域的起始和终止位置（范围为0-1）
        self.gradientLayer.startPoint = CGPointMake(0, 0);
        self.gradientLayer.endPoint = CGPointMake(0, 1);
        // 设置颜色数组
        self.gradientLayer.colors = @[
            (__bridge id)[[UIColor blackColor] colorWithAlphaComponent:0.0].CGColor,
            (__bridge id)[[UIColor blackColor] colorWithAlphaComponent:0.4].CGColor
        ];
        // 设置颜色分割点（范围：0-1）
        self.gradientLayer.locations = @[@(0.0f), @(1.0f)];
    }
}
@end

在VC中如下使用：

@interface RXViewHolderViewController () 
@property (nonatomic, strong) RXViewHolderGradientLayerView *gradientView;
@property (nonatomic, strong) UILabel *desLabel;
@end
@implementation RXViewHolderViewController
#pragma mark - View Life Cycle
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor greenColor];
}
#pragma mark - UI Getter

- (UILabel *)desLabel {
    if (!_desLabel) {
        _desLabel = [UILabel new];
        _desLabel.textColor = [UIColor whiteColor];
        _desLabel.numberOfLines = 1;
        _desLabel.font = [UIFont systemFontOfSize:14];
    }
    return _desLabel;
}
- (RXViewHolderGradientLayerView *)gradientView {
    if (!_gradientView) {
        _gradientView = [RXViewHolderGradientLayerView new];
    }
    return _gradientView;
}
@end

这个时候desLabel，添加的位置不同，会出现不同的效果：

desLabel和gradientView是同级view：

- (void)test1SignlaView {
    [self.view addSubview:self.gradientView];
    [self.gradientView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@200);
        make.left.right.equalTo(@0);
        make.height.equalTo(@(40));
    }];
    
    [self.view addSubview:self.desLabel];
    [self.desLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@220);
        make.left.right.equalTo(@0);
        make.height.equalTo(@(20));
    }];
    self.desLabel.text = @"跟gradientView 同级view";
}

desLabel中字显示比较亮

desLabel是gradientView的子view：

- (void)test2SignlaView {
    [self.view addSubview:self.gradientView];
    [self.gradientView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.equalTo(@200);
        make.left.right.equalTo(@0);
        make.height.equalTo(@(40));
    }];
    [self.gradientView addSubview:self.desLabel];
    [self.desLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.bottom.equalTo(@0);
        make.left.right.equalTo(@0);
        make.height.equalTo(@(20));
    }];
    self.desLabel.text = @"是gradientView 的子view";
}

desLabel中字显示比较暗

这个时候是需要确认是到底是使用什么效果，需要不同的代码。不同的view层级关系。

这里还需要注意的是因为需要添加一个渐变色的背景View，所以最好是给这个背景View单独创建一个View类，在这个View类里面的layoutSubviews里设置浮层(因为需要bounds)。