免费开源的iOS开发学习平台

CALayer介绍:1-CALayer简介

在学习iOS的动画之前,我们首先需要了解视图UIView能够显示样式的原理。其实,在屏幕上展示出来的视图样式,其实是由UIView对象中的layer属性所控制的。

CALayer简介

视图UIView类中有一个重要的属性--layer,类型是CALayer类,这个属性是负责视图外观样式的。我们知道,当我们创建一个视图类时,除了能够在一块矩形区域内显示样式外,还能够与用户进行交互,这是因为UIView类继承自UIResponder类。

@interface UIView : UIResponder <NSCoding, UIAppearance, UIAppearanceContainer, UIDynamicItem, UITraitEnvironment, UICoordinateSpace, UIFocusItem, CALayerDelegate>
@property(nonatomic,readonly,strong)  CALayer  *layer;  

CALayer类也可以认为是不能响应用户交互的视图,因为其能够直接在屏幕上进行显示。当我们在开发过程中,假如仅仅希望在界面上定制一块矩形区域的样式而不需要与用户进行交互时,我们完全可以创建一个CALayer的对象,这样做的效率要比创建一个UIView对象要高。

CALayer的常用属性

当我们设置UIView的一些外观属性时,例如:背景颜色、大小、透明度等等,其本质上是修改的UIView对象中layer的属性,只不过苹果官方为了简化代码,从而进行了一些封装操作。因此,我们熟知的一些UIView的外观属性,其实在CALayer类中都有定义。

  • 实例化方法
+ (instancetype)layer;
  • frame:该layer相对于父layer的位置以及大小
@property CGRect frame;
  • bounds:该layer控制的矩形区域的大小
@property CGRect bounds;
  • transform:形变属性,可以用于改变layer的大小、位置、角度等
@property CATransform3D transform;
  • 整体样式相关的属性

@property(nullable) CGColorRef backgroundColor;//背景颜色
@property(nullable, strong) id contents;//layer的内容,通常为一张图片
@property CGColorRef borderColor;//边框颜色(CGColorRef类型)
@property CGFloat borderWidth;//边框宽度
  • 边角与阴影相关的属性

@property CGFloat cornerRadius;//圆角半径
@property CGColorRef shadowColor;//阴影颜色
@property float shadowOpacity;//阴影不透明(0.0 ~ 1.0)
@property CGSize shadowOffset;//阴影偏移位置
  • layer层次关系控制的方法与属性
@property(nullable, copy) NSArray<CALayer *> *sublayers; //获得一个父layer中所有的子layer
- (void)addSublayer:(CALayer *)layer; //添加一个子layer到父layer上
  • 向layer对象添加一个动画对象
- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;

示例代码

我们通过一个示例来添加一个CALayer对象到控制器View的layer上,同时对自定义CALayer对象的样式进行一些定制。

- (void)viewDidLoad {
    [super viewDidLoad];
    
    CALayer *subLayer = [CALayer layer];
    subLayer.frame = CGRectMake(140, 100, 100, 100);
    subLayer.backgroundColor = [UIColor yellowColor].CGColor;
    subLayer.borderColor = [UIColor redColor].CGColor;
    subLayer.borderWidth = 4.0;
    subLayer.cornerRadius = 2.0;
    
    [self.view.layer addSublayer:subLayer];
}

运行结果。

https://github.com/99ios/14.3.1