CALayer类基础详解(一)---基本属性

169 阅读3分钟
原文链接: www.voidcn.com

一、CALayer基本介绍

CALayer类是一个矩形的图层,管理着基于图像的内容和动画的展示,经常被用来存储视图,也被用来作为没有视图的展示,图层主要工作是管理视觉效果,也包括图层自己的视觉属性,如:背景颜色(backgroundColor),边框(border),阴影(shadow)等,除此之外,图层还保存着它在屏幕上显示的几何内容,如:位置(position),大小(size),转换(transform)。动画是通过修改图层的内容和几何的属性实现的,一个图层对象封装了图层的时间和速度,它的动画采用了用来定义时间的CAMediaTiming 协议。

如果一个图层是视图(view)创建的,那么它的代理自动默认为视图,如果是你自己创建的一个图层,你需要给图层分配一个代理对象,给图层动态的的提供内容和执行其它任务,一个图层也许有一个布局管理对象管理子视图的布局。

每个UIView都有一个layer,它是UIView的根图层,它的所有显示的内容都在layer上面,同时layer还可以作为其它layer的父图层。

二、CALayer的常用属性

1.背景(backgroundColor),圆角(cornerRadius),剪切子视图属性(maskToBounds)

示例代码1:

parentView.layer.backgroundColor = [UIColor greenColor];//父视图绿色背景

UIView *view = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
view.layer.backgroundColor = [UIColor redColor].CGColor;//子视图红色背景
view.layer.cornerRadius = 100;//半径为100的圆角
[parentView addSubview:view];

UIView *subView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
subView.layer.backgroundColor = [UIColor blueColor].CGColor;
[view addSubview:subView];

效果图1:




示例代码2:

parentView.layer.backgroundColor = [UIColor greenColor];//父视图绿色背景
 

UIView *view = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds]; 

view.layer.backgroundColor = [UIColor redColor].CGColor;//子视图红色背景 

view.layer.cornerRadius = 100;//半径为100的圆角 

[parentView addSubview:view];
 

UIView *subView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds]; 

subView.layer.backgroundColor = [UIColor blueColor].CGColor; 

[view addSubview:subView];

由于view视图被子视图subview覆盖,所以只显示subview,背景为蓝色
效果图2:



示例代码3:

parentView.layer.backgroundColor = [UIColor greenColor];//父视图绿色背景
 

UIView *view = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds]; 

view.layer.backgroundColor = [UIColor redColor].CGColor;//子视图红色背景 

view.layer.cornerRadius = 100;//半径为100的圆角 

view.layer.masksToBounds= YES; 

[parentView addSubview:view];
 

UIView *subView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds]; 

subView.layer.backgroundColor = [UIColor blueColor].CGColor; 

[view addSubview:subView];

由于view视图的子视图subview被剪切与view相同大小,所以只显示subview,背景为蓝色
效果图3:


2.阴影(shadow)

示例代码4:

self.view.backgroundColor = [UIColor greenColor];
 

UIView *view = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds]; 

view.layer.backgroundColor = [UIColor redColor].CGColor; 

view.layer.cornerRadius = 100;
 

view.layer.shadowOffset = CGSizeMake(0, 6);//阴影偏移量 

view.layer.shadowColor = [UIColor blackColor].CGColor; 

view.layer.shadowRadius =10;//阴影半径 

view.layer.shadowOpacity =1;//阴影透明度 

[self.view addSubview:view];

效果图4:


3.位置(position),锚点(anchorPoint),框架(frame),边界(bounds)

在IOS系统中,坐标原点在视图的左上角,在OSX系统中位于左下角,如图5所示
效果图5:

a.图层的position它是一个CGPoint值,在它的父图层的坐标空间里,当改变frame时,它的position也改变了,对于一个新的独立的图层它的默认值为(0.0,0.0)。


b.图层的bounds属性是一个CGRect的值,指定图层的大小(bounds.size)和图层的原点。


c.图层的fream属性是一个CGRect的值,指定图层的大小(fream.size)和图层的位置(fream.origin),格式为(x,y,width,height), 它的frame属性是通过bounds,anchorPoint,position属性计算的,在改变frame值时,position和bounds的值也会改变。


d.图层的anchorPoint(锚点)属性是一个CGPoint值,默认值为(0.5,0.5),在图层的中间位置, anchorPoint永远和position的位置重合,所以当position的位置固定以后,可以通过改变anchorPoint的值来改变图层位置。锚点使用单元空间坐标系表示,(0.0,0.0)点接近图层的原点,而(1.0,1.0)是原点的对角点。 锚点还是图层做变换的支点,图层进行几何操作都是围绕锚点的,如:旋转(rotate),伸缩(scale),当锚点变换时,就绕着新的锚点做几何变换.

图5:




图6是anchorPoint的示意图,IOS中anchorPoint原点为左上角。


图6:




图7是在图层进行几何变换时的示意图,锚点作为变换的支点。


图7: