OC - 21.CALayer核心要点及实例解析

CALayer基础

---

• CALayer是每一个UI控件的核心，一个UI控件之所以能显示可以说是CALayer的功劳
• 每一个UI控件默认都为自己创建一个CALayer对象，通过drawRect方法将内容绘制在图层上，然后再显示出来

• CALayer可以完成很多任务

  • 调整UI控件的外观
  • 执行动画

• CALayer与UIView

  • 二者可以达到相同的显示效果
  • UIView比CALayer多了用户交互功能
  • CALayer更加轻量级，性能更好

• CALayer在系统架构中的位置

  • CALayer位于QuartzCore框架中适用于iOS与Mac OS X
  • 其中的属性类型如：CGImageRef、CGColorRef位于CoreGraphic框架中适用于iOS与Mac OS X
  • 又如：UIImage、UIColor位于UIKit框架中只适用于iOS
  • 系统架构图如下：

  

CALayer的常用属性

---

• frame属性

  • bounds（CGRect），尺寸
  • position（CGPoint），显示在父控件中的位置，以父控件左上角为原点
  • anchorPoint（CGPoint），决定该控件上的哪个点显示在position位置，x，y的取值范围都是0~1，默认为(0.5, 0.5)
  • transform（CATransform3D），形变属性，包括位置和尺寸

• border属性

  • cornerRadius(CGFloat)，圆角属性，若控件的宽高相等，且圆角属性为宽/高的一半，则为圆形，原理如图
    

  • borderWidth(CGFloat)，边框的宽度

  ，与contentInsets的效果相似

  • borderColor(CGColorRef)，边框颜色

• appearance属性

  • backgroundColor（CGColorRef），背景颜色
  • opacity（CGFloat），透明度，取值范围为0~1
  • maskToBounds（BOOL），是否不显示超出控件边界的内容，若设置cornerRadius，该属性需要赋值为YES(iOS9，不用设置)

• content属性

  • contents（id） 内容，可以设置为图片

  ---

• backgroundColor、content与border的层次关系，如图

  

position与anchorPoint

---

• position属性决定该控件在父控件中的位置，以父控件的左上角为原点
• anchorPoint属性决定该控件上的哪个点位于position位置

• 示例

  • 若position为(100, 100)，anchorPoint为(0, 0 )，如图
    

  • 若position为(100, 100)，anchorPoint为(0.5, 0.5)，如图
    

CALayer的简单使用

---

• 创建一个CALayer对象imageLayer，并添加到控制器View的layer上

  //创建图层
  CALayer *imageLayer = [[CALayer alloc] init];
  //设置图层的位置和尺寸
  imageLayer.bounds = CGRectMake(0, 0, 100, 100);
  imageLayer.position = CGPointMake(100, 200);
  //将图层添加到控制器view的layer上
  [self.view.layer addSublayer:imageLayer];

• 设置背景图片

  //创建图层
  CALayer *imageLayer = [[CALayer alloc] init];
  //设置图层的位置和尺寸
  imageLayer.bounds = CGRectMake(0, 0, 100, 100);
  imageLayer.position = CGPointMake(100, 200);
  
  //设置背景颜色
  imageLayer.backgroundColor = [UIColor orangeColor].CGColor;
  
  //将图层添加到控制器view的layer上
  [self.view.layer addSublayer:imageLayer];

  • 显示效果如图

    

• 设置imageLayer的内容为一张图片

  //创建图层
  CALayer *imageLayer = [[CALayer alloc] init];
  //设置图层的位置和尺寸
  imageLayer.bounds = CGRectMake(0, 0, 100, 100);
  imageLayer.position = CGPointMake(100, 200);
  
  //在图层上添加一张图片
  imageLayer.contents = (id)[UIImage imageNamed:@"Ali"].CGImage;
  
  //将图层添加到控制器view的layer上
  [self.view.layer addSublayer:imageLayer];

  • 显示效果如图

    

• 设置圆角属性

  //创建图层
  CALayer *imageLayer = [[CALayer alloc] init];
  //设置图层的位置和尺寸
  imageLayer.bounds = CGRectMake(0, 0, 100, 100);
  imageLayer.position = CGPointMake(100, 200);
  
  //设置圆角属性
  imageLayer.cornerRadius = 20;
  imageLayer.masksToBounds = YES; //该属性在iOS9中不用设置
  
  //在图层上添加一张图片
  imageLayer.contents = (id)[UIImage imageNamed:@"Ali"].CGImage;
  //将图层添加到控制器view的layer上
  [self.view.layer addSublayer:imageLayer];

  • 显示效果如图

    

• 设置边框属性

  //创建图层
  CALayer *imageLayer = [[CALayer alloc] init];
  //设置图层的位置和尺寸
  imageLayer.bounds = CGRectMake(0, 0, 100, 100);
  imageLayer.position = CGPointMake(100, 200);
  //设置圆角属性
  imageLayer.cornerRadius = 20;
  imageLayer.masksToBounds = YES;
  
  //设置border属性
  imageLayer.borderWidth = 2;
  imageLayer.borderColor = [UIColor purpleColor].CGColor;
  
  //在图层上添加一张图片
  imageLayer.contents = (id)[UIImage imageNamed:@"Ali"].CGImage;
  //将图层添加到控制器view的layer上
  [self.view.layer addSublayer:imageLayer];

  • 显示效果如图

    

自定义CALayer的方法

---

• 方法一：创建CALayer对象，并设置其代理

  • 创建CALayer对象

    //创建图层
    CALayer *imageLayer = [[CALayer alloc] init];
    //设置代理
    imageLayer.delegate = self;
    //设置图层的位置和尺寸
    imageLayer.bounds = CGRectMake(0, 0, 100, 100);
    imageLayer.position = CGPointMake(100, 200);
    //重绘
    [imageLayer setNeedsDisplay];
    //将图层添加到控制器view的layer上
    [self.view.layer addSublayer:imageLayer];

  • 实现代理方法，在该方法中绘制图层的内容

    - (void)drawLayer:(nonnull CALayer *)layer inContext:(nonnull CGContextRef)ctx
    {
    	//通过绘图方法绘制内容
    }

• 方法二：自定义CALayer类的子类

  • 自定义CALayer的子类ImageLayer

    //重写该方法，绘制图层的内容
    - (void)drawInContext:(nonnull CGContextRef)ctx
    {
    	//通过绘图方法绘制内容
    }

  • 创建ImageLayer的实例

    ImageLayer *imageLayer = [[ImageLayer alloc] init];
    [self.view.layer addSublayer:imageLayer];