iOS 基于CALayer实现颜色渐变

2020-04-20  本文已影响0人  邓布利多教授

此工具是基于CALayer的子类CAGradientLayer实现 水平颜色渐变垂直颜色渐变
实现方法简单易懂,就是直接传入十六进制色值,可以按照UI需求自行重新编写代码结构。

明人不说暗话,先上代码
#import <Foundation/Foundation.h>

NS_ASSUME_NONNULL_BEGIN

@interface LYColorTools : NSObject

/**
 垂直渐变
 */
+(CAGradientLayer *)vGradientLayerWithFrame:(CGRect)frame;

/**
 水平渐变
 */
+(CAGradientLayer *)hGradientLayerWithFrame:(CGRect)frame;

/**
 移除指定layer
 */
+(void)removeSublayerWithView:(UIView *)view layerClass:(Class)layerClass;

/**
 十六进制颜色转换
 */
+(UIColor *)colorWithHexString:(NSString *)color;

@end
#import "LYColorTools.h"

@implementation LYColorTools

+(CAGradientLayer *)vGradientLayerWithFrame:(CGRect)frame{
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[(__bridge id)[self colorWithHexString:@"#ff4f00"].CGColor,
                             (__bridge id)[self colorWithHexString:@"#ff8c00"].CGColor];
    gradientLayer.locations = @[@0.1, @1.0];
    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(0, 1.0);
    gradientLayer.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
    return gradientLayer;
    
}

+(CAGradientLayer *)hGradientLayerWithFrame:(CGRect)frame{
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.colors = @[(__bridge id)[self colorWithHexString:@"#ff4f00"].CGColor,
                             (__bridge id)[self colorWithHexString:@"#ff8c00"].CGColor];
    gradientLayer.locations = @[@0.1, @1.0];
    gradientLayer.startPoint = CGPointMake(0, 1.0);
    gradientLayer.endPoint = CGPointMake(1.0, 1.0);
    gradientLayer.frame = CGRectMake(0, 0, frame.size.width, frame.size.height);
    return gradientLayer;
    
}

+(void)removeSublayerWithView:(UIView *)view layerClass:(Class)layerClass{
    
    NSArray<CALayer *> *subLayers = view.layer.sublayers;
    NSArray<CALayer *> *removedLayers = [subLayers filteredArrayUsingPredicate:[NSPredicate predicateWithBlock:^BOOL(id  _Nullable evaluatedObject, NSDictionary<NSString *,id> * _Nullable bindings) {
        return [evaluatedObject isKindOfClass:layerClass];
    }]];
    [removedLayers enumerateObjectsUsingBlock:^(CALayer * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        [obj removeFromSuperlayer];
    }];
    
}

+(UIColor *)colorWithHexString:(NSString *)color{
    
    NSString *cString = [[color stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] uppercaseString];
    
    // String should be 6 or 8 characters
    if ([cString length] < 6) {
        return [UIColor clearColor];
    }
    // 判断前缀
    if ([cString hasPrefix:@"0X"])
        cString = [cString substringFromIndex:2];
    if ([cString hasPrefix:@"#"])
        cString = [cString substringFromIndex:1];
    if ([cString length] != 6)
        return [UIColor clearColor];
    // 从六位数值中找到RGB对应的位数并转换
    NSRange range;
    range.location = 0;
    range.length = 2;
    //R、G、B
    NSString *rString = [cString substringWithRange:range];
    range.location = 2;
    NSString *gString = [cString substringWithRange:range];
    range.location = 4;
    NSString *bString = [cString substringWithRange:range];
    // Scan values
    unsigned int r, g, b;
    [[NSScanner scannerWithString:rString] scanHexInt:&r];
    [[NSScanner scannerWithString:gString] scanHexInt:&g];
    [[NSScanner scannerWithString:bString] scanHexInt:&b];
    
    return [UIColor colorWithRed:((float) r / 255.0f) green:((float) g / 255.0f) blue:((float) b / 255.0f) alpha:1.0f];
    
}

@end

说明

如果渐变颜色,不止 开始结束 两种颜色,需要修改gradientLayer.colors传入的参数,对应的,还需要修改gradientLayer.locations传入的参数,因为两个属性的类型为数组,且元素个数必须要 一致。比如像下面的两段代码:

gradientLayer.colors = @[(__bridge id)[self colorWithHexString:@"#ff4f00"].CGColor,
                             (__bridge id)[self colorWithHexString:@"#ff8c00"].CGColor];
gradientLayer.locations = @[@0.1, @1.0];

gradientLayer.colors = @[(__bridge id)[self colorWithHexString:@"#528bfd"].CGColor,
                             (__bridge id)[self colorWithHexString:@"#35b1ff"].CGColor,
                             (__bridge id)[self colorWithHexString:@"#3cb7fd"].CGColor];
gradientLayer.locations = @[@0.1, @0.7, @1.0];

调用

我的需求是:
在订单列表中,当选中订单个数大于0,提交按钮可以点击;
当选中订单个数等于0,提交按钮不可以点击。
两种UI效果如下:

selected.png normal.png
//可以编辑
if (bol) {
    [_bSubmit.layer insertSublayer:[LYColorTools hGradientLayerWithFrame:_bSubmit.frame] atIndex:0];
    _bSubmit.enabled = YES;
}
//不可以编辑
else{
    [LYColorTools removeSublayerWithView:_bSubmit layerClass:[CAGradientLayer class]];
    _bSubmit.enabled = NO;
}

上一篇 下一篇

猜你喜欢

热点阅读