优雅的实现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地址喜欢就点颗❤️

推荐阅读更多精彩内容

  • 1 CALayer IOS SDK详解之CALayer(一) http://doc.okbase.net/Hell...
    Kevin_Junbaozi阅读 1,627评论 2 12
  • 李姐是我一个朋友,虽然年近四十,但是由于保养的好,看起来也不过三十岁左右。和李姐结识,是一场关爱老人的活动,我和李...
    亦念亦安阅读 64评论 0 0
  • 你以为你是对的,其实你是错的。 你以为这是假的,其实这是真的。 你以为现在是今天,其实今天是永远。 你以为四月一日...
    桂岩书斋阅读 42评论 0 1
  • 今天义宁来我家玩,我们嗯,自己折腾折腾吃了饭之后悲催的刷了碗之后。一宁坐在沙发上开始看《喜羊羊与灰太狼》。我默默的...
    茶茶茶_荼靡阅读 33评论 0 1
  • 当前,市面上有上千万个微信公众号,只要是做微信营销的不论是企业还是个人都想借助微信来做宣传推广,所以不论是对企业还...
    零叫兽阅读 1,403评论 0 1