CALayer基礎(chǔ)

• CALayer是每一個UI控件的核心，一個UI控件之所以能顯示可以說是CALayer的功勞
  
• 每一個UI控件默認都為自己創(chuàng)建一個CALayer對象，通過drawRect方法將內(nèi)容繪制在圖層上，然后再顯示出來
  

• CALayer可以完成很多任務(wù)

  • 調(diào)整UI控件的外觀
    
  • 執(zhí)行動畫
    

• CALayer與UIView

  • 二者可以達到相同的顯示效果
    
  • UIView比CALayer多了用戶交互功能
    
  • CALayer更加輕量級，性能更好
    

• CALayer在系統(tǒng)架構(gòu)中的位置

  • CALayer位于QuartzCore框架中適用于iOS與Mac OS X
    
  • 其中的屬性類型如：CGImageRef、CGColorRef位于CoreGraphic框架中適用于iOS與Mac OS X
    
  • 又如：UIImage、UIColor位于UIKit框架中只適用于iOS
    
  • 系統(tǒng)架構(gòu)圖如下：

  

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），是否不顯示超出控件邊界的內(nèi)容，若設(shè)置cornerRadius，該屬性需要賦值為YES(iOS9，不用設(shè)置)

• content屬性

  • contents（id） 內(nèi)容，可以設(shè)置為圖片

  ---

• backgroundColor、content與border的層次關(guān)系，如圖

  

position與anchorPoint

• position屬性決定該控件在父控件中的位置，以父控件的左上角為原點
  
• anchorPoint屬性決定該控件上的哪個點位于position位置
  

• 示例

  • 若position為(100, 100)，anchorPoint為(0, 0 )，如圖
    

  • 若position為(100, 100)，anchorPoint為(0.5, 0.5)，如圖
    

CALayer的簡單使用

• 創(chuàng)建一個CALayer對象imageLayer，并添加到控制器View的layer上

  //創(chuàng)建圖層CALayer *imageLayer = [[CALayer alloc] init];//設(shè)置圖層的位置和尺寸imageLayer.bounds = CGRectMake(0, 0, 100, 100);imageLayer.position = CGPointMake(100, 200);//將圖層添加到控制器view的layer上[self.view.layer addSublayer:imageLayer];

• 設(shè)置背景圖片

  //創(chuàng)建圖層CALayer *imageLayer = [[CALayer alloc] init];//設(shè)置圖層的位置和尺寸imageLayer.bounds = CGRectMake(0, 0, 100, 100);imageLayer.position = CGPointMake(100, 200);//設(shè)置背景顏色imageLayer.backgroundColor = [UIColor orangeColor].CGColor;//將圖層添加到控制器view的layer上[self.view.layer addSublayer:imageLayer];

  • 顯示效果如圖

    

• 設(shè)置imageLayer的內(nèi)容為一張圖片

  //創(chuàng)建圖層CALayer *imageLayer = [[CALayer alloc] init];//設(shè)置圖層的位置和尺寸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];

  • 顯示效果如圖

    

• 設(shè)置圓角屬性

  //創(chuàng)建圖層CALayer *imageLayer = [[CALayer alloc] init];//設(shè)置圖層的位置和尺寸imageLayer.bounds = CGRectMake(0, 0, 100, 100);imageLayer.position = CGPointMake(100, 200);//設(shè)置圓角屬性imageLayer.cornerRadius = 20;imageLayer.masksToBounds = YES; //該屬性在iOS9中不用設(shè)置//在圖層上添加一張圖片imageLayer.contents = (id)[UIImage imageNamed:@"Ali"].CGImage;//將圖層添加到控制器view的layer上[self.view.layer addSublayer:imageLayer];

  • 顯示效果如圖

    

• 設(shè)置邊框?qū)傩?/p>

  //創(chuàng)建圖層CALayer *imageLayer = [[CALayer alloc] init];//設(shè)置圖層的位置和尺寸imageLayer.bounds = CGRectMake(0, 0, 100, 100);imageLayer.position = CGPointMake(100, 200);//設(shè)置圓角屬性imageLayer.cornerRadius = 20;imageLayer.masksToBounds = YES;//設(shè)置border屬性imageLayer.borderWidth = 2;imageLayer.borderColor = [UIColor purpleColor].CGColor;//在圖層上添加一張圖片imageLayer.contents = (id)[UIImage imageNamed:@"Ali"].CGImage;//將圖層添加到控制器view的layer上[self.view.layer addSublayer:imageLayer];

  • 顯示效果如圖

    

自定義CALayer的方法

• 方法一：創(chuàng)建CALayer對象，并設(shè)置其代理

  • 創(chuàng)建CALayer對象

    //創(chuàng)建圖層CALayer *imageLayer = [[CALayer alloc] init];//設(shè)置代理imageLayer.delegate = self;//設(shè)置圖層的位置和尺寸imageLayer.bounds = CGRectMake(0, 0, 100, 100);imageLayer.position = CGPointMake(100, 200);//重繪[imageLayer setNeedsDisplay];//將圖層添加到控制器view的layer上[self.view.layer addSublayer:imageLayer];

  • 實現(xiàn)代理方法，在該方法中繪制圖層的內(nèi)容

    - (void)drawLayer:(nonnull CALayer *)layer inContext:(nonnull CGContextRef)ctx{	//通過繪圖方法繪制內(nèi)容}

• 方法二：自定義CALayer類的子類

  • 自定義CALayer的子類ImageLayer

    //重寫該方法，繪制圖層的內(nèi)容- (void)drawInContext:(nonnull CGContextRef)ctx{	//通過繪圖方法繪制內(nèi)容}

  • 創(chuàng)建ImageLayer的實例

    ImageLayer *imageLayer = [[ImageLayer alloc] init];[self.view.layer addSublayer:imageLayer];