优雅的实现CALayer的"AutoLayout"的两种方案

前言

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

JXLayerAutoLayout-1.png

实现方案

传统方法

通常的做法是在viewDidLayoutSubviews的方面里面，根据依赖的视图来调整CALayer的frame。

- (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回调UIView的layoutSubviews，这样即可以很灵活的布局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;    };

这样就处理了，代码分散，自己设置类的麻烦了。想在哪里使用，就在哪里使用??
下载源码，拖入UIView+LayoutSubviewsCallback.h文件，即可以用了

代码仓库

Github地址喜欢就点颗??