圖層CALayer和視圖UIView

視圖:

一個視圖就是在屏幕上顯示的一個矩形塊(比如圖片,文本、按鈕),它能夠和用戶交互。視圖之間可以互相嵌套,父視圖可以管理子視圖的層級關系。

圖層:

和視圖概念類似同樣也可以包含一些內(nèi)容(像圖片,文本、背景色),能夠相互嵌套并管理子圖層的一種層級關系。和UIView最大的不同是CALayer不處理用戶的交互。

區(qū)別與聯(lián)系

每個視圖都有一個相關聯(lián)的root圖層(自動創(chuàng)建),UIView對它們的一個封裝和管理,圖層才是真正在屏幕上顯示和做動畫的。

  • 管理:當子視圖在層級關系中添加或者被移除的時候,他們關聯(lián)的圖層也同樣對應在層級關系樹當中有相同的操作
  • 顯示:當UIView需要顯示到屏幕上時,會調(diào)用drawRect:方法進行繪圖,將所有內(nèi)容繪制在自己的圖層上后,系統(tǒng)會將圖層拷貝到屏幕上,于是就完成了UIView的顯示。

使用圖層關聯(lián)的視圖而不是CALayer的好處在于,你能在使用所有CALayer底層特性的同時,也可以使用UIView的高級API(比如自動排版,布局和事件處理)。

CALayer的一些常用屬性

通過操作這個CALayer對象,可以很方便地調(diào)整UIView的一些界面屬性,比如:陰影、圓角大小、邊框?qū)挾群皖伾约?D變換等。

** 1. 設置陰影 **
設置陰影( 因為圖層的陰影繼承自內(nèi)容的外形,開啟了masksToBounds屬性,則設置陰影不會有顯示效果,用一個額外的視圖來解決陰影裁切的問題)
shadowOpacit 屬性陰影透明度 ,默認值(也就是0.0不可見)
shadowColor屬性控制著陰影的顏色,默認黑色
shadowOffset屬性控制著陰影的方向和距離,默認值是 {0, -3},橫向和縱向的位移。
shadowRadius屬性控制著陰影的模糊度,默認為0,陰影越模糊,圖層的深度看上去就會更明顯。
shadowPath屬性:
但是實時計算陰影也是一個非常消耗資源的,尤其是圖層有多個子圖層,每個圖層還有一個有透明效果的寄宿圖的時候。
如果你事先知道你的陰影形狀會是什么樣子的,你可以通過指定一個shadowPath來提高性能。

//create a square shadow
  CGMutablePathRef squarePath = CGPathCreateMutable();
  CGPathAddRect(squarePath, NULL, self.layerView1.bounds);
  self.layerView1.layer.shadowPath = squarePath; CGPathRelease(squarePath);

** 2. 設置圓角大小 、邊框?qū)挾群皖伾?**

 // 設置圖層角的曲率
  self.layerView1.layer.cornerRadius = 20.0f;
// 設置圖層的的邊框?qū)挾群瓦吙蝾伾? self.layerView1.layer.borderWidth = 5.0f;
self.layerView1.layer.borderColor = [UIColor  RedColor].CGColor;

** 3. 3D變換 **

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

** 4. 其他 **

//設置圖層的內(nèi)容顯示為一張圖片
layer.contents = image.CGImage;

//設置內(nèi)容的顯示方式為適應
view.contentMode = UIViewContentModeScaleAspectFit;
layer.contentsGravity = kCAGravityResizeAspect;

//設置 contentsScale 來匹配屏幕
layer.contentsScale = [UIScreen mainScreen].scale;

/設置超過父圖層的部分裁減掉
layer.masksToBounds = YES;
view.clipsToBounds = YES;

// 顯示子圖層的部分子區(qū)域
layer.contentsRect = rect;
// 設置圖層的拉伸區(qū)域
layer.contentsCenter = rect;


/* 改變圖層的顯示順序(但不能改變的事件的傳遞順序)給zPosition提高一個像素 (視圖都非常薄,0.1也能做到)
和UIView嚴格的二維坐標系不同,CALayer存在于一個三維空間當中。zPosition最實用的功能就是改變圖層的顯示順序了 */
 self.greenView.layer.zPosition = 1.0f;


// UIView有三個比較重要的布局屬性:frame,bounds和center,CALayer對應地叫做frame,bounds和position。

 //圖層的中點置
 mylayer.position=CGPointMake(100, 100);

// “錨點”決定著CALayer身上的哪個點會在position(中心位置),屬性所指的位置默認值為(0.5, 0.5)
 //設置錨點為(0,0)
 layer.anchorPoint=CGPointZero;

仿射變換(2D)

GAffineTransform中的“仿射”的意思是無論變換矩陣用什么值,圖層中平行的兩條線在變換之后任然保持平行

// CGAffineTransform實例:
CGAffineTransformMakeRotation(CGFloat angle)
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
//  將圖層旋轉(zhuǎn)45°
   CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_4);
   self.layerView.layer.affineTransform = transform;

透視投影(3D)

 CATransform3D transform = CATransform3DIdentity;
    //apply perspective
    transform.m34 = - 1.0 / 500.0;
    //rotate by 45 degrees along the Y axis
    transform = CATransform3DRotate(transform, M_PI_4, 0, 1, 0);
    //apply to layer
    self.layerView.layer.transform = transform;
}

隱式動畫

當對非Root Layer的部分屬性進行修改時,默認會自動產(chǎn)生一些動畫效果
而這些屬性稱為Animatable Properties(可動畫屬性)

列舉幾個常見的Animatable Properties:

  • bounds:用于設置CALayer的寬度和高度。修改這個屬性會產(chǎn)生縮放動畫
  • backgroundColor:用于設置CALayer的背景色。修改這個屬性會產(chǎn)生背景色的漸變動畫
  • position:用于設置CALayer的位置。修改這個屬性會產(chǎn)生平移動畫
 // 關閉隱式動畫:
1     [CATransaction begin];
2     [CATransaction setDisableActions:YES];
3     //隱式動畫
4     self.layer.bounds=CGRectMake(0, 0, 200, 60);
5     self.layer.backgroundColor=[UIColor yellowColor].CGColor;
6     [CATransaction commit];

  • 完成塊
    基于UIView的block的動畫允許你在動畫結(jié)束的時候提供一個完成的動作。CATranscation接口提供的+setCompletionBlock:方法也有同樣的功能。

專用圖層

** 1. CAShapeLayer **
CAShapeLayer是一個通過矢量圖形而不是bitmap來繪制的圖層子類,可以去構造任意形狀圖層。
** 2. CATextLayer **
UILabel的替代品,用CATextLayer來顯示一些文字
** 3. CATransformLayer **
CATransformLayer不同于普通的CALayer,因為它不能顯示它自己的內(nèi)容。只有當存在了一個能作用域子圖層的變換它才真正存在。CATransformLayer并不平面化它的子圖層,所以它能夠用于構造一個層級的3D結(jié)構
** 4. CAGradientLayer **
CAGradientLayer是用來生成兩種或更多顏色平滑漸變的。
** 5. CAReplicatorLayer **
CAReplicatorLayer的目的是為了高效生成許多相似的圖層。它會繪制一個或多個圖層的子圖層,并在每個復制體上應用不同的變換
** 6. CAEmitterLayer **
AEmitterLayer是一個高性能的粒子引擎,被用來創(chuàng)建實時例子動畫如:煙霧,火,雨等等這些效果。

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

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

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