iOS设置渐变色

iOS设置渐变色,第1张

一、背景

最近的需求开发中有需要给一个label的背景色设为渐变色,谷歌了众多答案后,基本都是使用CAGradientLayer 进行设置的,具体方法可以自行搜索,有很多很详细的文章。但是,这种设置有一个问题,那就是这种方法设置渐变色,本质是对layer的设置,如果是对button这种内部层级比较多得控件,那是比较好处理,如果是label这种层级比较单一的控件,会发现,设置以后并不会生效,如果强行将此layer插入到最上层,那么label上的text就不会显示出来了,这显然不是我们想要的效果。

二、神奇的colorWithPatternImage
+ (UIColor *)colorWithPatternImage:(UIImage *)image;

这个方法可以直接通过改变view.backgroundColor的值,来给view设置你想要的任何背景,甚至是一张图片,但是他也有个问题,如果设置图片为背景色,不同的图片大小,会占用不同的内存,所以需要慎用。于是联想起之前的CAGradientLayer 我采取了如下方案。

三、给View的backgroundColor的方法

给UIColor添加一个分类,就是设置我们需要的设置渐变色的方法

//
//  UIColor+Gradient.h

#import 

typedef NS_ENUM(NSInteger, GradientColorDirection) {
    GradientColorDirectionLevel,//水平渐变
    GradientColorDirectionVertical,//竖直渐变
    GradientColorDirectionDownDiagonalLine,//向上对角线渐变
    GradientColorDirectionUpwardDiagonalLine,//向下对角线渐变
};

@interface UIColor (Gradient)

/// 设置渐变色
/// @param size 需要渐变的大小
/// @param direction 渐变的方向
/// @param startcolor 渐变的开始颜色
/// @param endColor 渐变的结束颜色
+ (instancetype)gradientColorWithSize:(CGSize)size
                            direction:(GradientColorDirection)direction
                           startColor:(UIColor *)startcolor
                             endColor:(UIColor *)endColor;

@end
//
//  UIColor+Gradient.m

#import "UIColor+Gradient.h"

@implementation UIColor (Gradient)

+ (instancetype)gradientColorWithSize:(CGSize)size
                            direction:(GradientColorDirection)direction
                           startColor:(UIColor *)startcolor
                             endColor:(UIColor *)endColor {
    
    if (CGSizeEqualToSize(size, CGSizeZero) || !startcolor || !endColor) {
        return nil;
    }
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = CGRectMake(0, 0, size.width, size.height);
    
    CGPoint startPoint = CGPointMake(0.0, 0.0);
    if (direction == GradientColorDirectionUpwardDiagonalLine) {
        startPoint = CGPointMake(0.0, 1.0);
    }
    
    CGPoint endPoint = CGPointMake(0.0, 0.0);
    switch (direction) {
        case GradientColorDirectionVertical:
            endPoint = CGPointMake(0.0, 1.0);
            break;
        case GradientColorDirectionDownDiagonalLine:
            endPoint = CGPointMake(1.0, 1.0);
            break;
        case GradientColorDirectionUpwardDiagonalLine:
            endPoint = CGPointMake(1.0, 0.0);
            break;
        default:
            endPoint = CGPointMake(1.0, 0.0);
            break;
    }
    gradientLayer.startPoint = startPoint;
    gradientLayer.endPoint = endPoint;
    
    gradientLayer.colors = @[(__bridge id)startcolor.CGColor, (__bridge id)endColor.CGColor];
    UIGraphicsBeginImageContext(size);
    [gradientLayer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage*image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return [UIColor colorWithPatternImage:image];
}

@end

我们用了个非常取巧的方法给所需的View添加了一个可以设置渐变色的方法,因为本质上是layer的绘制,所以并不会很吃内存。
使用的话:

UILabel *label = UILabel.alloc.init;
    label.backgroundColor = [UIColor gradientColorWithSize:label.frame.size
                                                 direction:GradientColorDirectionLevel
                                                startColor:[UIColor colorWithRed:176.0 green:224.0 blue:230.0 alpha:1]
                                                  endColor:[UIColor colorWithRed:65.0 green:105.0 blue:225.0 alpha:1]];

这里我只是以lable举例,大家可以给任何有backgroundColor的属性设置,但是前提一定要知道他的size,如果是用masonry布局进行计算的话,可能就需要用其他更取巧的方式了。

四、总结

工作中总会遇到奇奇怪怪的问题,所以籍此来记录一下,希望广大开发者能少走些弯路。
转载请注明出处。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/994604.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-21
下一篇 2022-05-21

发表评论

登录后才能评论

评论列表(0条)

保存