原文地址:http://www.raywenderlich.com/2502/calayers-tutorial-for-ios-introduction-to-calayers-tutorial

如果你已經(jīng)在iPhone上做過開發(fā)，你可能對UIView和它的子類-Button,text,slider等,非常熟悉。

但你可能不了解UIView是建立在CALayers之上的，至少我曾經(jīng)有段時(shí)間不知道。
了解CALayers是有用的，因?yàn)槟憧梢允褂盟鼈冚p松地去創(chuàng)造一些純視覺效果，它們對理解使用將在未來教程中討論的Core Animation也很重要。 在CALayers的教程中，你將通過做創(chuàng)造一個(gè)層并實(shí)驗(yàn)它的效果的簡單APP去學(xué)習(xí)基本的層的使用，在這個(gè)過程中，你將學(xué)到層是什么，一些能設(shè)置的純屬性和如何將圖像和自定義內(nèi)容放入層里。
這個(gè)層的教程假設(shè)你基本熟悉iPhone編程，如果你是新手，可以從如何創(chuàng)建一個(gè)簡單的iPhone App開始。 讓我們開始吧

什么是層？

層是表現(xiàn)一個(gè)在屏幕上的包含可視內(nèi)容的矩形的簡單類。 “等一下”，你可能說，“這是UIView的定義”，是這樣的，但這兒有個(gè)把戲：每一個(gè)UIView包含一個(gè)用于繪制的根層，你可以使用下面的代碼訪問這個(gè)自動(dòng)創(chuàng)造的層：（CALayer是UIView的根基） CALayer? * myLayer? =? myView.layer;
CALayer類包含了很多可設(shè)置的影響外觀顯示的屬性，例如： 層的尺寸和位置 層的背景顏色 層的內(nèi)容（圖像或者使用Core Graphics繪制的） 是否是圓角層 在層的邊緣應(yīng)用邊框 更多內(nèi)容 你可以使用這些屬性去創(chuàng)造一些效果，例如你想拿一副圖片，放在白色的邊框，應(yīng)用一個(gè)陰影效果，使其更為逼真，而不是拿出Photoshop或?qū)懸欢袰ore Graphicsdaima代碼，你可以使用層的代碼。 另外層的屬性，多數(shù)是可以動(dòng)畫的，例如，你可以開始用圓角圖片，點(diǎn)擊按鈕，有個(gè)動(dòng)畫效果，圓角變回直角，使用起來是非常方便簡單的。 你可以直接使用層類，或者你可以使用一個(gè) 它的子類，例如CAGradientLayer, CATextLayer, CAShapeLayer，和其他。UIView默認(rèn)的層類是CALayer類，這個(gè)是教程的重點(diǎn)。

開始

這兒去了解層的使用的最好方法是自己動(dòng)手，所以啟動(dòng)Xcode，選擇File\New Project,選擇 iOS\Application\View-Based Application,點(diǎn)"Choose",起名工程"Layer Fun",點(diǎn)保存（就是創(chuàng)建個(gè)測試Layer的工程）。 添加QuzatCore，做下列改動(dòng)到LayerFunViewController.m： [cpp]? view plain copy print ?

//?Import?QuartzCore.h?at?the?top?of?the?file??

#import?<QuartzCore/QuartzCore.h>??

???

//?Uncomment?viewDidLoad?and?add?the?following?lines??

self.view.layer.backgroundColor?=?[UIColor?orangeColor].CGColor;??

self.view.layer.cornerRadius?=?20.0;???

self.view.layer.frame?=?CGRectInset(self.view.layer.frame,?20,?20);??

讓我們一步一步回顧這些新東西 為了得到view的層，你可以使用self.view.layer，記住，你可以使用self.view獲得view controller 的根視圖，你一旦得到視圖，你可以使用view.layer獲得默認(rèn)的層（自動(dòng)創(chuàng)建的）,默認(rèn)層是一個(gè)CALayer的類（不是子類）。 下一步你設(shè)置層的背景色為橙色，注意背景色屬性實(shí)際是CGColor類型，但可以使用CGColor屬性從UIColor到CGColor轉(zhuǎn)換。 下一步你設(shè)置圓角的弧度，設(shè)置的這個(gè)值是制造圓角的圓的半徑，20是一個(gè)漂亮的圓角邊緣。 最終，你使用CGRectInset的功能，收縮一點(diǎn)frame,方便看到效果。CGRectInset函數(shù)收縮X和Y的坐標(biāo)，返回一個(gè)新的Frame。 編譯執(zhí)行你的代碼，你可以在屏幕中央看到一個(gè)圓角橙色矩形。

層和子層

就像UIView可以有自視圖，CALayers可以也可以用子層，你可以使用下面的代碼創(chuàng)建一個(gè)新的層： CALayer? * sublayer? = ? [ CALayer layer ] ;
一旦你擁有一個(gè)層，你可以在上面設(shè)置任何你想要的屬性，但是記住這兒有一個(gè)屬性你一定要設(shè)置：它是frame(或者bounds/ position)。畢竟，層需要去知道它有多大（在什么位置），才能畫出自己。當(dāng)你完成了，你可以把新的層當(dāng)作子層添加到另一個(gè)層中，通過下面的代碼： [ myLayer addSublayer : sublayer ] ;
好了，現(xiàn)在試著自己添加一個(gè)簡單的子層到view的層中，添加下面的代碼在viewDidLoad函數(shù)內(nèi)之前添加代碼的后面： [cpp]? view plain copy print ?

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);???

[self.view.layer?addSublayer:sublayer];??

