iOS開發UI篇—CAlayer（自訂layer）

標籤：

iOS開發UI篇—CAlayer（自訂layer）

一、第一種方式

1.簡單說明

以前想要在view中畫東西，需要自訂view,建立一個類與之關聯，讓這個類繼承自UIView，然後重寫它的DrawRect：方法，然後在該方法中畫圖。

繪製圖形的步驟：（1）擷取上下文（2）繪製圖形（3）渲染圖形 如果在layer上畫東西，與上面的過程類似。程式碼範例：建立一個類，讓該類繼承自CALayerYYMylayer.m檔案

 1 // 2 //  YYMylayer.m 3 //  05-自訂layer(1) 4 // 5 //  Created by apple on 14-6-21. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYMylayer.h"10 11 @implementation YYMylayer12 //重寫該方法，在該方法內繪製圖形13 -(void)drawInContext:(CGContextRef)ctx14 {15     //1.繪製圖形16     //畫一個圓17     CGContextAddEllipseInRect(ctx, CGRectMake(50, 50, 100, 100));18     //設定屬性（顏色）19 //    [[UIColor yellowColor]set];20     CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);21     22     //2.渲染23     CGContextFillPath(ctx);24 }25 @end

在控制器中，建立一個自訂的類

 1 // 2 //  YYViewController.m 3 //  05-自訂layer(1) 4 // 5 //  Created by apple on 14-6-21. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 #import "YYMylayer.h"11 12 @interface YYViewController ()13 14 @end15 16 @implementation YYViewController17 18 - (void)viewDidLoad19 {20     [super viewDidLoad];21     22     //1.建立自訂的layer23     YYMylayer *layer=[YYMylayer layer];24     //2.設定layer的屬性25     layer.backgroundColor=[UIColor brownColor].CGColor;26     layer.bounds=CGRectMake(0, 0, 200, 150);27     layer.anchorPoint=CGPointZero;28     layer.position=CGPointMake(100, 100);29     layer.cornerRadius=20;30     layer.shadowColor=[UIColor blackColor].CGColor;31     layer.shadowOffset=CGSizeMake(10, 20);32     layer.shadowOpacity=0.6;33     34     [layer setNeedsDisplay];35     //3.添加layer36     [self.view.layer addSublayer:layer];37     38 }39 40 @end

注意點：（1）預設為無色，不會顯示。要想讓繪製的圖形顯示出來，還需要設定圖形的顏色。注意不能直接使用UI架構中的類（2）在自訂layer中的-(void)drawInContext:方法不會自己調用，只能自己通過setNeedDisplay方法調用，在view中畫東西DrawRect:方法在view第一次顯示的時候會自動調用。實現效果：2.拓展　　UIView中繪圖說明

 1 #import "YYVIEW.h" 2  3 @implementation YYVIEW 4  5  6 - (void)drawRect:(CGRect)rect 7 { 8     //1.擷取上下文 9     CGContextRef ctx=UIGraphicsGetCurrentContext();10     //2.繪製圖形11     CGContextAddEllipseInRect(ctx, CGRectMake(50, 50, 100, 100));12     //設定屬性（顏色）13     //    [[UIColor yellowColor]set];14     CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);15     16     //3.渲染17     CGContextFillPath(ctx);18     //在執行渲染操作的時候，本質上它的內部相當於調用了下面的方法19     [self.layer drawInContext:ctx];20 }

說明：在UIView中繪製圖形，擷取的上下文就是這個view對應的layer的上下文。在渲染的時候，就是把圖形渲染到對應的layer上。

  在執行渲染操作的時候，本質上它的內部相當於執行了 [self.layer drawInContext:ctx];

 

二、第二種方式

方法描述：設定CALayer的delegate，然後讓delegate實現drawLayer:inContext:方法，當CALayer需要繪圖時，會調用delegate的drawLayer:inContext:方法進行繪圖。

程式碼範例：

 1 // 2 //  YYViewController.m 3 //  06-自訂layer(2) 4 // 5 //  Created by apple on 14-6-21. 6 //  Copyright (c) 2014年 itcase. All rights reserved. 7  8 #import "YYViewController.h" 9 @interface YYViewController ()10 @end11 12 @implementation YYViewController13 14 - (void)viewDidLoad15 {16     [super viewDidLoad];17     //1.建立自訂的layer18     CALayer *layer=[CALayer layer];19     //2.設定layer的屬性20     layer.backgroundColor=[UIColor brownColor].CGColor;21     layer.bounds=CGRectMake(0, 0, 200, 150);22     layer.anchorPoint=CGPointZero;23     layer.position=CGPointMake(100, 100);24     layer.cornerRadius=20;25     layer.shadowColor=[UIColor blackColor].CGColor;26     layer.shadowOffset=CGSizeMake(10, 20);27     layer.shadowOpacity=0.6;28     29     //設定代理30     layer.delegate=self;31     [layer setNeedsDisplay];32     //3.添加layer33     [self.view.layer addSublayer:layer];34 }35 36 -(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx37 {38     //1.繪製圖形39     //畫一個圓40     CGContextAddEllipseInRect(ctx, CGRectMake(50, 50, 100, 100));41     //設定屬性（顏色）42     //    [[UIColor yellowColor]set];43     CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);44     45     //2.渲染46     CGContextFillPath(ctx);47 }48 @end

實現效果：

注意點：不能再將某個UIView設定為CALayer的delegate，因為UIView對象已經是它內部根層的delegate，再次設定為其他層的delegate就會出問題。

在設定代理的時候，它並不要求我們遵守協議，說明這個方法是nsobject中的，就不需要再額外的顯示遵守協議了。提示：以後如果要設定某個類的代理，但是這個代理沒要求我們遵守什麼特定的協議，那麼可以認為這個協議方法是NSObject裡邊的。  三、補充說明（1）無論採取哪種方法來自訂層，都必須調用CALayer的setNeedsDisplay方法才能正常繪圖。（2）詳細現實過程：當UIView需要顯示時，它內部的層會準備好一個CGContextRef(圖形上 下文)，然後調用delegate(這裡就是UIView)的drawLayer:inContext:方法，並且傳入已經準備好的 CGContextRef對象。而UIView在drawLayer:inContext:方法中又會調用自己的drawRect:方法。平時在 drawRect:中通過UIGraphicsGetCurrentContext()擷取的就是由層傳入的CGContextRef對象，在 drawRect:中完成的所有繪圖都會填入層的CGContextRef中，然後被拷貝至螢幕。 

iOS開發UI篇—CAlayer（自訂layer）