iOS开发概述－13.UI控件图层属性CALayer

1.CALayer概述

• 在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView
• 其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层
• 在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层
  

  @property(nonatomic,readonly,retain) CALayer *layer;

• 当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示
• 换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能

---

2.CALayer作用

• 通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如：
  
  • 设置阴影
  • 设置圆角
  • 设置边框
  • …
• 还可以通过给CALayer对象添加动画，来实现一些炫酷的动画效果

---

3.CALayer的常用属性

// 宽度和高度
@property CGRect bounds;

// 位置相对于父控件的位置
@property CGPoint position;

// 锚点(x,y的范围都是0-1)，决定了position的含义
@property CGPoint anchorPoint;

// 背景颜色(CGColorRef类型)
@property CGColorRef backgroundColor;

// 形变属性(图层可以实现3D动画效果)
@property CATransform3D transform;

// 边框颜色(CGColorRef类型)
@property CGColorRef borderColor;

// 边框宽度
@property CGFloat borderWidth;

// 圆角半径
@property CGColorRef borderColor;

// 内容(比如设置为图片CGImageRef)
@property(retain) id contents;

---

4.CALayer的position和anchorPoint属性

@property CGPoint position;
// 用来设置CALayer在父层中的位置
// 以父层的左上角为原点(0, 0)
@property CGPoint anchorPoint;
// 称为“定位点”、“锚点”
// 决定着CALayer身上的哪个点会在position属性所指的位置
// 以自己的左上角为原点(0, 0)，(1, 1)为图层右下角
// 它的x、y取值范围都是0~1，默认值为（0.5, 0.5）,即图层中心点

---

5.属性设置示例代码

• 效果图

-(void)setUpRedView{
    // 1.设置阴影
    // 1.1设置阴影不透明
    _redView.layer.shadowOpacity = YES;
    // 1.2设置阴影颜色
    _redView.layer.shadowColor = [UIColor yellowColor].CGColor;
    // 1.3设置阴影偏移
    //    _redView.layer.shadowOffset = CGSizeMake(10, 10);
    // 1.4设置阴影圆角半径
    _redView.layer.shadowRadius = 20;

    // 2.设置圆角
    _redView.layer.cornerRadius = _redView.bounds.size.width * 0.5;
    // 2.1 设置边框颜色
    _redView.layer.borderColor = [UIColor yellowColor].CGColor;
    // 2.2 设置边框宽度
    _redView.layer.borderWidth = 2;
}

• imageView图层示例

- (void)viewDidLoad {
    [super viewDidLoad];
    // imageLayer
    // cornerRadius修改的是根层的圆角半径
    _imageV.layer.cornerRadius = 50;

    // 超出根层部分的全部裁剪掉
    _imageV.layer.masksToBounds = YES;

    // 设置边框
    _imageV.layer.borderWidth = 1;
    _imageV.layer.borderColor = [UIColor whiteColor].CGColor;
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [UIView animateWithDuration:1 animations:^{
        // 设置形变属性（图层能够实现3D形变效果）
//        _imageV.layer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);

        // KVC去做动画
        [_imageV.layer setValue:[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 0, 1, 0)] forKeyPath:@"transform"];
    } completion:nil];
}

---

6.子图层

• 和UIView类似，根层layer可以添加子层layer

- (void)viewDidLoad {
    [super viewDidLoad];

    // 创建新图层
    CALayer *layer = [CALayer layer];
    _imageLayer = layer;
    // 设置图层背景颜色
    layer.backgroundColor = [UIColor redColor].CGColor;
    // 设置图层frame
    layer.frame = CGRectMake(100, 100, 100, 100);
    // 设置图层内容
    layer.contents = (id)[UIImage imageNamed:@"阿狸头像"].CGImage;
    // 添加到根层
    [self.view.layer addSublayer:layer];
}

---

7.CALayer和UIView对比

• CALayer补充说明：
• 首先,CALayer是定义在QuartzCore框架中的
  
  • CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的
  • UIColor、UIImage是定义在UIKit框架中的
• 其次
  
  • QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用
  • 但是UIKit只能在iOS中使用

• 为了保证可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef

• 通过CALayer，就能做出跟UIImageView一样的界面效果

• UIView和CALayer使用注意点：既然CALayer和UIView都能实现相同的显示效果，那究竟该选择谁好呢？
  
  • 其实，对比CALayer，UIView多了一个事件处理的功能。也就是说，CALayer不能处理用户的触摸事件，而UIView可以
  • 如果显示出来的东西需要跟用户进行交互的话，用UIView；
  • 如果不需要跟用户进行交互，用UIView或者CALayer都可以
    当然，CALayer的性能会高一些，因为它少了事件处理的功能，更加轻量级