美文网首页
iOS 基于CALayer实现颜色渐变

iOS 基于CALayer实现颜色渐变

作者: 邓布利多教授 | 来源:发表于2020-04-20 16:51 被阅读0次

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

明人不说暗话,先上代码
  • .h文件
#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
  • .m
#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;
}

相关文章

  • iOS 基于CALayer实现颜色渐变

    此工具是基于CALayer的子类CAGradientLayer实现 水平颜色渐变 或 垂直颜色渐变实现方法简单易懂...

  • CAGradientLayer的使用

    CAGradientLayer是CALayer的子类,它经常用来实现颜色渐变,可以翻译为:渐变图层;gradien...

  • iOS实现颜色渐变

    我们经常会在UIView添加渐变的背景色。虽然找一张渐变颜色的背景图很方便,但是图片是要占用资源的,同时文件也会变...

  • iOS渐变颜色实现

    在iOS中,每一个可见的控件都有一个layer层。该层控制着控件的绘制和重绘。近期在YY交友项目中有要求使用一个渐...

  • CAGradientLayer

    CAGradientLayer(渐变层) 父类是CALayer 应用:需要颜色渐变效果的场景 CAGradient...

  • iOS 绘制颜色渐变圆环 --- 值得一看

    iOS 绘制颜色渐变圆环 本文主要介绍一种绘制颜色渐变的进度圆环. 先上效果图: 实现思路: CAShapeLay...

  • 简易的iOS导航栏颜色渐变方案

    简易的iOS导航栏颜色渐变方案 简易的iOS导航栏颜色渐变方案

  • iOS-CALayer之渐变图层

    CAGradientLayer 渐变图层 CALayer子类之一 渐变图层是根据colors数组中的颜色在图层中...

  • IOS 实现颜色渐变扩展

    //绘制渐变色颜色的方法 + (CAGradientLayer*)setGradualChangingColor:...

  • iOS 绘制渐变·实例篇

    级别: ★★☆☆☆标签:「iOS颜色渐变」「CAGradientLayer渐变」「CAGradientLayer」...

网友评论

      本文标题:iOS 基于CALayer实现颜色渐变

      本文链接:https://www.haomeiwen.com/subject/tmsdihtx.html