iOS中view的背景渐变色和特定圆角设置笔记

1

渐变色

效果如图所示:王者荣耀的背景色和服务40人|评分5.0的背景色都是渐变色

最方便的做法就是让UI切个背景图,拉伸展示到Label的底部就可以了

接下来使用的方法是常规方法

在UITableViewCell.m中蓝色渐变的Label对应的属性是gradeLab黄色渐变色的属性对应的是serverLab都是继承于@interface YZLabelView : UIView

@property(nonatomic,strong)YZLabelView * gradeLab;
@property(nonatomic,strong)YZLabelView * serverLab;

属性的懒加载

-(YZLabelView *)gradeLab {
    if (_gradeLab == nil) {
        _gradeLab = [[YZLabelView alloc] initWithcolors:@[
            (__bridge id)UIColorHex(#0E76F1).CGColor,
            (__bridge id)UIColorHex(#3EB1FF).CGColor
        ]];
    }
    return _gradeLab;
}

- (YZLabelView *)serverLab {
    if (_serverLab == nil) {
        _serverLab = [[YZLabelView alloc] initWithcolors:@[
            (__bridge id)UIColorHex(#E0AC3B).CGColor,
            (__bridge id)UIColorHex(#E8C36A).CGColor
        ]];
    }
    return _serverLab;
}

UITableViewCell.m中的init方法对控件进行图层添加和通过masonry对图层的约束进行设置,这里的约束实际上是为了获取到left和top值,而width和height是需要根据实际的label的内容来自适应宽度,这么做的弊端就是在以YZLabelView为标准,作为masonry适配的时候,后续的控件位置不能自适应变化(慎用)

        [_rightZoneView addSubview:self.gradeLab];
        [self.gradeLab mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.genderImageView.mas_right).offset(4.5);
            make.centerY.equalTo(self.genderImageView.mas_centerY);
            make.width.equalTo(@50);
            make.height.equalTo(@15);
        }];
        

        [_rightZoneView addSubview:self.serverLab];
        [self.serverLab mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(self.gradeLab.mas_right).offset(4);
            make.height.equalTo(@15);
            make.width.greaterThanOrEqualTo(@110);
            make.centerY.equalTo(self.genderImageView.mas_centerY);
        }];

UITableViewCell.m中的setModel方法

    self.gradeLab.titleStr = @"王者荣耀";
    self.serverLab.titleStr = @"服务40人 | 评分5.0";

接下来看YZLabelView中的具体实现内容

.h文件中的属性和方法
@property(nonatomic,strong)NSString * titleStr;
- (instancetype)initWithcolors:(NSArray *)array;
.m中的属性和方法

@property(nonatomic,strong)UILabel * titleLab;
@property(nonatomic,strong)NSMutableArray * ararayC;

- (instancetype)initWithcolors:(NSArray *)array
{
    self = [super init];
    if (self) {
        self.backgroundColor = [UIColor clearColor];
        self.ararayC = [NSMutableArray arrayWithArray:array];
        [self addSubview:self.titleLab];
    }
    return self;
}

- (void)setTitleStr:(NSString *)titleStr {
    _titleStr = titleStr;
    UILabel * label  = [[UILabel alloc] init];
    label.text = titleStr;
    CGSize size = [label.text sizeWithAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont systemFontOfSize:10],NSFontAttributeName , nil]];
    if (size.width > self.frame.size.width) {
        [self setFrame:CGRectMake(0, 0, size.width + 2, 15)];
        [self setyzLayerColors:self.ararayC bounds:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        self.titleLab.frame = CGRectMake(1, 0, self.frame.size.width - 2, self.frame.size.height);
    }else {
        [self setyzLayerColors:self.ararayC bounds:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
        self.titleLab.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
    }
    [self bringSubviewToFront:self.titleLab];
    self.titleLab.text = titleStr;
}

-(UILabel *)titleLab {
    if (_titleLab == nil) {
        _titleLab = [[UILabel alloc] init];
        _titleLab.textAlignment = NSTextAlignmentCenter;
        _titleLab.font = [UIFont systemFontOfSize:10];
        _titleLab.textColor = UIColorHex(#FFFFFF);
        _titleLab.adjustsFontSizeToFitWidth = YES;
    }
    return _titleLab;
}

其中setyzLayerColors:bounds:方法来自UIView的一个extension,为View添加渐变的背景View

-(void)setyzLayerColors:(NSArray *)array bounds:(CGRect)bounds{
    CAGradientLayer * layer = [[CAGradientLayer alloc] init];
    layer.colors = array;
    layer.frame = bounds;
    layer.startPoint = CGPointMake(0, 0);
    layer.endPoint = CGPointMake(1, 0);
    layer.colors = array;
    layer.locations = @[@(0.0),@(1.0f)];
    layer.cornerRadius = 3;
    [self.layer addSublayer:layer];
}

设置一半的圆角

圆角设置用的masklayer ,注意这里的mask操作,是直接将maskLayer赋值给_liveBgView.layer.mask而不是使用addsubLayer

        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:_liveBgView.bounds byRoundingCorners:UIRectCornerTopRight | UIRectCornerBottomRight cornerRadii:CGSizeMake(6.5,6.5)];
        CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
        maskLayer.frame = _liveBgView.bounds;
        maskLayer.path = maskPath.CGPath;
        _liveBgView.layer.mask = maskLayer;

一半圆角和背景渐变色组合使用效果

见图片上的蓝色渐变,右上角和右下角切圆角的效果实现

2

源码实现

-(UIView *)liveBgView {
    if (_liveBgView == nil) {
        _liveBgView = [[UIView alloc] initWithFrame:CGRectMake(15, 25, 32, 13)];
        
        UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:_liveBgView.bounds byRoundingCorners:UIRectCornerTopRight | UIRectCornerBottomRight cornerRadii:CGSizeMake(6.5,6.5)];
        CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
        maskLayer.frame = _liveBgView.bounds;
        maskLayer.path = maskPath.CGPath;
        _liveBgView.layer.mask = maskLayer;
        
        CAGradientLayer * layer = [[CAGradientLayer alloc] init];
        layer.colors = @[
            (__bridge id)UIColorHex(#0E76F1).CGColor,
            (__bridge id)UIColorHex(#3EB1FF).CGColor,
        ];
        layer.frame = CGRectMake(0, 0, 32, 13);
        layer.startPoint = CGPointMake(0, 0);
        layer.endPoint = CGPointMake(1, 0);
        layer.locations = @[@(0.0),@(1.0f)];
    
        [_liveBgView.layer addSublayer:layer];
    }
    return _liveBgView;
}