基廉列克雜記本: Core Animation的基本使用(二)

2012年11月28日星期三

Core Animation的基本使用(二)

Core Animation绘图的基础是“层”，叫做CALayer。你可以在View中设置层，层中可以放置更多的层。每个层都可以设定单独的动作，还可以给上一级的层设置动作，下一级的层就可以跟着上一层进行动作。iPhone官方SDK同样支持CALayer，而在底层的Toolchain中，你需要用的类叫做LKLayer（Layer Kit），其实是一样的。

1. CALayers 只是一個用來在螢幕上描繪可視內容的矩形之類別, 沒錯這也是 UIViews
      做的事. 但是這只是一個手法: 每一個 UIView 所畫的內容, 都包含了一個 root layer!
      你可以從以下的 code 來存取這個 layer(預設已建好的):
      CALayer *myLayer = myView.layer;

2. CALayer 類別的好處是: 它包含了一大堆可以設定的屬性讓你用來改變可見的外觀,
      例如:
      a. 圖層(layer) 的大小與位置.
      b. 圖層的背景顏色.
      c. 圖層的內容(圖像或用 Core Graphics 繪製的內容).
      d. 圖層的轉角是否使用圓形的.
      e. 為圖層設定陰影.
      f. 為圖層設定邊框.
      g. 其它等等.

官方資料
http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Reference/CALayer_class/Introduction/Introduction.html#//apple_ref/occ/cl/CALayer

因此要針對CALayer來做一下實驗

1. 一個基本的Layer例子，但是上層的圖卻因為圖層的圓角而跑到外面。

    //先使用Layer對UIView，設一個背景
    self.view.layer.backgroundColor =[UIColor orangeColor].CGColor;
    self.view.layer.cornerRadius =20.0; //四角會是圓形的
    self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);

    加上一層Layer來放置圖片
    CALayer *sublayer = [CALayer layer];
    sublayer.backgroundColor = [UIColor blueColor].CGColor;
    sublayer.shadowOffset = CGSizeMake(0, 10);
    sublayer.shadowRadius = 5.0;
    sublayer.shadowColor = [UIColor blackColor].CGColor;
    sublayer.shadowOpacity = 0.8;
    sublayer.frame = CGRectMake(30, 30, 500, 600);

    sublayer.contents =(id)[UIImage imageNamed:@"gsy.jpg"].CGImage;
    sublayer.borderColor =[UIColor blackColor].CGColor;
    sublayer.borderWidth =2.0;

    sublayer.cornerRadius =20.0; // 圖檔會超過邊界框架

    [self.view.layer addSublayer:sublayer];

2.改良上面的例子，使上層的圖可以塞進圖層內，不會跑出圓角外

self.view.layer.backgroundColor =[UIColor orangeColor].CGColor;
    self.view.layer.cornerRadius =20.0; //四角會是圓形的
    self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);

    CALayer *sublayer =[CALayer layer]; //專門顯示外框的Layer
    sublayer.backgroundColor =[UIColor blueColor].CGColor;
    sublayer.shadowOffset = CGSizeMake(0, 20);
    sublayer.shadowRadius =5.0;
    sublayer.shadowColor =[UIColor blackColor].CGColor;
    sublayer.shadowOpacity =0.8;
    sublayer.frame = CGRectMake(30, 30, 500, 600);
    sublayer.borderColor =[UIColor blackColor].CGColor;
    sublayer.borderWidth =2.0;
    sublayer.cornerRadius =20.0;
    [self.view.layer addSublayer:sublayer];

    CALayer *imageLayer =[CALayer layer]; //專門放置圖片用的Layer
    imageLayer.frame = sublayer.bounds;
    imageLayer.cornerRadius =20.0;
    imageLayer.contents =(id)[UIImage imageNamed:@"gsy.jpg"].CGImage;
    imageLayer.masksToBounds =YES;
    [sublayer addSublayer:imageLayer];

3. 另一個解決方法，先使用方法一的程式碼，最後一行加上sublayer.masksToBounds =YES;，就可以顯示圓腳效果，但是會失去陰影效果。

//先使用Layer對UIView，設一個背景
    self.view.layer.backgroundColor =[UIColor orangeColor].CGColor;
    self.view.layer.cornerRadius =20.0; //四角會是圓形的
    self.view.layer.frame = CGRectInset(self.view.layer.frame, 20, 20);

    加上一層Layer來放置圖片
    CALayer *sublayer = [CALayer layer];
    sublayer.backgroundColor = [UIColor blueColor].CGColor;
    sublayer.shadowOffset = CGSizeMake(0, 10);
    sublayer.shadowRadius = 5.0;
    sublayer.shadowColor = [UIColor blackColor].CGColor;
    sublayer.shadowOpacity = 0.8;
    sublayer.frame = CGRectMake(30, 30, 500, 600);

    sublayer.contents =(id)[UIImage imageNamed:@"gsy.jpg"].CGImage;
    sublayer.borderColor =[UIColor blackColor].CGColor;
    sublayer.borderWidth =2.0;

    sublayer.cornerRadius =20.0;
    sublayer.masksToBounds =YES;

    [self.view.layer addSublayer:sublayer];