CALayer

CALayer的基本属性

CALayer和UIView的关系

CALayer负责视图中显示的内容和动画

UIView负责监听和响应事件

position和anchorPoint的作用

 

在iOS中，你能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView

其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层

在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层

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

 

当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示 

换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能

 

CALayer的属性

 

宽度和高度

@property CGRect bounds;

位置(默认指中点，具体由anchorPoint决定)

@property CGPoint position;

锚点(x,y的范围都是0-1)，决定了position的含义

@property CGPoint anchorPoint;

背景颜色(CGColorRef类型)

@property CGColorRef backgroundColor;

形变属性

@property CATransform3D transform;

边框颜色(CGColorRef类型)

@property CGColorRef borderColor;

边框宽度

@property CGFloat borderWidth;

圆角半径

@property CGFloat cornerRadius;

内容(比如设置为图片CGImageRef)

@property(retain) id contents;

阴影颜色

@property CGColorRef shadowColor;

阴影不透明(0.0 ~ 1.0)

@property float shadowOpacity;

阴影偏移位置

@property CGSize shadowOffset;

 

position和anchorPoint

CALayer有2个非常重要的属性：position和anchorPoint

@property CGPoint position;

用来设置CALayer在父层中的位置

以父层的左上角为原点(0, 0)

@property CGPoint anchorPoint;

称为“定位点”、“锚点”

决定着CALayer身上的哪个点会在position属性所指的位置

以自己的左上角为原点(0, 0)

它的x、y取值范围都是0~1，默认值为（0.5, 0.5），意味着锚点在layer的中间

 

**
 如果要使用CALayer必须导入QuartzCore框架，并在.m文件中导入该框架的头文件
 */
@implementation MainViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    [self.view setBackgroundColor:[UIColor darkGrayColor]];

    [self ShowImage];
    //[self myImageLayerDemo];
  //[self myViewLayerDemo];
}

-(void)ShowImage
{
    //创建一个layer
    CALayer *Mylayer=[CALayer layer];
    //设置layer的属性
    Mylayer.bounds=CGRectMake(100, 100, 50, 50);
    Mylayer.position=CGPointMake(100, 100);
    
    //设置需要显示的图片
    Mylayer.contents=(id)[UIImage imageNamed:@"头像1.png"].CGImage;
    //设置圆角半径为10
    Mylayer.cornerRadius=10;
    //如果设置了图片，那么需要设置这个属性为YES才能显示圆角效果
    Mylayer.masksToBounds=YES;
    //设置边框
    Mylayer.borderWidth=3;
    Mylayer.borderColor=[UIColor brownColor].CGColor;
    
    //把layer添加到界面上
    [self.view.layer addSublayer:Mylayer];
}

#pragma mark - UIImageView的layer演练
- (void)myImageLayerDemo
{
    UIImage *image = [UIImage imageNamed:@"头像1.png"];
    CGSize size = image.size;
    UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
    [imageView setFrame:CGRectMake(50, 50, 200, 200)];
    
    [self.view addSubview:imageView];
    
    // 1. 圆角半径
    // 提示，在imageView中，图层不止一个，如果要实现圆角效果，需要设置一个遮罩属性
    // masksToBounds属性可以让imageView中的所有子图层跟随imageView一起变化
    imageView.layer.cornerRadius = 50.0f;
    [imageView.layer setMasksToBounds:YES];

    // 2. 阴影
    // 提示，如果设置了masksToBounds属性，imageView的阴影效果无效
    [imageView.layer setShadowColor:[UIColor redColor].CGColor];
    [imageView.layer setShadowOffset:CGSizeMake(10.0, 10.0)];
    [imageView.layer setShadowOpacity:1.0];
    
    NSLog(@"%@",self.view.layer.superlayer);
    // 3. 边框
    [imageView.layer setBorderColor:[UIColor blueColor].CGColor];
    [imageView.layer setBorderWidth:3.0f];
    
    // 4. 形变属性，在CALayer中的形变属性是3D的，不再是2D的
    // 提示，形变参数使用set方法时，只能应用一种形变
    // 1> 平移属性(向上移动100个点)
//    [imageView.layer setTransform:CATransform3DMakeTranslation(0, -100, 0)];
//    // 2> 缩放属性
//    [imageView.layer setTransform:CATransform3DMakeScale(0.5, 1.0, 1.0)];
//    // 3> 旋转属性
//    // 提示：通常在旋转时指定z轴即可，要延哪个轴旋转，指定一个数值1.0即可
//    // 图像本身没有厚度，如果按照x或y旋转90度，图像是不可见的。
//    [imageView.layer setTransform:CATransform3DMakeRotation(M_PI_2, 0, 0, 1.0)];

    // 5. 利用keyPath设置形变，可以组合使用，但是记住不要输错
    // 提示，在文档中输入transform3D可以找到对应的transform keyPath
    // 1）平移
//    [imageView.layer setValue:@-100 forKeyPath:@"transform.translation.y"];
//    // 2) 缩放
//    [imageView.layer setValue:@0.5 forKeyPath:@"transform.scale"];
//    // 3) 旋转
//    [imageView.layer setValue:@M_PI_2 forKeyPath:@"transform.rotation.z"];
}

