CALayer的认识和使用

一、什么是CALayer

CALayer是一个图层，在UIView(视图)里面的一个图层。和UIView一样，都有自己的父图层和子图层，它们构成一个图层树的层次结构。图层绘制类似视图一样自底向上，并指定其几何形状相对他们的superlayer，创建一个相对的局部坐标系。图层类通过合并变换矩阵允许你旋转、偏移、拉伸对应的图层的内容。

---

二、为什么要认识CALayer

每个UIView内部都有图层，每次创建UIView对象的时候，UIView内部都会自动创建一个层(即CALayer对象)，通过.layer调用图层和设置图层属性。当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统将图层拷贝到屏幕上，于是就完成了UIView的显示。也就是说，UIView本身不具备显示的功能，是它内部的层才有显示功能。

---

三、CALayer的使用

示例一：UIImageView(暂且取名为customView)的layer的使用(UIImageView继承UIView，也可以直接用UIView来练习)

self.customView.layer.borderWidth //layer边框的宽度

self.customView.layer.borderColor //layer边框的颜色，注意是CGColor

self.customView.layer.contents //图层内容，设置image(强转为id类型)

self.customView.layer.cornerRadius //圆角的半径大小

self.customView.layer.shadowColor //设置阴影颜色，CGColor

self.customView.layer.shadowOffset //阴影偏移量，正数在右边，负数在左边

self.customView.layer.shadowOpacity //设置阴影的显示程度，类似于alpha(注意，如果确定要设置阴影的话，阴影这几个属性全部要写，缺一不可)

self.customView.layer.masksToBounds或者self.customView.clipsToBounds //剪切掉多余的部分，但是如果设置了阴影的话，阴影也被剪切掉了

self.customView.layer.position //设置图层的位置，类似于center

---

示例二：自定义CALayer

既然是CALayer，那么上面说属性都可以用，这里就不赘述。下面，针对自定义CALayer，我想讲讲显示的问题。即： 锚点（定位点）的概念

以下面代码为例子:

CALayer *layer = [CALayer layer];
layer.backgroundColor = [UIColor cyanColor].CGColor;
layer.bounds = CGRectMake(0, 0, 100, 100);
[self.view.layer addSublayer:layer];


这段代码显示出来的效果:

那么到底是什么原因造成的呢？锚点！

我们一步一步来分析:第一、我们没有设置layer的position(类似中心点),也就是说此时他的原点是(0,0)。第二、layer有一个anchorPoint(锚点)的属性，默认是(0.5,0.5)，那么此时layer中心点在圆点，所以才会只显示了四分之一的大小。

借用李南江的图片和代码给大家演示下锚点:

1.创建一个CALayer，添加到控制器的view的layer中

CALayer *myLayer = [CALayer layer];
// 设置层的宽度和高度（100x100）
myLayer.bounds = CGRectMake(0, 0, 100, 100);
// 设置层的位置
myLayer.position = CGPointMake(100, 100);
// 设置层的背景颜色：红色
myLayer.backgroundColor = [UIColor redColor].CGColor;
// 添加myLayer到控制器的view的layer中
[self.view.layer addSublayer:myLayer];
//第5行设置了myLayer的position为(100, 100)，又因为anchorPoint默认是(0.5, 0.5)，所以最后的效果是：myLayer的中点会在父层的(100, 100)位置


注意，蓝色线是我自己加上去的，方便大家理解，并不是默认的显示效果。两条蓝色线的宽度均为100。蓝色线的交点就是layer.position的位置，锚点也是以这个点为起始点。锚点的范围(0~1,0~1)代表layer大小的比例位置
：2.若将anchorPoint改为(0, 0)，myLayer的左上角会在(100, 100)位置
： myLayer.anchorPoint = CGPointMake(0, 0);
：

3.若将anchorPoint改为(1, 1)，myLayer的右下角会在(100, 100)位置

myLayer.anchorPoint = CGPointMake(1, 1);
:

4.将anchorPoint改为(0, 1)，myLayer的左下角会在(100, 100)位置

myLayer.anchorPoint = CGPointMake(0, 1);

———- ———– ————–

通过以上李南江的案例，可以知道锚点是怎样使用的。所以，自定义Layer通过设置position和锚点可以准确设置layer的位置。

四、为什么CALayer中的颜色和图片要用CGxxx类型

CALayer是定义在QuartzCore框架中的，CGImageRef、CGColorRef两种数据类型是定义在CoreGraphics框架中的，UIColor、UIImage是定义在UIKit框架中的，框架不一样，适用平台不一样。其次，QuartzCore框架和CoreGraphics框架是可以跨平台使用的，在iOS和Mac OS X上都能使用，但是UIKit只能在iOS中使用。

五、CALayer什么时候使用

既然UIView和CALayer都可以设置一些相同的东西，比如:颜色、位置、图片等等，那么使用哪个好呢？
实际上，UIView有交互能力，而CALayer没有交互能力，CALayer少了事件处理能力，更加轻量级，这时候要根据需求而定。

六、UIView和CALayer的关系

CALayer是在UIView内部的，如果UIView是父子关系，那么它们内部的CALayer也是父子关系。
还是借用李南江的图片来展示：

演示代码:https://github.com/HZhenF/CALayer.git
演示代码