你好,歡迎來到IOS教程網

 Ios教程網 >> IOS訊息 >> 關於IOS >> Core Animation之簡單使用CALayer

Core Animation之簡單使用CALayer

編輯:關於IOS
[收起] 文章目錄
  • 1、什麼是CALayer

1、什麼是CALayer

CALayer是個簡單的類,它是用來在屏幕上顯示內容展示的矩形區域。

靠,這是不描述UIView的話嗎?其實他們是有區別的。每個UIView都有一個根CALayer,UIView在這個layer上描繪東西。

那怎麼訪問這個layer呢,很簡單:

[cpp] view plaincopy

  1. CALayer *myLayer = myView.layer;

CALayer有這麼些屬性,可以設置改變層的顯示:

  1. 層的大小和位置
  2. 層的背景顏色
  3. 層的內容(圖像,core graphics)
  4. 層的的圓角,半徑
  5. 層的陰影設置
  6. 等等....

2、開始

新建項目默認的模版裡是QuartzCore庫的,先添加它,才能使用CALayer。 小試牛刀看看。 設置層的背景顏色,層的設置圓角半徑為20 [cpp] view plaincopy

  1. #import <QuartzCore/QuartzCore.h>
  2. // Uncomment viewDidLoad and add the following lines
  3. self.view.layer.backgroundColor = [UIColor orangeColor].CGColor;
  4. self.view.layer.cornerRadius = 20.0;

Core Animation之簡單使用CALayer

3、層和子層

獲取一個新CALayer的實例 [cpp] view plaincopy

  1. CALayer *sublayer = [CALayer layer];

設置layler的屬性,下面分別是

  1. 設置背景色,
  2. 陰影的偏差值,
  3. 陰影的半徑,
  4. 陰影的顏色,
  5. 陰影的透明度,
  6. 子層的freme值。
  7. 然後把新的層add到view的層裡。
[cpp] view plaincopy

  1. CALayer *sublayer = [CALayer layer];
  2.     sublayer.backgroundColor = [UIColor purpleColor].CGColor;
  3.     sublayer.shadowOffset = CGSizeMake(0, 3);
  4.     sublayer.shadowRadius = 5.0;
  5.     sublayer.shadowColor = [UIColor blackColor].CGColor;
  6.     sublayer.shadowOpacity = 0.8;
  7.     sublayer.frame = CGRectMake(30, 30, 128, 192);
  8.     [self.view.layer addSublayer:sublayer];
效果如下: Core Animation之簡單使用CALayer

4、添加圖片內容和層的圓角

  1. 主要內容有:
  2. 新建imagelayer放置圖片
  3. 設置圓角半徑cornerRadius
  4. 設置層的內容contents為圖片
  5. 邊界遮罩masksToBounds
[cpp] view plaincopy

  1. CALayer *sublayer = [CALayer layer];
  2. sublayer.backgroundColor = [UIColor purpleColor].CGColor;
  3. sublayer.shadowOffset = CGSizeMake(0, 3);
  4. sublayer.shadowRadius = 5.0;
  5. sublayer.shadowColor = [UIColor blackColor].CGColor;
  6. sublayer.shadowOpacity = 0.8;
  7. sublayer.frame = CGRectMake(30, 30, 128, 192);
  8. sublayer.borderColor = [UIColor blackColor].CGColor;
  9. sublayer.borderWidth = 2.0;
  10. sublayer.cornerRadius = 10.0;
  11. [self.view.layer addSublayer:sublayer];
  12. CALayer *imageLayer = [CALayer layer];
  13. imageLayer.frame = sublayer.bounds;
  14. imageLayer.cornerRadius = 10.0;
  15. imageLayer.contents = (id)[UIImage imageNamed:@"snaguosha.png"].CGImage;
  16. imageLayer.masksToBounds = YES;
  17. [sublayer addSublayer:imageLayer];

效果:

Core Animation之簡單使用CALayer

有圓角就是好看很多。

5、自定義繪畫內容到圖層

如果不想使用圖片內容,而是想用 Core Graphics繪制內容到層上的話也簡單。 這裡主要靠viewController類實現一個drawLayer:inContext方法,並把它設置成layer的代理。代碼如下: [cpp] view plaincopy

  1. CALayer *customDrawn = [CALayer layer];
  2. customDrawn.delegate = self;
  3. customDrawn.backgroundColor = [UIColor greenColor].CGColor;
  4. customDrawn.frame = CGRectMake(30, 250, 280, 200);
  5. customDrawn.shadowOffset = CGSizeMake(0, 3);
  6. customDrawn.shadowRadius = 5.0;
  7. customDrawn.shadowColor = [UIColor blackColor].CGColor;
  8. customDrawn.shadowOpacity = 0.8;
  9. customDrawn.cornerRadius = 10.0;
  10. customDrawn.borderColor = [UIColor blackColor].CGColor;
  11. customDrawn.borderWidth = 2.0;
  12. customDrawn.masksToBounds = YES;
  13. [self.view.layer addSublayer:customDrawn];

在viewController中加入:

[cpp] view plaincopy

  1. static inline double radians (double degrees) { return degrees * M_PI/180; }
  2. void MyDrawColoredPattern (void *info, CGContextRef context) {
  3.     CGColorRef dotColor = [UIColor colorWithHue:0 saturation:0 brightness:0.07 alpha:1.0].CGColor;
  4.     CGColorRef shadowColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.1].CGColor;
  5.     CGContextSetFillColorWithColor(context, dotColor);
  6.     CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 1, shadowColor);
  7.     CGContextAddArc(context, 3, 3, 4, 0, radians(360), 0);
  8.     CGContextFillPath(context);
  9.     CGContextAddArc(context, 16, 16, 4, 0, radians(360), 0);
  10.     CGContextFillPath(context);
  11. }
  12. - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context {
  13.     CGColorRef bgColor = [UIColor colorWithHue:0 saturation:0 brightness:0.15 alpha:1.0].CGColor;
  14.     CGContextSetFillColorWithColor(context, bgColor);
  15.     CGContextFillRect(context, layer.bounds);
  16.     static const CGPatternCallbacks callbacks = { 0, &MyDrawColoredPattern, NULL };
  17.     CGContextSaveGState(context);
  18.     CGColorSpaceRef patternSpace = CGColorSpaceCreatePattern(NULL);
  19.     CGContextSetFillColorSpace(context, patternSpace);
  20.     CGColorSpaceRelease(patternSpace);
  21.     CGPatternRef pattern = CGPatternCreate(NULL,
  22.                                            layer.bounds,
  23.                                            CGAffineTransformIdentity,
  24.                                            24,
  25.                                            24,
  26.                                            kCGPatternTilingConstantSpacing,
  27.                                            true,
  28.                                            &callbacks);
  29.     CGFloat alpha = 1.0;
  30.     CGContextSetFillPattern(context, pattern, &alpha);
  31.     CGPatternRelease(pattern);
  32.     CGContextFillRect(context, layer.bounds);
  33.     CGContextRestoreGState(context);
  34. }

這樣,Core Graphics繪制了一個有質地的圖像到customDrawn層上,這個繪制教程請參考: Core Graphics 101: Patterns
咱們看下這很酷的效果: Core Animation之簡單使用CALayer 這個是不是像mac電腦上按下F12鍵時出來的背景。

  1. 上一頁:
  2. 下一頁:
蘋果刷機越獄教程| IOS教程問題解答| IOS技巧綜合| IOS7技巧| IOS8教程
Copyright © Ios教程網 All Rights Reserved