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)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開發UI篇—CAlayer簡介

繼續閱讀

iOS中UITableview實作跨區域拖動效果的實作

設計比較好，有助于學習的Github上的iOS App源碼 (中文)

Cocoa的MVC架構分析

iOS上的http請求：get、post以及同步、異步

Swift中去掉字元串格式數字小數點後多餘的0 （自寫）

iOS - Modal後控制器的關系及 modal後不移除後面的控件

iOS 為什麼必須在主線程中操作UI

oc中的copy與mutableCopy

copy與mutableCopy 記住：

[學習筆記—Objective-C]《Objective-C 程式設計第6版》第六章選擇結構課後題6-4&6-6&6-7

AppCode的使用

iOS FDMB添加新字段

iOS開發之送出App前需要準備的材料

iOS APP送出上架最新流程

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

今日頭條iOS用戶端啟動速度優化技術調研實測資料