CALayer

1、CALayer簡(jiǎn)單介紹

1、在iOS中，你能看得見摸得著的東西基本上都是UIView，比如一個(gè)按鈕、一個(gè)文本標(biāo)簽、一個(gè)文本輸入框、一個(gè)圖標(biāo)等等，這些都是UIView

其實(shí)UIView之所以能顯示在屏幕上，完全是因?yàn)樗鼉?nèi)部的一個(gè)圖層

在創(chuàng)建UIView對(duì)象時(shí)，UIView內(nèi)部會(huì)自動(dòng)創(chuàng)建一個(gè)圖層(即CALayer對(duì)象)，通過UIView的layer屬性可以訪問這個(gè)層

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

當(dāng)UIView需要顯示到屏幕上時(shí)，會(huì)調(diào)用drawRect:方法進(jìn)行繪圖，并且會(huì)將所有內(nèi)容繪制在自己的圖層上，繪圖完畢后，系統(tǒng)會(huì)將圖層拷貝到屏幕上，于是就完成了UIView的顯示
換句話說，UIView本身不具備顯示的功能，是它內(nèi)部的層才有顯示功能

通過操作CALayer對(duì)象，可以很方便地調(diào)整UIView的一些外觀屬性，比如：陰影【如果設(shè)置了超過主圖層的部分減掉，則設(shè)置陰影不會(huì)有顯示效果；設(shè)置陰影，不光需要設(shè)置陰影顏色，還應(yīng)該設(shè)置陰影的偏移位和透明度。因?yàn)槿绻辉O(shè)置偏移位的話，那么陰影和layer完全重疊，且默認(rèn)透明度為0（即完全透明）】、圓角大小、邊框?qū)挾群皖伾⑦€可以給圖層添加動(dòng)畫，來實(shí)現(xiàn)一些比較炫酷的效果等等

2、CALayer是定義在QuartzCore框架中的，CGImageRef、CGColorRef兩種數(shù)據(jù)類型是定義在CoreGraphics框架中的；UIColor、UIImage是定義在UIKit框架中的
QuartzCore框架和CoreGraphics框架是可以跨平臺(tái)使用的，在iOS和MacOS X上都能使用（C語言編寫）但是UIKit只能在iOS中使用（Objective-C）
為了保證可移植性，QuartzCore不能使用UIImage、UIColor，只能使用CGImageRef、CGColorRef導(dǎo)入其他框架的方式: 選中項(xiàng)目, 在General中找 Linked Frameworks and Libraries添加對(duì)應(yīng)的框架

2、UIView和CALayer之間的區(qū)別

1、UIView是用來顯示內(nèi)容的，可以處理用戶事件。直接繼承UIResponser。
2、CALayer是用來繪制內(nèi)容的，不能處理用戶事件。直接集成NSObject。
3、 UIView和CALayer是相互依賴的關(guān)系。UIView依賴于calayer提供的內(nèi)容，CALayer依賴UIView提供的容器來顯示繪制的內(nèi)容。歸根到底CALayer是這一切的基礎(chǔ)，如果沒有CALayer，UIView自身也不會(huì)存在，UIView是一個(gè)特殊的CALayer實(shí)現(xiàn)，添加了響應(yīng)事件的能力。兩者之間是依存的關(guān)系.UIView可以通過subviews屬性訪問所有的子視圖，類似地，CALayer也可以通過sublayers屬性訪問所有的子層； UIView可以通過superview屬性訪問父視圖，類似地，CALayer也可以通過superlayer屬性訪問父層。如果一個(gè)控件是另外一個(gè)控件的子控件，那么這個(gè)控件的layer也是另一個(gè)控件的子layer
結(jié)論：UIView來自CALayer，高于CALayer，是CALayer高層實(shí)現(xiàn)與封裝。UIView的所有特性來源于CALayer支持。

3、CALayer的常用屬性

寬度和高度
@property CGRect bounds;

位置(默認(rèn)指中點(diǎn)，具體由anchorPoint決定)
@property CGPoint position;

錨點(diǎn)(x,y的范圍都是0-1)，決定了position的含義
@property CGPoint anchorPoint;

背景顏色(CGColorRef類型)
@propertyCGColorRefbackgroundColor;

形變屬性
@property CATransform3D transform;

邊框顏色(CGColorRef類型)
@property  CGColorRef  borderColor;

邊框?qū)挾?@property CGFloat borderWidth;

圓角半徑
@property CGFloat cornerRadius;

內(nèi)容(比如設(shè)置為圖片CGImageRef)
@property(retain) id contents;

說明：可以通過設(shè)置contents屬性給UIView設(shè)置背景圖片

self.view.layer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"123"].CGImage);  跨框架賦值需要進(jìn)行橋接

4、代碼示例

4.1CALayer的陰影效果

