天天看點

iOS開發 - CALayer圖層

CALayer的基本使用

在iOS中。你能看得見摸得着的東西基本上都是UIView。比方一個button、一個文本标簽、一個文本輸入框、一個圖示等等。這些都是UIView

事實上UIView之是以能顯示在螢幕上,全然是由于它内部的一個圖層

在建立UIView對象時,UIView内部會自己主動建立一個圖層(即CALayer對象)。通過UIView的layer屬性能夠訪問這個層

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

當UIView須要顯示到螢幕上時,會調用drawRect:方法進行畫圖,而且會将全部内容繪制在自己的圖層上,畫圖完畢後,系統會将圖層複制到螢幕上,于是就完畢了UIView的顯示

換句話說,UIView本身不具備顯示的功能,是它内部的層才有顯示功能

通過操作CALayer對象,能夠非常友善地調整UIView的一些外觀屬性,比方:

陰影

圓角大小

邊框寬度和顔色

… …

還能夠給圖層加入動畫,來實作一些比較炫酷的效果

CALayer的屬性

//寬度和高度
@property CGRect bounds;
//位置(預設指中點。詳細由anchorPoint決定)
@property CGPoint position;
//錨點(x,y的範圍都是0-1)。決定了position的含義
@property CGPoint anchorPoint;
//背景顔色(CGColorRef類型)
@property CGColorRef backgroundColor;
//形變屬性
@property CATransform3D transform;
           
//邊框顔色(CGColorRef類型)
@property CGColorRef borderColor;

//邊框寬度
@property CGFloat borderWidth;

//圓角半徑
@property CGFloat cornerRadius;

//内容(比方設定為圖檔CGImageRef)
@property(retain) id contents;
           

關于CALayer的疑惑

首先

CALayer是定義在QuartzCore架構中的(Core Animation)

CGImageRef、CGColorRef兩種資料類型是定義在CoreGraphics架構中的

UIColor、UIImage是定義在UIKit架構中的

其次

QuartzCore架構和CoreGraphics架構是能夠跨平台使用的,在iOS和Mac OS X上都能使用

可是UIKit僅僅能在iOS中使用

為了保證可移植性,QuartzCore不能使用UIImage、UIColor,僅僅能使用CGImageRef、CGColorRef

UIView和CALayer的選擇

通過CALayer,就能做出跟UIView一樣的界面效果

既然CALayer和UIView都能實作同樣的顯示效果,那到底該選擇誰好呢?

事實上,對照CALayer,UIView多了一個事件處理的功能。

也就是說。CALayer不能處理使用者的觸摸事件。而UIView能夠

是以,假設顯示出來的東西須要跟使用者進行互動的話,用UIView;假設不須要跟使用者進行互動,用UIView或者CALayer都能夠

當然。CALayer的性能會高一些,由于它少了事件處理的功能,更加輕量級

position和anchorPoint介紹

//CALayer有2個非常重要的屬性:position和anchorPoint

@property CGPoint position;
用來設定CALayer在父層中的位置
以父層的左上角為原點(0, 0)

@property CGPoint anchorPoint;
稱為“定位點”、“錨點”
決定着CALayer身上的哪個點會在position屬性所指的位置
以自己的左上角為原點(0, 0)
它的x、y取值範圍都是0~1,預設值為(0.5, 0.5),意味着錨點在layer的中間
           

anchorPoint(示意圖)

iOS開發 - CALayer圖層

position和anchorPoint

iOS開發 - CALayer圖層

隐式動畫

每個UIView内部都預設關聯着一個CALayer,我們可用稱這個Layer為Root Layer(根層)

//能夠通過動畫事務(CATransaction)關閉預設的隐式動畫效果
[CATransaction begin];
[CATransaction setDisableActions:YES];
self.myview.layer.position = CGPointMake(10, 10);
[CATransaction commit];           

CALayer圖層執行個體

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *redView;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@end

@implementation ViewController

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

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    [UIView animateWithDuration:1 animations:^{

         //縮放
        _imageView.layer.transform = CATransform3DMakeRotation(M_PI, 1, 1, 0);

         //平移
        _imageView.layer.transform = CATransform3DMakeTranslation(200, 200, 0);

         //縮放
        _imageView.layer.transform = CATransform3DMakeScale(1, 0.5, 1);

     //利用KVC改變形變
     NSValue *rotation = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI, 1, 1, 0)];

        [_imageView.layer setValue:rotation forKeyPath:@"transform"];

        [_imageView.layer setValue:@M_PI forKeyPath:@"transform.rotation"];

        [_imageView.layer setValue:@0.5 forKeyPath:@"transform.scale"];

        // 平移x軸
        [_imageView.layer setValue:@200 forKeyPath:@"transform.translation.x"];


    }];
}

- (void)imageLayer
{
    // 圓形裁剪
    _imageView.layer.cornerRadius = 50;

    // 超出layer邊框的全部裁剪掉
    _imageView.layer.masksToBounds = YES;

    _imageView.layer.borderColor = [UIColor whiteColor].CGColor;
    _imageView.layer.borderWidth = 2;
}

- (void)viewLayer
{
    // 設定陰影透明度
    _redView.layer.shadowOpacity = 1;

    // 設定陰影顔色
    _redView.layer.shadowColor = [UIColor yellowColor].CGColor;

    // 設定陰影圓角半徑
    _redView.layer.shadowRadius = 10;

    // 設定圓角半徑
    _redView.layer.cornerRadius = 50;

    // 設定邊框半徑
    _redView.layer.borderColor = [UIColor whiteColor].CGColor;

    // 設定邊框半徑
    _redView.layer.borderWidth = 2;
}

@end           

自己定義塗層

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // 建立一個圖層
    CALayer *layer = [CALayer layer];

    // 設定尺寸
    layer.bounds = CGRectMake(0, 0, 100, 100);

    // 設定位置
    layer.position = CGPointMake(100, 100);

    // 設定顔色
    layer.backgroundColor = [UIColor redColor].CGColor;

    // 設定内容
    layer.contents = (__bridge id)[UIImage imageNamed:@"picture.png"].CGImage;


    [self.view.layer addSublayer:layer];

}
@end