CALayer 和 CAGradientLayer简单使用

来源：互联网发布：淘宝免费视频教程编辑：程序博客网时间：2024/05/17 01:22

CALayer

CALayer 是一个很经常使用的到的 Object，很常用，也很重要，同时又有比较多的属性，嗯，一定要详细了解下。

CALayer 的原理很难懂，由于我目前只注重运用，所以就说那些在实际开发中能用到的一些地方。

如果要更改 UIView 的 CALayer，要引用：#import <QuartzCore/QuartzCore.h>.

下面先推荐两篇文章: 文章 1:原理介绍的比较详细; 2:官方文章

为什么说 CALayer 很重要呢：

1. 每个UIView 都有 CALayer，即 UIView.layer，同时 UIView是iOS系统中界面元素的基础，所有的界面元素都是继承自它，所以，CALayer 应用很广泛

2. CALayer 能够对 UIView 做许多设定，如：阴影、边框、圆角和透明效果等，且这些设定都是很有用的

下面就逐个过下 CALayer 的一些重要属性:

1. shadowPath : 设置 CALayer 背景(shodow)的位置

2. shadowOffset : shadow 在 X 和 Y 轴上延伸的方向，即 shadow 的大小

3. shadowOpacity : shadow 的透明效果

4. shadowRadius : shadow 的渐变距离，从外围开始，往里渐变 shadowRadius 距离

5. masksToBounds : 很重要的属性，可以用此属性来防止子元素大小溢出父元素，如若防止溢出，请设为 true

6. borderWidth 和 boarderColor : 边框颜色和宽度，很常用

7. bounds : 对于我来说比较难的一个属性，测了半天也没完全了解，只知道可以用来控制 UIView 的大小，但是不能控制位置

8. opacity : UIView 的透明效果

9. cornerRadius : UIView 的圆角

测试代码：

- (void)viewDidLoad
{
    [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);}

图6.7 用locations构造偏移至左上角的三色渐变

0 0