iOS開發中CALayer使用的基本教程_IOS

一、簡單介紹
在iOS中，你能看得見摸得著的東西基本上都是UIView，比如一個按鈕、一個文字標籤、一個文本輸入框、一個表徵圖等等，這些都是UIView。

其實UIView之所以能顯示在螢幕上，完全是因為它內部的一個圖層，在建立UIView對象時，UIView內部會自動建立一個圖層(即CALayer對象)，通過UIView的layer屬性可以訪問這個層

@property(nonatomic,readonly,retain) CALayer *layer;

當UIView需要顯示到螢幕上時，會調用drawRect:方法進行繪圖，並且會將所有內容繪製在自己的圖層上，繪圖完畢後，系統會將圖層拷貝到螢幕上，於是就完成了UIView的顯示

換句話說，UIView本身不具備顯示的功能，擁有顯示功能的是它內部的圖層。

CALayer包含在QuartzCore架構中，這是一個跨平台的架構，既可以用在iOS中又可以用在Mac OS X中。在使用Core Animation開發動畫的本質就是將CALayer中的內容轉化為位元影像從而供硬體操作，所以要熟練掌握動畫操作必須先來熟悉CALayer。

UIView是iOS系統中介面元素的基礎，所有的介面元素都繼承自它。它本身完全是由CoreAnimation來實現的（Mac下似乎不是這樣）。它真正的繪圖部分，是由一個叫CALayer（Core Animation Layer）的類來管理。UIView本身，更像是一個CALayer的管理器，訪問它的跟繪圖和跟座標有關的屬性，例如frame，bounds等等，實際上內部都是在訪問它所包含的CALayer的相關屬性。

在iOS中CALayer的設計主要是了為了內容展示和動畫操作，CALayer本身並不包含在UIKit中，它不能響應事件。由於CALayer在設計之初就考慮它的動畫操作功能，CALayer很多屬性在修改時都能形成動畫效果，這種屬性稱為“隱式動畫屬性”。但是對於UIView的根圖層而言屬性的修改並不形成動畫效果，因為很多情況下根圖層更多的充當容器的做用，如果它的屬性變動形成動畫效果會直接影響子圖層。另外，UIView的根圖層建立工作完全由iOS負責完成，無法重新建立，但是可以往根圖層中添加子圖層或移除子圖層。

 

二、簡單使用

　　UIView之所以能夠顯示，完全是因為內部的CALayer對象。因此，通過操作這個CALayer對象，可以很方便地調整UIView的一些介面屬性，比如：陰影、圓角大小、邊框寬度和顏色等。

　　建立一個項目，在storyboard中添加一個view.

1.通過layer設定邊框的寬度和顏色

複製代碼 代碼如下:

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;

@end

複製代碼 代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //設定邊框的寬度為20
    self.customView.layer.borderWidth=20;
    //設定邊框的顏色
    self.customView.layer.borderColor=[UIColor greenColor].CGColor;
}

@end

2.通過layer設定邊框為圓角

複製代碼 代碼如下:

//設定layer的圓角
self.customView.layer.cornerRadius=20;

3.在layer上添加一張圖片

複製代碼 代碼如下:

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;

@end

複製代碼 代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //設定邊框的寬度為20
    self.customView.layer.borderWidth=5;
    //設定邊框的顏色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
   
    //設定layer的圓角
    self.customView.layer.cornerRadius=20;
   
    //在view的圖層上添加一個image，contents表示接受內容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
   
}
@end

說明：contents是id類型，可以接受內容，上面的執行個體讓layer顯示一張圖片，仔細觀察可以發現四個圓角的部分露了一個角出來。

產生的原因說明：

customview上的根layer

UIimage的圖層

添加後

那是因為設定的image不是展示在主圖層上的，而是顯示在子圖層上的。可以通過設定一個範圍，設定超出主圖層的部分把它給剪下掉。

有以下兩種方法，建議使用layer中的方法（第二種）self.customView.layer.masksToBounds=YES;

複製代碼 代碼如下:

- (void)viewDidLoad
{
    [super viewDidLoad];
    //設定邊框的寬度為20
    self.customView.layer.borderWidth=5;
    //設定邊框的顏色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
   
    //設定layer的圓角
    self.customView.layer.cornerRadius=20;
    //設定超過子圖層的部分裁減掉
    //UI架構中使用的方法
//    self.customView.clipsToBounds=YES;
    self.customView.layer.masksToBounds=YES;
   
    //在view的圖層上添加一個image，contents表示接受內容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
}