#pragma mark - 自定义视图的layer演练
- (void)myViewLayerDemo
{
    // 1. 自定义UIView的图层属性
    UIView *myView = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 100, 100)];
    [myView setBackgroundColor:[UIColor redColor]];
    
    [self.view addSubview:myView];
    
    // 1） 圆角半径
    myView.layer.cornerRadius = 50.0f;
    
    // 2) 阴影
    // 因为Core Animation是跨平台的，基于QuartzCore框架，是因为UIKit框架，仅能适用于iOS平台
    // 在Core Animation中不能使用任何跟UI有关的方法
    // 要设置阴影除了颜色之外，还需要指定其他偏移量和透明度参数
    // 1> 阴影颜色
    [myView.layer setShadowColor:[UIColor lightGrayColor].CGColor];
    // 2> 阴影偏移量
    [myView.layer setShadowOffset:CGSizeMake(0, 10)];
    // 3> 阴影的透明度
    [myView.layer setShadowOpacity:1.0f];
    
    // 3) 边框
    [myView.layer setBorderColor:[UIColor whiteColor].CGColor];
    [myView.layer setBorderWidth:3.0f];
}

@end

 

自定义图层

#import "MainViewController.h"
#import <QuartzCore/QuartzCore.h>

@interface MainViewController()

@property (weak, nonatomic) CALayer *myLayer;

@end

@implementation MainViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // 1. 自定义图层
    CALayer *myLayer = [CALayer layer];
    
    // 将自定义图层添加到视图的跟图层之上
    [self.view.layer addSublayer:myLayer];
    self.myLayer = myLayer;
    
    // 2. 设置属性
    // 1) 设置边框
    [myLayer setBounds:CGRectMake(0, 0, 200, 200)];
    // 2) 设置背景颜色
    [myLayer setBackgroundColor:[UIColor redColor].CGColor];
    // 3) 设置中心点(默认对应的是类似UIView的中心点)，postion相对于父图层的位置
    [myLayer setPosition:CGPointMake(0, 0)];
    // 4) 设置内容
    UIImage *image = [UIImage imageNamed:@"头像1.png"];
    // 在指定CGImageRef时，需要转换成id类型
    [myLayer setContents:(id)image.CGImage];
    // 5) 锚点，定位点 - 锚点（x,y的范围都是0-1），决定了position的含义
    // 默认值(0.5, 0.5)
    // 作用：主要控制图层的位置，以及旋转的轴，平移图层时的中心点，缩放图层时的中心点
    [myLayer setAnchorPoint:CGPointMake(1, 1)];
    
    [myLayer setTransform:CATransform3DMakeRotation(M_PI, 0, 0, 1)];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    if (self.myLayer.anchorPoint.x == 0) {
        self.myLayer.anchorPoint = CGPointMake(1, 1);
    } else {
        self.myLayer.anchorPoint = CGPointMake(0, 0);
    }
}

@end