iOS干货ios_UI程序员

iOS一个方法搞定view渐变色

2017-07-01  本文已影响1957人  水暮竹妖

Demo

AZCategory

使用效果

//包含头文件UIView+Gradient.h

[self.label setGradientBackgroundWithColors:@[[UIColor redColor],[UIColor orangeColor]] locations:nil startPoint:CGPointMake(0, 0) endPoint:CGPointMake(1, 0)];

[self.btn setGradientBackgroundWithColors:@[[UIColor redColor],[UIColor orangeColor]] locations:nil startPoint:CGPointMake(0, 0) endPoint:CGPointMake(1, 0)];

[self.tempView setGradientBackgroundWithColors:@[[UIColor redColor],[UIColor orangeColor]] locations:nil startPoint:CGPointMake(0, 0) endPoint:CGPointMake(1, 0)];

常规方案

说起颜色渐变一般来说有两种实现方式,一是使用CAGradientLayer而是使用Core Graphics的相关方法,具体可参考ios实现颜色渐变的几种方法

问题

CAGradientLayer可以说是实现起来比较方便的一个方案了,但是对于Autolayout来说,我们需要更新CAGradientLayerframe,这就得增加不少代码,而且代码会散布在其他方法中,这就不是很友好了。

优化方案

原理

我们知道UIView显示的内容实际是绘制在CALayer上的,默认情况下创建一个UIView时会创建一个CALayer作为UIViewroot layer,那么如果我们直接把这个root layer替换成CAGradientLayer就能直接实现渐变效果,而且跟随UIViewframe变化。

那么如何替换呢?UIView有个+layerClass类方法,官方描述:

Returns the class used to create the layer for instances of this class.
This method returns the CALayer class object by default. Subclasses can override this method and return a different layer class as needed. For example, if your view uses tiling to display a large scrollable area, you might want to override this method and return the CATiledLayer class.
This method is called only once early in the creation of the view in order to create the corresponding layer object.

大概意思就是系统默认会返回CALayer类,但是如果你重写了这个类方法,那么就会返你return的类,从而创建你需要的layer

在实际实现这个分类的时候发现+layerClass有点类似+load方法,即只要文件在项目中,就会调用该方法,不需要显式包含头文件。

实现

我们创建一个UIView的分类UIView+Gradient,利用runtime添加CAGradientLayer的一些属性以及设置背景色的方法,如下:

//UIView+Gradient.h
@property(nullable, copy) NSArray *colors;
@property(nullable, copy) NSArray<NSNumber *> *locations;
@property CGPoint startPoint;
@property CGPoint endPoint;

+ (UIView *_Nullable)gradientViewWithColors:(NSArray<UIColor *> *_Nullable)colors locations:(NSArray<NSNumber *> *_Nullable)locations startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint;

- (void)setGradientBackgroundWithColors:(NSArray<UIColor *> *_Nullable)colors locations:(NSArray<NSNumber *> *_Nullable)locations startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint;

然后在.m文件中对重写类方法+layerClass以及实现相关设置:


//UIView+Gradient.m

+ (Class)layerClass {
    return [CAGradientLayer class];
}

+ (UIView *)gradientViewWithColors:(NSArray<UIColor *> *)colors locations:(NSArray<NSNumber *> *)locations startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint {
    UIView *view = [[self alloc] init];
    [view setGradientBackgroundWithColors:colors locations:locations startPoint:startPoint endPoint:endPoint];
    return view;
}

- (void)setGradientBackgroundWithColors:(NSArray<UIColor *> *)colors locations:(NSArray<NSNumber *> *)locations startPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint {
    NSMutableArray *colorsM = [NSMutableArray array];
    for (UIColor *color in colors) {
        [colorsM addObject:(__bridge id)color.CGColor];
    }
    self.colors = [colorsM copy];
    self.locations = locations;
    self.startPoint = startPoint;
    self.endPoint = endPoint;
}

然后就能像最开始提到的那样轻松的一句话设置渐变背景色了。

注意事项

// colors优先级高于backgroundColor的View
    UIView
    UIButton 
    UIImageView
    UITextView
    UITextField
    UISlider
    UIStepper
    UISwitch
    UISegmentedControl
   if ([self.layer isKindOfClass:[CAGradientLayer class]]) {
        // do something
    }

否则可能会出现崩溃。

//  UIView+Gradient.m
    @implementation UILabel (Gradient)
    + (Class)layerClass {
     return [CAGradientLayer class];
    }
    @end

_UILabelLayer替换为CAGradientLayer除了colorsbackgroundColor的优先级不同其他还有什么影响暂时不清楚。

上一篇下一篇

猜你喜欢

热点阅读