iOS開發UI篇—CALayer簡介

標籤：

iOS開發UI篇—CALayer簡介  一、簡單介紹

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

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

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

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

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

 

二、簡單使用

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

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

 

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

 1 #import "YYViewController.h" 2  3 @interface YYViewController () 4 @property (weak, nonatomic) IBOutlet UIView *customView; 5  6 @end 7  8 @implementation YYViewController 9 10 - (void)viewDidLoad11 {12     [super viewDidLoad];13     //設定邊框的寬度為2014     self.customView.layer.borderWidth=20;15     //設定邊框的顏色16     self.customView.layer.borderColor=[UIColor greenColor].CGColor;17 }18 19 @end

　　

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

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

3.在layer上添加一張圖片 

 1 #import "YYViewController.h" 2  3 @interface YYViewController () 4 @property (weak, nonatomic) IBOutlet UIView *customView; 5  6 @end 7  8 @implementation YYViewController 9 10 - (void)viewDidLoad11 {12     [super viewDidLoad];13     //設定邊框的寬度為2014     self.customView.layer.borderWidth=5;15     //設定邊框的顏色16     self.customView.layer.borderColor=[UIColor blackColor].CGColor;17     18     //設定layer的圓角19     self.customView.layer.cornerRadius=20;20     21     //在view的圖層上添加一個image，contents表示接受內容22     self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;23     24 }25 @end

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

產生的原因說明：

               

customview上的根layer

  

UIimage的圖層

   

添加後

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

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

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

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

 　　4.設定陰影

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

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

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

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

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

　　

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

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

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

在storyboard中新添加一張圖片。

簡單設定樣本

 1 #import "YYViewController.h" 2  3 @interface YYViewController () 4 @property (weak, nonatomic) IBOutlet UIView *customView; 5 @property (weak, nonatomic) IBOutlet UIImageView *iconView; 6  7 @end 8  9 @implementation YYViewController10 11 - (void)viewDidLoad12 {13     [super viewDidLoad];14     15     //設定圖片layer的邊框寬度和顏色16     self.iconView.layer.borderColor=[UIColor brownColor].CGColor;17     self.iconView.layer.borderWidth=5;18     19     //設定layer的圓角20     self.iconView.layer.cornerRadius=20;21     //設定超過子圖層的部分裁減掉22        self.iconView.layer.masksToBounds=YES;23 }

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

       

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

 1 @implementation YYViewController 2  3 - (void)viewDidLoad 4 { 5     [super viewDidLoad]; 6 } 7  8 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 9 {10 11     //通過uiview設定（2D效果）12 //    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);13     //通過layer來設定（3D效果,x，y，z三個方向）14     self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);15 }

通過uiview設定（2D效果）

       

通過layer設定（3D效果）

       

使用KVC進行設定

 1 #import "YYViewController.h" 2  3 @interface YYViewController () 4 @property (weak, nonatomic) IBOutlet UIView *customView; 5 @property (weak, nonatomic) IBOutlet UIImageView *iconView; 6  7 @end 8  9 @implementation YYViewController10 11 - (void)viewDidLoad12 {13     [super viewDidLoad];14 }15 16 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event17 {18 19     //通過uiview設定（2D效果）20 //    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);21     //通過layer來設定（3D效果,x，y，z三個方向）22 //    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);23     24     //通過KVC來設定25     NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];26     [self.iconView.layer setValue:v forKeyPath:@"transform"];27     //如果是只需要設定在某一個方向上的移動，可以參考下面的代碼28     //在x的方向上向左移動10029     [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];30 }

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

旋轉一個弧度

 1 @implementation YYViewController 2  3 - (void)viewDidLoad 4 { 5     [super viewDidLoad]; 6 } 7  8 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 9 {10 11     //通過uiview設定（2D效果）12 //    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);13     //通過layer來設定（3D效果,x，y，z三個方向）14 //    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);15     16     //通過KVC來設定17 //    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];18 //    [self.iconView.layer setValue:v forKeyPath:@"transform"];19 //    //如果是只需要設定在某一個方向上的移動，可以參考下面的代碼20 //    //在x的方向上向左移動10021 //    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];22     23     //旋轉24     self.iconView.layer.transform=CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);25 }

補充：三維座標系

iOS開發UI篇—CALayer簡介