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 }
補充:三維座標系