iOS 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)viewDidLoad
11 {
12     [super viewDidLoad];
13     //設置邊框的寬度爲20
14     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)viewDidLoad
11 {
12     [super viewDidLoad];
13     //設置邊框的寬度爲20
14     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 YYViewController
10 
11 - (void)viewDidLoad
12 {
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 YYViewController
10 
11 - (void)viewDidLoad
12 {
13     [super viewDidLoad];
14 }
15 
16 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
17 {
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的方向上向左移動100
29     [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的方向上向左移動100
21 //    [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 CALayer講解

debug,release 和 distribution 的區別

iOS 保存數據的4種方式

copy, retain, assign , readonly , readwrite,strong,weak,nonatomic整理

iOS 下載圖片前如何預取圖片的大小

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結