CALayer 是一个很经常使用的到的 Object,很常用,也很重要,同时又有比较多的属性,嗯,一定要详细了解下。
CALayer 的原理很难懂,由于我目前只注重运用,所以就说那些在实际开发中能用到的一些地方。
如果要更改 UIView 的 CALayer,要引用:#import <QuartzCore/QuartzCore.h>.
下面先推荐两篇文章: 文章 1:原理介绍的比较详细; 2:官方文章
{
[super viewDidLoad];
UIView *viewSample = [[UIView alloc] init];
[self.view addSubview:viewSample];
viewSample.backgroundColor = [UIColor greenColor];
viewSample.frame = CGRectMake(100, 100, 400, 400);
//Test 1 阴影
//viewSample.layer.shadowPath = [UIBezierPath bezierPathWithRect:viewSample.bounds].CGPath;
viewSample.layer.shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 400, 400)].CGPath;
viewSample.layer.masksToBounds = NO;
viewSample.layer.shadowOffset = CGSizeMake(10, 10);
viewSample.layer.shadowRadius = 5;
viewSample.layer.shadowOpacity = 0.5;
//Test 2 边框
viewSample.layer.borderWidth = 2;
viewSample.layer.borderColor = [[UIColor redColor] CGColor];
//Test 3 masksToBounds
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(0,0, 500, 500)];
btn.backgroundColor = [UIColor lightGrayColor];
//[viewSample addSubview:btn];
//viewSample.layer.masksToBounds = true;
//Test 4 bounds
//viewSample.layer.bounds = CGRectMake(200, 200, 500, 500);
//Test 5
viewSample.layer.opacity = 0.5;
viewSample.layer.cornerRadius = 5;
CAGradientLayer
是用来生成两种或更多颜色平滑渐变的。用Core Graphics复制一个CAGradientLayer
并将内容绘制到一个普通图层的寄宿图也是有可能的,但是CAGradientLayer
的真正好处在于绘制使用了硬件加速。
基础渐变
我们将从一个简单的红变蓝的对角线渐变开始(见清单6.6).这些渐变色彩放在一个数组中,并赋给colors
属性。这个数组成员接受CGColorRef
类型的值(并不是从NSObject
派生而来),所以我们要用通过bridge转换以确保编译正常。
CAGradientLayer
也有startPoint
和endPoint
属性,他们决定了渐变的方向。这两个参数是以单位坐标系进行的定义,所以左上角坐标是{0, 0},右下角坐标是{1, 1}。代码运行结果如图6.6
清单6.6 简单的两种颜色的对角线渐变
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create gradient layer and add it to our container view
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.containerView.bounds;
[self.containerView.layer addSublayer:gradientLayer];
//set gradient colors
gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
//set gradient start and end points
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
}
@end
图6.6 用CAGradientLayer
实现简单的两种颜色的对角线渐变
多重渐变
如果你愿意,colors
属性可以包含很多颜色,所以创建一个彩虹一样的多重渐变也是很简单的。默认情况下,这些颜色在空间上均匀地被渲染,但是我们可以用locations
属性来调整空间。locations
属性是一个浮点数值的数组(以NSNumber
包装)。这些浮点数定义了colors
属性中每个不同颜色的位置,同样的,也是以单位坐标系进行标定。0.0代表着渐变的开始,1.0代表着结束。
locations
数组并不是强制要求的,但是如果你给它赋值了就一定要确保locations
的数组大小和colors
数组大小一定要相同,否则你将会得到一个空白的渐变。
清单6.7展示了一个基于清单6.6的对角线渐变的代码改造。现在变成了从红到黄最后到绿色的渐变。locations
数组指定了0.0,0.25和0.5三个数值,这样这三个渐变就有点像挤在了左上角。(如图6.7).
清单6.7 在渐变上使用locations
- (void)viewDidLoad {
[super viewDidLoad];
//create gradient layer and add it to our container view
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = self.containerView.bounds;
[self.containerView.layer addSublayer:gradientLayer];
//set gradient colors
gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id) [UIColor yellowColor].CGColor, (__bridge id)[UIColor greenColor].CGColor];
//set locations
gradientLayer.locations = @[@0.0, @0.25, @0.5];
//set gradient start and end points
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
}
locations
构造偏移至左上角的三色渐变