iOS開發(fā)中CALayer使用的基本教程
一、簡單介紹
在iOS中，你能看得見摸得著的東西基本上都是UIView，比如一個按鈕、一個文本標簽、一個文本輸入框、一個圖標等等，這些都是UIView。
其實UIView之所以能顯示在屏幕上，完全是因為它內(nèi)部的一個圖層，在創(chuàng)建UIView對象時，UIView內(nèi)部會自動創(chuàng)建一個圖層(即CALayer對象)，通過UIView的layer屬性可以訪問這個層
@property(nonatomic,readonly,retain) CALayer *layer;
當UIView需要顯示到屏幕上時，會調(diào)用drawRect:方法進行繪圖，并且會將所有內(nèi)容繪制在自己的圖層上，繪圖完畢后，系統(tǒng)會將圖層拷貝到屏幕上，于是就完成了UIView的顯示
換句話說，UIView本身不具備顯示的功能，擁有顯示功能的是它內(nèi)部的圖層。
CALayer包含在QuartzCore框架中，這是一個跨平臺的框架，既可以用在iOS中又可以用在Mac OS X中。在使用Core Animation開發(fā)動畫的本質(zhì)就是將CALayer中的內(nèi)容轉(zhuǎn)化為位圖從而供硬件操作，所以要熟練掌握動畫操作必須先來熟悉CALayer。
UIView是iOS系統(tǒng)中界面元素的基礎(chǔ)，所有的界面元素都繼承自它。它本身完全是由CoreAnimation來實現(xiàn)的（Mac下似乎不是這樣）。它真正的繪圖部分，是由一個叫CALayer（Core Animation Layer）的類來管理。UIView本身，更像是一個CALayer的管理器，訪問它的跟繪圖和跟坐標有關(guān)的屬性，例如frame，bounds等等，實際上內(nèi)部都是在訪問它所包含的CALayer的相關(guān)屬性。
在iOS中CALayer的設(shè)計主要是了為了內(nèi)容展示和動畫操作，CALayer本身并不包含在UIKit中，它不能響應(yīng)事件。由于CALayer在設(shè)計之初就考慮它的動畫操作功能，CALayer很多屬性在修改時都能形成動畫效果，這種屬性稱為“隱式動畫屬性”。但是對于UIView的根圖層而言屬性的修改并不形成動畫效果，因為很多情況下根圖層更多的充當容器的做用，如果它的屬性變動形成動畫效果會直接影響子圖層。另外，UIView的根圖層創(chuàng)建工作完全由iOS負責(zé)完成，無法重新創(chuàng)建，但是可以往根圖層中添加子圖層或移除子圖層。
二、簡單使用
UIView之所以能夠顯示，完全是因為內(nèi)部的CALayer對象。因此，通過操作這個CALayer對象，可以很方便地調(diào)整UIView的一些界面屬性，比如：陰影、圓角大小、邊框?qū)挾群皖伾取?/p>
新建一個項目，在storyboard中添加一個view.
1.通過layer設(shè)置邊框的寬度和顏色
#import "YYViewController.h"
@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@end
@implementation YYViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//設(shè)置邊框的寬度為20
self.customView.layer.borderWidth=20;
//設(shè)置邊框的顏色
self.customView.layer.borderColor=[UIColor greenColor].CGColor;
}
@end
2.通過layer設(shè)置邊框為圓角
//設(shè)置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];
//設(shè)置邊框的寬度為20
self.customView.layer.borderWidth=5;
//設(shè)置邊框的顏色
self.customView.layer.borderColor=[UIColor blackColor].CGColor;
//設(shè)置layer的圓角
self.customView.layer.cornerRadius=20;
//在view的圖層上添加一個image，contents表示接受內(nèi)容
self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
}
@end
說明：contents是id類型，可以接受內(nèi)容，上面的實例讓layer顯示一張圖片，仔細觀察可以發(fā)現(xiàn)四個圓角的部分露了一個角出來。
產(chǎn)生的原因說明：
customview上的根layer
UIimage的圖層
添加后
那是因為設(shè)置的image不是展示在主圖層上的，而是顯示在子圖層上的。可以通過設(shè)置一個范圍，設(shè)置超出主圖層的部分把它給剪切掉。
有以下兩種方法，建議使用layer中的方法（第二種）self.customView.layer.masksToBounds=YES;
- (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的圖層上添加一個image，contents表示接受內(nèi)容
self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
}
注意：layer中不能直接接受UI框架中的東西
4.設(shè)置陰影
設(shè)置陰影，不光需要設(shè)置陰影顏色，還應(yīng)該設(shè)置陰影的偏移位和透明度。
因為如果不設(shè)置偏移位的話，那么陰影和layer完全重疊，且默認透明度為0（即完全透明）。
- (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;
}
補充說明：如果設(shè)置了超過主圖層的部分減掉，則設(shè)置陰影不會有顯示效果。\
- (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的圖層上添加一個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;
}
把剪切超出主圖層部分的代碼注釋掉之后的顯示效果
- (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的圖層上添加一個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;
}
5.只要繼承自uiview的都有l(wèi)ayer屬性，下面以圖片為例進行說明。
在storyboard中新添加一張圖片。
簡單設(shè)置示例
#import "YYViewController.h"
@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
@end
@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;
}
設(shè)置bounds屬性，在設(shè)置時需要去除掉storyboard中的自動布局屬性。
設(shè)置圖片的形變屬性（transform）
@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三個方向）
self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
}
通過uiview設(shè)置（2D效果）
通過layer設(shè)置（3D效果）
使用KVC進行設(shè)置
#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設(shè)置（2D效果）
// self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
//通過layer來設(shè)置（3D效果,x，y，z三個方向）
// 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è)置在某一個方向上的移動，可以參考下面的代碼
//在x的方向上向左移動100
[self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
}
查看蘋果的官方文檔，下面的屬性都可以通過KVC進行設(shè)置。
旋轉(zhuǎn)一個弧度
@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三個方向）
// 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è)置在某一個方向上的移動，可以參考下面的代碼
// //在x的方向上向左移動100
// [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
//旋轉(zhuǎn)
self.iconView.layer.transform=CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);
}
補充：三維坐標系
相關(guān)文章
UIPageViewController實現(xiàn)的左右滑動界面
這篇文章主要為大家詳細介紹了UIPageViewController實現(xiàn)的左右滑動界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要給大家介紹了關(guān)于iOS富文本的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
iOS使用WKWebView加載HTML5不顯示屏幕寬度的問題解決
這篇文章主要介紹了iOS使用WKWebView加載HTML5不顯示屏幕寬度的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要給大家介紹了關(guān)于iOS自動進行View標記的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對各位iOS開發(fā)者們具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
解析iOS應(yīng)用的UI開發(fā)中懶加載和xib的簡單使用方法
這篇文章主要介紹了解析iOS應(yīng)用的UI開發(fā)中懶加載和xib的簡單使用方法,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-01-01
什么是觀察者模式 什么是觀察者模式？你曾經(jīng)訂閱過報紙嗎？在訂閱報紙的時候，你不用去任何地方，只需要將你的個人地址信息以及訂閱信息告訴出版社，出版社就知道如何將相關(guān)報紙傳遞，本文給大家介紹ios觀察者模式，感興趣的朋友一起看看吧2015-12-12
ios swift3.0實現(xiàn)二維碼掃描、生成、識別示例代碼
本篇文章主要介紹了ios swift3.0實現(xiàn)二維碼掃描、生成、識別示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-02-02
這篇文章主要介紹了IOS HTTP請求的常見狀態(tài)碼總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-02-02
大家在用IOS開發(fā)項目的時候，經(jīng)常出現(xiàn)鍵盤彈出遮擋輸入框問題，小編給大家整理的這個問題的處理方法，一起學(xué)習(xí)下。2018-01-01
iOS開發(fā)實現(xiàn)搜索框(UISearchController)
這篇文章主要為大家詳細介紹了iOS開發(fā)實現(xiàn)搜索框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08