注意：layer中不能直接接受UI架構中的東西

4.設定陰影

　　設定陰影，不光需要設定陰影顏色，還應該設定陰影的位移位和透明度。

　　因為如果不設定位移位的話，那麼陰影和layer完全重疊，且預設透明度為0（即完全透明）。

複製代碼 代碼如下:

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    //設定陰影的顏色
    self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
    //設定陰影的位移量，如果為正數，則代表為往右邊位移
    self.customView.layer.shadowOffset=CGSizeMake(15, 5);
    //設定陰影的透明度(0~1之間，0表示完全透明)
    self.customView.layer.shadowOpacity=0.6;
}

補充說明：如果設定了超過主圖層的部分減掉，則設定陰影不會有顯示效果。\

複製代碼 代碼如下:

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    //設定邊框的寬度為20
    self.customView.layer.borderWidth=5;
    //設定邊框的顏色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
   
    //設定layer的圓角
    self.customView.layer.cornerRadius=20;
    //設定超過子圖層的部分裁減掉
    //UI架構中使用的方法
    //    self.customView.clipsToBounds=YES;
    self.customView.layer.masksToBounds=YES;
   
    //在view的圖層上添加一個image，contents表示接受內容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
   
    //設定陰影的顏色
    self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
    //設定陰影的位移量，如果為正數，則代表為往右邊位移
    self.customView.layer.shadowOffset=CGSizeMake(15, 5);
    //設定陰影的透明度(0~1之間，0表示完全透明)
    self.customView.layer.shadowOpacity=0.6;
}

把剪下超出主圖層部分的代碼注釋掉之後的顯示效果

複製代碼 代碼如下:

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    //設定邊框的寬度為20
    self.customView.layer.borderWidth=5;
    //設定邊框的顏色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
   
    //設定layer的圓角
    self.customView.layer.cornerRadius=20;
    //設定超過子圖層的部分裁減掉
    //UI架構中使用的方法
    //    self.customView.clipsToBounds=YES;
//    self.customView.layer.masksToBounds=YES;
   
    //在view的圖層上添加一個image，contents表示接受內容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
   
    //設定陰影的顏色
    self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
    //設定陰影的位移量，如果為正數，則代表為往右邊位移
    self.customView.layer.shadowOffset=CGSizeMake(15, 5);
    //設定陰影的透明度(0~1之間，0表示完全透明)
    self.customView.layer.shadowOpacity=0.6;
}

5.只要繼承自uiview的都有layer屬性，下面以圖片為例進行說明。

在storyboard中新添加一張圖片。

簡單設定樣本

複製代碼 代碼如下:

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@end

複製代碼 代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
   
    //設定圖片layer的邊框寬度和顏色
    self.iconView.layer.borderColor=[UIColor brownColor].CGColor;
    self.iconView.layer.borderWidth=5;
   
    //設定layer的圓角
    self.iconView.layer.cornerRadius=20;
    //設定超過子圖層的部分裁減掉
       self.iconView.layer.masksToBounds=YES;
}

設定bounds屬性，在設定時需要去除掉storyboard中的自動布局屬性。

設定圖片的形變屬性（transform）

複製代碼 代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    //通過uiview設定（2D效果）
//    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
    //通過layer來設定（3D效果,x，y，z三個方向）
    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
}

通過uiview設定（2D效果）

通過layer設定（3D效果）

使用KVC進行設定

複製代碼 代碼如下:

#import "YYViewController.h"

@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;

@end

複製代碼 代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    //通過uiview設定（2D效果）
//    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
    //通過layer來設定（3D效果,x，y，z三個方向）
//    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
   
    //通過KVC來設定
    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
    [self.iconView.layer setValue:v forKeyPath:@"transform"];
    //如果是只需要設定在某一個方向上的移動，可以參考下面的代碼
    //在x的方向上向左移動100
    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
}

查看蘋果的官方文檔，下面的屬性都可以通過KVC進行設定。

旋轉一個弧度

複製代碼 代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{

    //通過uiview設定（2D效果）
//    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
    //通過layer來設定（3D效果,x，y，z三個方向）
//    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
   
    //通過KVC來設定
//    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
//    [self.iconView.layer setValue:v forKeyPath:@"transform"];
//    //如果是只需要設定在某一個方向上的移動，可以參考下面的代碼
//    //在x的方向上向左移動100
//    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
   
    //旋轉
    self.iconView.layer.transform=CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);
}

補充：三維座標系