haoxue |
2011-10-15 01:52 |
CALayer簡單教程
首先要說的是CALayers 是屏幕上的一個具有可見內容的矩形區域,每個UIView都有一個根CALayer,其所有的繪制(視覺效果)都是在這個layer上進行的。(譯者注:為驗證這點,我寫下了如下代碼:
請注意,我創建的UILable始終隨着UIView的根CALayer的縮放而改變位置。) 其次,CALayer的可以影響其外觀的特性有:層的大小尺寸背景色內容(比如圖像或是使用Core Graphics繪制的內容)是否使用圓角是否使用陰影等等 需要說明的是CALayer的大部分屬性都可以用來實現動畫效果。 另外,你可以直接使用CALayer,也可以使用其子類,如CAGradientLayer,CATextLayer, CAShapeLayer等等。 示例 首先在Xcode中創建一個View-based App,CALayer是屬於QuartzCore framework的,所以需要引入QuartzCore framework,另外在程序中包括QuartzCore.h。 第一個例子是創建一個帶圓角的層,在你的ViewController中的ViewDidLoad中加入下面代碼:
結果如下:
然后添加一個帶陰影效果的子層,加入下列代碼:
效果圖:
為子層增加內容(圖片),你還可以設置層的邊框,代碼如下:
效果圖:
如果你希望子層也是圓角怎么辦?你可能說很容易設置cornerRadius屬性就行。實際上你即算是設置了cornerRadius屬性,圖片仍然不會顯示圓角。你還需要設置masksToBounds為YES。但是這樣做還是不夠的,因為如果是這樣,這個層的陰影顯示就沒有了。簡單的實現方法如下(通過兩個層來實現): CALayer *sublayer =[CALayer layer]; sublayer.backgroundColor =[UIColor blueColor].CGColor; sublayer.shadowOffset = CGSizeMake(0, 3); sublayer.shadowRadius =5.0; sublayer.shadowColor =[UIColor blackColor].CGColor; sublayer.shadowOpacity =0.8; sublayer.frame = CGRectMake(30, 30, 128, 192); sublayer.borderColor =[UIColor blackColor].CGColor; sublayer.borderWidth =2.0; sublayer.cornerRadius =10.0; [self.view.layer addSublayer:sublayer];
CALayer *imageLayer =[CALayer layer]; imageLayer.frame = sublayer.bounds; imageLayer.cornerRadius =10.0; imageLayer.contents =(id)[UIImage imageNamed:@"BattleMapSplashScreen.png"].CGImage; imageLayer.masksToBounds =YES; [sublayer addSublayer:imageLayer]; 效果圖:
最后,還介紹一下自繪圖型的實現,其要點是要設置所繪制層的delegate。比如在我們的例子中使用ViewController作為delegate,那么就需要在ViewController中實現drawLayer:inContext方法,對層進行繪制工作。另外,還需要調用setNeedsDisplay,來通知層需要進行繪制了,於是層才會通過對delegate的drawLayer:inContext方法進行調用。 代碼如下:
void MyDrawColoredPattern (void*info, CGContextRef context){ CGColorRef dotColor =[UIColor colorWithHue:0 saturation:0 brightness:0.07 alpha:1.0].CGColor; CGColorRef shadowColor =[UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor; CGContextSetFillColorWithColor(context, dotColor); CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor); CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0); CGContextFillPath(context); CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0); CGContextFillPath(context); }
-(void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context { CGColorRef bgColor =[UIColor colorWithHue:0.6 saturation:1.0 brightness:1.0 alpha:1.0].CGColor; CGContextSetFillColorWithColor(context, bgColor); CGContextFillRect(context, layer.bounds); staticc*****t CGPatternCallbacks callbacks ={0, &MyDrawColoredPattern, NULL}; CGContextSaveGState(context); CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL); CGContextSetFillColorSpace(context, patternSpace); CGColorSpaceRelease(patternSpace); CGPatternRef pattern = CGPatternCreate(NULL, layer.bounds, CGAffineTransformIdentity, 24, 24, kCGPatternTilingC*****tantSpacing, true, &callbacks); CGFloat alpha =1.0; CGContextSetFillPattern(context, pattern, &alpha); CGPatternRelease(pattern); CGContextFillRect(context, layer.bounds); CGContextRestoreGState(context); } 還需要注意,radians是一個自定義函數:
效果如下:
|
|