iOS開發——圖形程式設計OC篇&（一）CALayer介紹與基本使用
阿新 • • 發佈：2019-01-22
在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 }
補充：三維座標系
基本使用