CoreAnimation-01-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];