iOS開發(fā)中CALayer使用的基本教程

2020-07-26 03:31:52

字體：大中小

供稿：網(wǎng)友

一、簡單介紹
在iOS中，你能看得見摸得著的東西基本上都是UIView，比如一個(gè)按鈕、一個(gè)文本標(biāo)簽、一個(gè)文本輸入框、一個(gè)圖標(biāo)等等，這些都是UIView。

其實(shí)UIView之所以能顯示在屏幕上，完全是因?yàn)樗鼉?nèi)部的一個(gè)圖層，在創(chuàng)建UIView對(duì)象時(shí)，UIView內(nèi)部會(huì)自動(dòng)創(chuàng)建一個(gè)圖層(即CALayer對(duì)象)，通過UIView的layer屬性可以訪問這個(gè)層

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

當(dāng)UIView需要顯示到屏幕上時(shí)，會(huì)調(diào)用drawRect:方法進(jìn)行繪圖，并且會(huì)將所有內(nèi)容繪制在自己的圖層上，繪圖完畢后，系統(tǒng)會(huì)將圖層拷貝到屏幕上，于是就完成了UIView的顯示

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

CALayer包含在QuartzCore框架中，這是一個(gè)跨平臺(tái)的框架，既可以用在iOS中又可以用在Mac OS X中。在使用Core Animation開發(fā)動(dòng)畫的本質(zhì)就是將CALayer中的內(nèi)容轉(zhuǎn)化為位圖從而供硬件操作，所以要熟練掌握動(dòng)畫操作必須先來熟悉CALayer。

UIView是iOS系統(tǒng)中界面元素的基礎(chǔ)，所有的界面元素都繼承自它。它本身完全是由CoreAnimation來實(shí)現(xiàn)的（Mac下似乎不是這樣）。它真正的繪圖部分，是由一個(gè)叫CALayer（Core Animation Layer）的類來管理。UIView本身，更像是一個(gè)CALayer的管理器，訪問它的跟繪圖和跟坐標(biāo)有關(guān)的屬性，例如frame，bounds等等，實(shí)際上內(nèi)部都是在訪問它所包含的CALayer的相關(guān)屬性。

在iOS中CALayer的設(shè)計(jì)主要是了為了內(nèi)容展示和動(dòng)畫操作，CALayer本身并不包含在UIKit中，它不能響應(yīng)事件。由于CALayer在設(shè)計(jì)之初就考慮它的動(dòng)畫操作功能，CALayer很多屬性在修改時(shí)都能形成動(dòng)畫效果，這種屬性稱為“隱式動(dòng)畫屬性”。但是對(duì)于UIView的根圖層而言屬性的修改并不形成動(dòng)畫效果，因?yàn)楹芏嗲闆r下根圖層更多的充當(dāng)容器的做用，如果它的屬性變動(dòng)形成動(dòng)畫效果會(huì)直接影響子圖層。另外，UIView的根圖層創(chuàng)建工作完全由iOS負(fù)責(zé)完成，無法重新創(chuàng)建，但是可以往根圖層中添加子圖層或移除子圖層。

二、簡單使用

　　UIView之所以能夠顯示，完全是因?yàn)閮?nèi)部的CALayer對(duì)象。因此，通過操作這個(gè)CALayer對(duì)象，可以很方便地調(diào)整UIView的一些界面屬性，比如：陰影、圓角大小、邊框?qū)挾群皖伾取?/p>

　　新建一個(gè)項(xiàng)目，在storyboard中添加一個(gè)view.

20151121100707550.png (648×190)

1.通過layer設(shè)置邊框的寬度和顏色

復(fù)制代碼代碼如下:

#import "YYViewController.h"

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

@end

復(fù)制代碼代碼如下:

@implementation YYViewController

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

@end

20151121100731185.png (264×184)

2.通過layer設(shè)置邊框?yàn)閳A角

復(fù)制代碼代碼如下:

//設(shè)置layer的圓角
self.customView.layer.cornerRadius=20;

20151121100748300.png (199×159)

3.在layer上添加一張圖片

復(fù)制代碼代碼如下:

#import "YYViewController.h"

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

@end

復(fù)制代碼代碼如下:

@implementation YYViewController

20151121100806053.png (244×204)

說明：contents是id類型，可以接受內(nèi)容，上面的實(shí)例讓layer顯示一張圖片，仔細(xì)觀察可以發(fā)現(xiàn)四個(gè)圓角的部分露了一個(gè)角出來。

