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類型) //邊框顏色(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(示意圖)
position和anchorPoint
隱式動畫
每個UIView內部都默認關聯著一個CALayer，我們可用稱這個Layer為Root Layer（根層）
全部的非Root Layer。也就是手動創建的CALayer對象。都存在著隱式動畫
什麽是隱式動畫？
當對非Root Layer的部分屬性進行改動時。默認會自己主動產生一些動畫效果
而這些屬性稱為Animatable Properties(可動畫屬性)
列舉幾個常見的Animatable Properties：
bounds：用於設置CALayer的寬度和高度。改動這個屬性會產生縮放動畫
backgroundColor：用於設置CALayer的背景色。改動這個屬性會產生背景色的漸變動畫
position：用於設置CALayer的位置。改動這個屬性會產生平移動畫
//能夠通過動畫事務(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];
}
@endiOS開發 - CALayer圖層