iOS開發UI篇—CAlayer簡介

iOS開發UI篇—CAlayer簡介

iOS開發UI篇—CALayer簡介

 

1、簡單介紹

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

其實UIView之因此能顯示在屏幕上，徹底是由於它內部的一個圖層，在建立UIView對象時，UIView內部會自動建立一個圖層(即CALayer對象)，經過UIView的layer屬性能夠訪問這個層

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

當UIView須要顯示到屏幕上時，會調用drawRect:方法進行繪圖，而且會將全部內容繪製在本身的圖層上，繪圖完畢後，系統會將圖層拷貝到屏幕上，因而就完成了UIView的顯示

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

 

2、簡單使用

　　UIView之因此可以顯示，徹底是由於內部的CALayer對象。所以，經過操做這個CALayer對象，能夠很方便地調整UIView的一些界面屬性，好比：陰影、圓角大小、邊框寬度和顏色等。

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

 

　　1.經過layer設置邊框的寬度和顏色

#import "YYViewController.h"


@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;


@end


@implementation YYViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
    //設置邊框的寬度爲20
    self.customView.layer.borderWidth=20;
    //設置邊框的顏色
    self.customView.layer.borderColor=[UIColor greenColor].CGColor;
}


@end

　

2.經過layer設置邊框爲圓角

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

3.在layer上添加一張圖片 

#import "YYViewController.h"


@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;


@end


@implementation YYViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
    //設置邊框的寬度爲20
    self.customView.layer.borderWidth=5;
    //設置邊框的顏色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
    
    //設置layer的圓角
    self.customView.layer.cornerRadius=20;
    
    //在view的圖層上添加一個image，contents表示接受內容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
    
}
@end

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

產生的緣由說明：

               

customview上的根layer

  

UIimage的圖層

   

添加後

那是由於設置的image不是展現在主圖層上的，而是顯示在子圖層上的。能夠經過設置一個範圍，設置超出主圖層的部分把它給剪切掉。

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

- (void)viewDidLoad
{
    [super viewDidLoad];
    //設置邊框的寬度爲20
    self.customView.layer.borderWidth=5;
    //設置邊框的顏色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
    
    //設置layer的圓角
    self.customView.layer.cornerRadius=20;
    //設置超過子圖層的部分裁減掉
    //UI框架中使用的方法
//    self.customView.clipsToBounds=YES;
    self.customView.layer.masksToBounds=YES;
    
    //在view的圖層上添加一個image，contents表示接受內容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
}

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

 　　4.設置陰影

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

　　由於若是不設置偏移位的話，那麼陰影和layer徹底重疊，且默認透明度爲0（即徹底透明）。

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //設置陰影的顏色
    self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
    //設置陰影的偏移量，若是爲正數，則表明爲往右邊偏移
    self.customView.layer.shadowOffset=CGSizeMake(15, 5);
    //設置陰影的透明度(0~1之間，0表示徹底透明)
    self.customView.layer.shadowOpacity=0.6;
}

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

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //設置邊框的寬度爲20
    self.customView.layer.borderWidth=5;
    //設置邊框的顏色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
    
    //設置layer的圓角
    self.customView.layer.cornerRadius=20;
    //設置超過子圖層的部分裁減掉
    //UI框架中使用的方法
    //    self.customView.clipsToBounds=YES;
    self.customView.layer.masksToBounds=YES;
    
    //在view的圖層上添加一個image，contents表示接受內容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
    
    //設置陰影的顏色
    self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
    //設置陰影的偏移量，若是爲正數，則表明爲往右邊偏移
    self.customView.layer.shadowOffset=CGSizeMake(15, 5);
    //設置陰影的透明度(0~1之間，0表示徹底透明)
    self.customView.layer.shadowOpacity=0.6;
}

　　

把剪切超出主圖層部分的代碼註釋掉以後的顯示效果

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //設置邊框的寬度爲20
    self.customView.layer.borderWidth=5;
    //設置邊框的顏色
    self.customView.layer.borderColor=[UIColor blackColor].CGColor;
    
    //設置layer的圓角
    self.customView.layer.cornerRadius=20;
    //設置超過子圖層的部分裁減掉
    //UI框架中使用的方法
    //    self.customView.clipsToBounds=YES;
//    self.customView.layer.masksToBounds=YES;
    
    //在view的圖層上添加一個image，contents表示接受內容
    self.customView.layer.contents=(id)[UIImage imageNamed:@"me"].CGImage;
    
    //設置陰影的顏色
    self.customView.layer.shadowColor=[UIColor blackColor].CGColor;
    //設置陰影的偏移量，若是爲正數，則表明爲往右邊偏移
    self.customView.layer.shadowOffset=CGSizeMake(15, 5);
    //設置陰影的透明度(0~1之間，0表示徹底透明)
    self.customView.layer.shadowOpacity=0.6;
}

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

在storyboard中新添加一張圖片。

簡單設置示例

#import "YYViewController.h"


@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;


@end


@implementation YYViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //設置圖片layer的邊框寬度和顏色
    self.iconView.layer.borderColor=[UIColor brownColor].CGColor;
    self.iconView.layer.borderWidth=5;
    
    //設置layer的圓角
    self.iconView.layer.cornerRadius=20;
    //設置超過子圖層的部分裁減掉
       self.iconView.layer.masksToBounds=YES;
}

設置bounds屬性，在設置時須要去除掉storyboard中的自動佈局屬性。

       

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

@implementation YYViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{


    //經過uiview設置（2D效果）
//    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
    //經過layer來設置（3D效果,x，y，z三個方向）
    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
}

經過uiview設置（2D效果）

       

經過layer設置（3D效果）

       

使用KVC進行設置

#import "YYViewController.h"


@interface YYViewController ()
@property (weak, nonatomic) IBOutlet UIView *customView;
@property (weak, nonatomic) IBOutlet UIImageView *iconView;


@end


@implementation YYViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{


    //經過uiview設置（2D效果）
//    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
    //經過layer來設置（3D效果,x，y，z三個方向）
//    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
    
    //經過KVC來設置
    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
    [self.iconView.layer setValue:v forKeyPath:@"transform"];
    //若是是隻須要設置在某一個方向上的移動，能夠參考下面的代碼
    //在x的方向上向左移動100
    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
}

查看蘋果的官方文檔，下面的屬性均可以經過KVC進行設置。

旋轉一個弧度

@implementation YYViewController


- (void)viewDidLoad
{
    [super viewDidLoad];
}


-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{


    //經過uiview設置（2D效果）
//    self.iconView.transform=CGAffineTransformMakeTranslation(0, -100);
    //經過layer來設置（3D效果,x，y，z三個方向）
//    self.iconView.layer.transform=CATransform3DMakeTranslation(100, 20, 0);
    
    //經過KVC來設置
//    NSValue *v=[NSValue valueWithCATransform3D:CATransform3DMakeTranslation(100, 20, 0)];
//    [self.iconView.layer setValue:v forKeyPath:@"transform"];
//    //若是是隻須要設置在某一個方向上的移動，能夠參考下面的代碼
//    //在x的方向上向左移動100
//    [self.iconView.layer setValue:@(-100) forKeyPath:@"transform.translation.x"];
    
    //旋轉
    self.iconView.layer.transform=CATransform3DMakeRotation(M_PI_4, 1, 1, 0.5);
}

補充：三維座標系