產(chǎn)生的原因說明：

20151121100828974.png (450×236)

customview上的根layer

20151121100850507.png (227×190)

UIimage的圖層

20151121100911863.png (492×200)

添加后

20151121100934564.png (378×194)

那是因?yàn)樵O(shè)置的image不是展示在主圖層上的，而是顯示在子圖層上的。可以通過設(shè)置一個(gè)范圍，設(shè)置超出主圖層的部分把它給剪切掉。

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

復(fù)制代碼代碼如下:

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

20151121101021821.png (214×176)

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

4.設(shè)置陰影

　　設(shè)置陰影，不光需要設(shè)置陰影顏色，還應(yīng)該設(shè)置陰影的偏移位和透明度。

　　因?yàn)槿绻辉O(shè)置偏移位的話，那么陰影和layer完全重疊，且默認(rèn)透明度為0（即完全透明）。

復(fù)制代碼代碼如下:

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

20151121101042439.png (202×177)

補(bǔ)充說明：如果設(shè)置了超過主圖層的部分減掉，則設(shè)置陰影不會(huì)有顯示效果。/

復(fù)制代碼代碼如下:

- (void)viewDidLoad
{
    [super viewDidLoad];

    //設(shè)置邊框的寬度為20
    self.customView.layer.borderWidth=5;
    //設(shè)置邊框的顏色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;

    //設(shè)置layer的圓角
    self.customView.layer.cornerRadius=20;
    //設(shè)置超過子圖層的部分裁減掉
    //UI框架中使用的方法
    //    self.customView.clipsToBounds=YES;
    self.customView.layer.masksToBounds=YES;

    //在view的圖層上添加一個(gè)image，contents表示接受內(nèi)容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;

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

20151121101101342.png (170×151)

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

復(fù)制代碼代碼如下:

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

20151121101119810.png (194×151)

5.只要繼承自u(píng)iview的都有l(wèi)ayer屬性，下面以圖片為例進(jìn)行說明。

在storyboard中新添加一張圖片。

20151121101135207.png (615×307)

簡單設(shè)置示例

復(fù)制代碼代碼如下:

#import "YYViewController.h"

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

@end

復(fù)制代碼代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    //設(shè)置圖片layer的邊框?qū)挾群皖伾?br />    self.iconView.layer.borderColor=[UIColor brownColor].CGColor;
    self.iconView.layer.borderWidth=5;

    //設(shè)置layer的圓角
    self.iconView.layer.cornerRadius=20;
    //設(shè)置超過子圖層的部分裁減掉
       self.iconView.layer.masksToBounds=YES;
}

20151121101152087.png (251×276)

設(shè)置bounds屬性，在設(shè)置時(shí)需要去除掉storyboard中的自動(dòng)布局屬性。

20151121101208890.png (555×288)

設(shè)置圖片的形變屬性（transform）

復(fù)制代碼代碼如下:

@implementation YYViewController

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

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

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

通過uiview設(shè)置（2D效果）

20151121101226190.png (647×180)

通過layer設(shè)置（3D效果）

20151121101245848.png (435×125)

使用KVC進(jìn)行設(shè)置

復(fù)制代碼代碼如下:

#import "YYViewController.h"

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

@end

復(fù)制代碼代碼如下:

@implementation YYViewController

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

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

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

    //通過KVC來設(shè)置
    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
    [self.iconView.layer setValue:v forKeyPath:@"transform"];
    //如果是只需要設(shè)置在某一個(gè)方向上的移動(dòng)，可以參考下面的代碼
    //在x的方向上向左移動(dòng)100
    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
}

查看蘋果的官方文檔，下面的屬性都可以通過KVC進(jìn)行設(shè)置。

20151121101304152.png (1206×507)

旋轉(zhuǎn)一個(gè)弧度

復(fù)制代碼代碼如下:

@implementation YYViewController

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

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

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

    //通過KVC來設(shè)置
//    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
//    [self.iconView.layer setValue:v forKeyPath:@"transform"];
//    //如果是只需要設(shè)置在某一個(gè)方向上的移動(dòng)，可以參考下面的代碼
//    //在x的方向上向左移動(dòng)100
//    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];

    //旋轉(zhuǎn)
    self.iconView.layer.transform=CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);
}

20151121101326981.png (220×191)