1、CALayer 有一個(gè)屬性叫做contents拓哺,這個(gè)屬性的類型被定義為id,意味著它可以是任何類型的對(duì)象脖母。在這種情況下士鸥,你可以給contents屬性賦任何值,你的app仍然能夠通過(guò)編譯谆级。但是烤礁,在實(shí)踐中,如果你給contents賦的不是CGImage肥照,那么你得到的圖層將是空白的脚仔。
2、通過(guò)一個(gè)實(shí)例給圖層的contents賦值一張圖片
//
// ViewController.m
// 002-layerView
//
// Created by freedom on 2016/12/15.
// Copyright ? 2016年 Revan. All rights reserved.
//
#import "ViewController.h"
//#import <QuartzCore/QuartzCore.h>
@interface ViewController ()
/**
* layerView
*/
@property (nonatomic, strong) UIView *layerView;
/**
* blueLayer
*/
//@property (nonatomic, strong) CALayer *blueLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 背景顏色
self.view.backgroundColor = [UIColor darkGrayColor];
// 圖片
UIImage *img = [UIImage imageNamed:@"img"];
// View
self.layerView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
self.layerView.backgroundColor = [UIColor whiteColor];
// 給視圖的圖層設(shè)置圖片
self.layerView.layer.contents = (__bridge id _Nullable)(img.CGImage);
self.layerView.contentMode = UIViewContentModeScaleAspectFit;
//設(shè)置視圖的模式
self.layerView.layer.contentsGravity = kCAGravityCenter;
// self.layerView.layer.contentsScale = img.scale;//[UIScreen mainScreen].scale;
//圖層內(nèi)容放大
// self.layerView.layer.contentsScale = 0.5;
[self.view addSubview:self.layerView];
//blueLayer
// self.blueLayer = [CALayer layer];
// self.blueLayer.frame = CGRectMake(50, 50, 100, 100);
// self.blueLayer.backgroundColor = [UIColor blueColor].CGColor;
// [self.layerView.layer addSublayer:self.blueLayer];
}
@end
3舆绎、屬性contentGravity
CALayer與 contentMode 對(duì)應(yīng)的屬性叫做 contentsGravity鲤脏,但是它是一個(gè)NSString類型,而不是像對(duì)應(yīng)的UIKit部分吕朵,那里面的值是枚舉猎醇。contentsGravity 可選的常量有一下一些:
kCAGravityCenter
kCAGravityTop
kCAGravityBottom
kCAGravityLeft
kCAGravityRight
kCAGravityTopLeft
kCAGravityTopRight
kCAGravityBottomLeft
kCAGravityBottomRight
kCAGravityResize
kCAGravityResizeAspect
kCAGravityResizeAspectFill
和contentmode一樣,contentsGravity的目的是為了決定內(nèi)容在圖層的邊界中怎么對(duì)齊努溃,我們將使用kCAGravityResizeAspect,它的效果等同于UIViewContentModeScaleAspectFit硫嘶,同時(shí)它還能在圖層等比例拉伸以適應(yīng)圖層的邊界
//設(shè)置視圖圖層的模式
self.layerView.layer.contentsGravity = kCAGravityCenter;
4、maskToBounds
- 1茅坛、UIView有一個(gè)叫做 clipsToBounds 的屬性可以用來(lái)決定是否顯示超出邊界的內(nèi)容
- 2音半、CALayer對(duì)應(yīng)的屬性叫做maskTobounds,把它設(shè)置為YES,就會(huì)切除超出部分
5贡蓖、contentsRect
- 1、CALayer的contentsRect 屬性允許我們?cè)趫D層邊框里顯示寄宿圖的一個(gè)子域煌茬。這涉及到圖片是如何顯示和拉伸的斥铺,所以要比contentsGravity靈活多了
- 2、和bounds坛善,frame不同晾蜘,contentsRect不是按點(diǎn)來(lái)計(jì)算的邻眷,它使用了單位坐標(biāo),單位坐標(biāo)指定在0~1之間剔交,是一個(gè)相對(duì)值(像素和點(diǎn)就是絕對(duì)值)肆饶,所以是相對(duì)與寄宿圖的尺寸的。
- 3岖常、默認(rèn)的contentsRect 是{0, 0, 1, 1}驯镊,這意味著整個(gè)寄宿圖默認(rèn)都是可見的,如果我們指定一個(gè)小一點(diǎn)的矩形竭鞍,圖片就會(huì)別裁剪
QQ20161220-0@2x.png
- 4板惑、給contentsRect設(shè)置一個(gè)負(fù)數(shù)的原點(diǎn) 或者是 設(shè)置尺寸大于{1,1}的尺寸也是可以的偎快,這種情況下冯乘,最外面的像素會(huì)被拉伸以填充剩下的區(qū)域
- 5、contentsRect 在app中最有趣的地方在于一個(gè)叫做image sprites(圖片拼合)的用法
- 6晒夹、典型地裆馒,圖片拼合后可以打包整合到一張大圖上一次性載入。相比多次載入不同的圖片丐怯,這樣做能夠帶來(lái)很多方面的好處:
- 內(nèi)存使用
- 載入時(shí)間
- 渲染性能
contentsRect實(shí)例
原圖
QQ20161220-0@2x.png
#import "ViewController.h"
//#import <QuartzCore/QuartzCore.h>
@interface ViewController ()
/**
* iglooView
*/
@property (nonatomic, strong) UIView *iglooView;
/**
* coneView
*/
@property (nonatomic, strong) UIView *coneView;
/**
* anchorView
*/
@property (nonatomic, strong) UIView *anchorView;
/**
* shipView
*/
@property (nonatomic, strong) UIView *shipView;
/**
* blueLayer
*/
@property (nonatomic, strong) CALayer *blueLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// 背景顏色
self.view.backgroundColor = [UIColor darkGrayColor];
//iglooView
self.iglooView = [[UIView alloc] initWithFrame:CGRectMake(10, 100, 100, 100)];
self.iglooView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.iglooView];
//coneView
self.coneView = [[UIView alloc] initWithFrame:CGRectMake(120, 100, 100, 100)];
self.coneView.backgroundColor = [UIColor blueColor];
[self.view addSubview:self.coneView];
//anchorView
self.anchorView = [[UIView alloc] initWithFrame:CGRectMake(10, 210, 100, 100)];
self.anchorView.backgroundColor = [UIColor orangeColor];
[self.view addSubview:self.anchorView];
//shipView
self.shipView = [[UIView alloc] initWithFrame:CGRectMake(120, 210, 100, 100)];
self.shipView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:self.shipView];
// 圖片
UIImage *img = [UIImage imageNamed:@"hc"];
[self addSpriteImage:img withContentRect:CGRectMake(0, 0, 0.5, 0.5) toLayer:self.iglooView.layer];
[self addSpriteImage:img withContentRect:CGRectMake(0.5, 0, 0.5, 0.5) toLayer:self.coneView.layer];
[self addSpriteImage:img withContentRect:CGRectMake(0, 0.5, 0.5, 0.5) toLayer:self.anchorView.layer];
[self addSpriteImage:img withContentRect:CGRectMake(0.5, 0.5, 0.5, 0.5) toLayer:self.shipView.layer];
}
// 拼合圖片的方法
- (void)addSpriteImage:(UIImage *) image withContentRect:(CGRect) rect toLayer:(CALayer *) layer {
// 設(shè)置圖層contents
layer.contents = (__bridge id _Nullable)(image.CGImage);
// 設(shè)置圖片顯示模式
layer.contentsGravity = kCAGravityResizeAspect;
// set contentsRect
layer.contentsRect = rect;
// layer.contentsCenter = rect;
}
剪切后的圖片
QQ20161220-1@2x.png