這創(chuàng)建了一個(gè)新的層，并且設(shè)置了一些屬性，包括一些之前沒設(shè)置過的陰影屬性，你可以看到在層上設(shè)置陰影是多么簡單，通過這樣，可以用一點(diǎn)工作量完成令人驚奇的效果。（就是簡單、方便、有效果） 在設(shè)置了這些屬性，需要設(shè)置層的frame并且把它加到view的層中，記住這些坐標(biāo)是相對于父層的frame（父層坐標(biāo)體系的坐標(biāo)）如果父層位于（20，20），子層設(shè)置偏移(30,30),子層在屏幕的位置將會(huì)是（50，50）. 編譯執(zhí)行你的代碼，你將看到一個(gè)藍(lán)色子層在屏幕上。

設(shè)置層的圖像內(nèi)容

CALayers可以包含更多的內(nèi)容除了純顏色，它非常容易包含圖片內(nèi)容，例如： 先將一張名為“BattleMapSplashScreen.jpg”的圖片包含進(jìn)項(xiàng)目 然后添加以下代碼： [cpp]? view plain copy print ?

sublayer.contents?=?(id)?[UIImage?imageNamed:@"BattleMapSplashScreen.jpg"].CGImage;??

sublayer.borderColor?=?[UIColor?blackColor].CGColor;???

sublayer.borderWidth?=?2.0;??

這里設(shè)置了內(nèi)容為圖片的層，并且使用邊界的顏色和寬度設(shè)置了一圈黑色的邊界，演示了它如何工作。 編譯執(zhí)行你的代碼，你可以看到藍(lán)色層的內(nèi)容被圖片替換調(diào)了。

圓角半徑和圖片內(nèi)容的注意點(diǎn)

現(xiàn)在你可能想通過cornerRadius把圖片也設(shè)置成圓角效果。 然而問題超過了咱們之前學(xué)的范圍，如果你在層上設(shè)置了圖片內(nèi)容，圖像將仍然畫出圓角的邊界（該屬性起不了作用），你可以通過設(shè)置子層的masksToBounds為Yes，但如果你這樣做，陰影效果將不會(huì)出現(xiàn)因?yàn)樗麄儽簧w掉了。
我找到一個(gè)創(chuàng)造兩個(gè)層的方法，在外的層是有邊框和陰影帶顏色的層，里面的層包含圓角圖像和設(shè)置mask，這樣在外的層繪制陰影，在里的層包含圖像。
試著使用下面的替換創(chuàng)建子層的代碼： [cpp]? view plain copy print ?

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.jpg"].CGImage;??

imageLayer.masksToBounds?=?YES;???

[sublayer?addSublayer:imageLayer];??

編譯運(yùn)行代碼，現(xiàn)在你的圖像將有圓角

層和自定義繪畫內(nèi)容

如果你想使用Core Graphics替代圖片繪制自定義的層，也是很容易的。 方法是你設(shè)置一個(gè)類作為層的代理對象，這個(gè)類實(shí)現(xiàn)名為drawLayer:inContext的方法，里面包含你想繪制內(nèi)容的Core Graphics代碼。 讓我們試著添加一個(gè)新的層，在里面畫一個(gè)圖案，你把層的代理指向view controller的對象，實(shí)現(xiàn)drawLayer:inContext的方法去畫圖案。 在你的viewDidLoad添加以下代碼建立一個(gè)新層： [cpp]? view plain copy print ?

CALayer?*customDrawn?=?[CALayer?layer];??

customDrawn.delegate?=?self;??

customDrawn.backgroundColor?=?[UIColor?greenColor].CGColor;??

customDrawn.frame?=?CGRectMake(30,?250,?128,?40);??

customDrawn.shadowOffset?=?CGSizeMake(0,?3);??

customDrawn.shadowRadius?=?5.0;??

customDrawn.shadowColor?=?[UIColor?blackColor].CGColor;??

customDrawn.shadowOpacity?=?0.8;??

customDrawn.cornerRadius?=?10.0;??

customDrawn.borderColor?=?[UIColor?blackColor].CGColor;??

customDrawn.borderWidth?=?2.0;??

customDrawn.masksToBounds?=?YES;??

[self.view.layer?addSublayer:customDrawn];???

[customDrawn?setNeedsDisplay];??

這里的代碼，大多數(shù)之前都出現(xiàn)過，就有兩點(diǎn)是新的： 1 第一 把層的委托設(shè)置給self，這以為這個(gè)對象（self）將需要實(shí)現(xiàn)?drawLayer:inContext去繪制層的內(nèi)容。 2 在添加層后，需要通過調(diào)用setNeedsDisplay通知層去刷新自己（并調(diào)用drawLayer:inContext），如果你忘記調(diào)用這個(gè)，drawLayer:inContext將不會(huì)被調(diào)用，圖案將不出現(xiàn)。 接下來添加代碼去實(shí)現(xiàn)drawLayer:inContext，如下： [cpp] view plaincopyprint?

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);??

???

????static?const?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,??

???????????????????????????????????????????kCGPatternTilingConstantSpacing,??

???????????????????????????????????????????true,??

???????????????????????????????????????????&callbacks);??

????CGFloat?alpha?=?1.0;??

????CGContextSetFillPattern(context,?pattern,?&alpha);??

????CGPatternRelease(pattern);??

????CGContextFillRect(context,?layer.bounds);??

????CGContextRestoreGState(context);???

}??

就是這樣，運(yùn)行代碼，你將在圖片下面看到一個(gè)藍(lán)色的圖案

將來

下載源代碼點(diǎn)擊，

總結(jié)

以上是生活随笔為你收集整理的CALayer的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。