美文网首页
OC: CALayer和AutoLayout的实现

OC: CALayer和AutoLayout的实现

作者: 一欧Yiou | 来源:发表于2018-07-30 14:18 被阅读123次

前言

大家都知道 UIView支持AutoLayout,而CALayer不可以。这是因为UIView负责事件响应、布局信息存储等,而CALayer主要负责页面内容展示。UIViewCALayer的关系,颇有一点“我负责赚钱养家,你负责貌美如花”的感觉。关于它们更全面的比较,可以参考详解CALayer 和 UIView的区别和联系
但是,有时候使用CALayer的时候,需要根据父视图、获取依赖其它视图布局。比如下图所示,根据UILabel文本的长度,动态调整放在它下面的渐变背景CAShapeLayer。那我们该如何实现呢?

背景渐变色的UILable.png

实现方案

传统方法

通常的做法是在viewDidLayoutSubviews的方面里面,根据依赖的视图来调整CALayerframe

- (void)viewDidLayoutSubviews { 
    [super viewDidLayoutSubviews]; 

    [self.testLabel sizeToFit]; 
    self.testLabel.center = self.view.center; 

    self.gradientLayer.cornerRadius = self.testLabel.frame.size.height/2; 
    CGFloat margin = 10;//gradientLayer左右需要有边距 
    CGRect frame = self.testLabel.frame; 
    frame.origin.x -= margin; frame.size.width += margin*2; 
    self.gradientLayer.frame = frame; 
}

该方案的缺点:

在OC里面因为控件的使用范围已经跨方法,需要用一个属性来引用它。
代码分散,不好管理。
新方案一

每个UIView底层都有一个CALayer,并且UIView有一个API+ (Class)layerClass,允许我们自定义CALayer的类。那我们就可以自定义一个UILabel,重写+ (Class)layerClass方法返回CAGradientLayer。我们只需要对UILabel进行约束,就会映射到它自身的CALayer

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

- (void)layoutSubviews { 
    [super layoutSubviews]; 

    CAGradientLayer *gradientLayer = (CAGradientLayer *)self.layer; 
    gradientLayer.colors = @[(id)[[UIColor alloc] initWithRed:16/255.0 green:175/255.0 blue:211/255.0 alpha:1].CGColor, (id)[[UIColor alloc] initWithRed:33/255.0 green:94/255.0 blue:147/255.0 alpha:1].CGColor]; 
    gradientLayer.locations = @[@(0), @(1)]; 
    gradientLayer.startPoint = CGPointMake(0, 0); 
    gradientLayer.endPoint = CGPointMake(1, 0); 
    self.layer.cornerRadius = self.bounds.size.height/2.0; 
} 
@end
优点&缺点

优点:只要封装好UILabel,有类似的需求,直接拿来用就是了。
缺点:就是因为使用前要自定义一个类,不可能对所有类似要求的控件子类化。有时候只是一个小需求,对一个小控件有类似需求。那么就可以采用第二个方案。

新方案二

通过block回调UIViewlayoutSubviews,这样就可以很灵活的布局CALayer了。
首先新建一个UIView的分类:

@implementation UIView (LayoutSubviewsCallback) 

+ (void)load { 
    Method originalMethod = class_getInstanceMethod(self, @selector(layoutSubviews)); 
    Method newMethod = class_getInstanceMethod(self, @selector(jx_layoutSubviews));
    method_exchangeImplementations(originalMethod, newMethod); 
} 

- (void)jx_layoutSubviews { 
    [self jx_layoutSubviews]; 
    !self.layoutSubviewsCallback ?: self.layoutSubviewsCallback(self); 
} 

- (void)setLayoutSubviewsCallback:(void (^)(UIView *))layoutSubviewsCallback {
    objc_setAssociatedObject(self, "layoutSubviewsCallback", layoutSubviewsCallback, OBJC_ASSOCIATION_RETAIN); 
} 

- (void (^)(UIView *))layoutSubviewsCallback { 
    return objc_getAssociatedObject(self, "layoutSubviewsCallback"); 
} 

@end
外部使用:
    CAGradientLayer *gradientLayer = [CAGradientLayer layer]; 
    gradientLayer.colors = @[(id)[[UIColor alloc] initWithRed:16/255.0 green:175/255.0 blue:211/255.0 alpha:1].CGColor, (id)[[UIColor alloc] initWithRed:33/255.0 green:94/255.0 blue:147/255.0 alpha:1].CGColor]; 
    gradientLayer.locations = @[@(0), @(1)]; 
    gradientLayer.startPoint = CGPointMake(0, 0); 
    gradientLayer.endPoint = CGPointMake(1, 0); 
    [self.view.layer addSublayer:gradientLayer]; 
    self.testLabel.layoutSubviewsCallback = ^(UIView *view) { 
        gradientLayer.frame = view.frame; 
        gradientLayer.cornerRadius = view.bounds.size.height/2.0; 
    };

相关文章

  • OC: CALayer和AutoLayout的实现

    前言 大家都知道 UIView支持AutoLayout,而CALayer不可以。这是因为UIView负责事件响应、...

  • Layer动画的停止与恢复

    CALayer和CAAnimation都实现了CAMediaTiming 协议,可以通过CALayer 中实现的协...

  • CALayer 动画控制

    CALayer和CAAnimation都实现了CAMediaTiming 协议,可以通过CALayer实现协议中的...

  • swfit常用第三方库

    1. 布局框架 SnapKit(类似于oc的Masonry) SBLayout(类似于oc的AutoLayout)...

  • 优雅的实现CALayer的"AutoLayout&qu

    前言 大家都知道UIView支持AutoLayout,而CALayer不可以。这是因为UIView负责事件响应、布...

  • Autolayout

    有趣的Autolayout示例-Masonry实现 有趣的Autolayout示例2-Masonry实现 有趣的A...

  • 05-UITableView第1天

    代码实现Autolayout

  • 0707-AutoLayout

    AutoLayout 代码实现Autolayout的步骤 利用NSLayoutConstraint类创建具体的约束...

  • Masonry

    有趣的Autolayout示例-Masonry实现有趣的Autolayout示例2-Masonry实现有趣的Aut...

  • 在 AutoLayout 中使用 CALayer

    使用 AutoLayout 时,view 不会立刻布局,而如果此时恰好需要给 view 添加 layer,laye...

网友评论

      本文标题:OC: CALayer和AutoLayout的实现

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