#import "ViewController.h"
@interface ViewController ()
@property (nonatomic,strong)  CALayer *myLayer;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    // 添加到控制器的視圖之中
    [self.view.layer addSublayer:self.myLayer];
    
    // 設(shè)置圖層的內(nèi)容
    self.myLayer.contents = (__bridge id _Nullable)([UIImage imageNamed:@"123"].CGImage);
    // 設(shè)置陰影的顏色
    self.myLayer.shadowColor = [UIColor blackColor].CGColor;
    // 設(shè)置陰影的便宜
    self.myLayer.shadowOffset = CGSizeMake(15, 10);
    // 設(shè)置陰影的不透明度
    self.myLayer.shadowOpacity = 0.6;
    // 設(shè)置邊角半徑
    self.myLayer.cornerRadius = 15;
    // 設(shè)置裁剪
    self.myLayer.masksToBounds = YES;
    // 設(shè)置邊框線的顏色
    self.myLayer.borderColor = [UIColor blackColor].CGColor;
    // 設(shè)置邊框線條的寬度
    self.myLayer.borderWidth = 5.0;
}
-(CALayer *)myLayer{

    if (_myLayer ==nil) {
        // 創(chuàng)建layer對(duì)象
        _myLayer = [CALayer layer];
        // 設(shè)置圖層的frame
        _myLayer.frame = CGRectMake(50, 100, 190, 145);
        // 設(shè)置背景顏色
        _myLayer.backgroundColor = [UIColor blackColor].CGColor;
        
        self.myLayer = _myLayer;
    }
    return _myLayer;
}
@end

4.1運(yùn)行效果

Snip20161106_1.png

設(shè)置陰影效果和裁剪邊角的效果是沖突的，如果設(shè)置裁剪邊角那么陰影效果無法實(shí)現(xiàn)；當(dāng)注釋掉裁剪邊框的效果，陰影效果才顯示

Snip20161106_2.png

4.2position和anchorPoint屬性

CALayer有2個(gè)非常重要的屬性：position和anchorPoint

@property CGPoint position;

用來設(shè)置CALayer在父層中的位置

以父層的左上角為原點(diǎn)(0, 0)

@property CGPoint anchorPoint;稱為“定位點(diǎn)”、“錨點(diǎn)”
決定著CALayer身上的哪個(gè)點(diǎn)會(huì)在position屬性所指的位置
以自己的左上角為原點(diǎn)(0, 0)，它的x、y取值范圍都是0~1，默認(rèn)值為（0.5, 0.5）


#import "ViewController.h"

@interface ViewController ()
@property (nonatomic,strong)  CALayer *myLayer;
@end
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    [self.view.layer addSublayer:self.myLayer];
   
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

    self.myLayer.anchorPoint = CGPointMake(0, 0);

}
-(CALayer *)myLayer{
    if (_myLayer ==nil) {
        _myLayer = [CALayer layer];
        _myLayer.frame = CGRectMake(100, 100, 100, 100);
        _myLayer.backgroundColor = [UIColor redColor].CGColor;
        self.myLayer = _myLayer;
    }
    return _myLayer;
}
@end
Untitled.gif

4.3隱式動(dòng)畫

每一個(gè)UIView內(nèi)部都默認(rèn)關(guān)聯(lián)著一個(gè)CALayer，我們可稱這個(gè)Layer為RootLayer（根層）
所有的非RootLayer，也就是手動(dòng)創(chuàng)建的CALayer對(duì)象，都存在著隱式動(dòng)畫
什么是隱式動(dòng)畫？
當(dāng)對(duì)非RootLayer的部分屬性進(jìn)行修改時(shí)，默認(rèn)會(huì)自動(dòng)產(chǎn)生一些動(dòng)畫效果而這些屬性稱為AnimatableProperties(可動(dòng)畫屬性)

列舉幾個(gè)常見的AnimatableProperties：
bounds：用于設(shè)置CALayer的寬度和高度。修改這個(gè)屬性會(huì)產(chǎn)生縮放動(dòng)畫
backgroundColor：用于設(shè)置CALayer的背景色。修改這個(gè)屬性會(huì)產(chǎn)生背景色的漸變動(dòng)畫
position：用于設(shè)置CALayer的位置。修改這個(gè)屬性會(huì)產(chǎn)生平移動(dòng)畫
?
可以通過動(dòng)畫事務(wù)(CATransaction)關(guān)閉默認(rèn)的隱式動(dòng)畫效果

[CATransactionbegin];
[CATransactionsetDisableActions:YES];
self.myview.layer.position= CGPointMake(10, 10);
[CATransactioncommit];

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic,strong)  CALayer *myLayer;
@end
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
   
    [self.view.layer addSublayer:self.myLayer];
   
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    // 關(guān)閉隱式動(dòng)畫
    self.myLayer.anchorPoint = CGPointMake(0, 0);
    // 執(zhí)行動(dòng)畫事務(wù)
    [CATransaction commit];
}
-(CALayer *)myLayer{
    if (_myLayer ==nil) {
        _myLayer = [CALayer layer];
        _myLayer.frame = CGRectMake(100, 100, 100, 100);
        _myLayer.backgroundColor = [UIColor redColor].CGColor;
        self.myLayer = _myLayer;
    }
    return _myLayer;
}
@end

效果圖

Untitled.gif
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果，實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜，今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,688評(píng)論 6贊 30
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果，實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫全貌。在這里你可以看...
    F麥子閱讀 5,261評(píng)論 5贊 13
  • 概覽 在iOS中隨處都可以看到絢麗的動(dòng)畫效果，實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫全貌。在這里你...
    被吹落的風(fēng)閱讀 1,702評(píng)論 1贊 2
  • 轉(zhuǎn)載:http://www.cnblogs.com/jingdizhiwa/p/5601240.html 1.ge...
    F麥子閱讀 1,863評(píng)論 0贊 1
  • 原文出處:http://blog.csdn.net/zhz459880251/article/details/50...
    F麥子閱讀 1,854評(píng)論 0贊 5

友情鏈接更多精彩內(nèi)容