当前位置：首页 > article >正文

UIView 与 CALayer 的联系和区别

article 2025/2/24 3:39:18

今天说一下UIView 与 CALayer

一、UIView 和 CALayer 的关系

在 iOS 开发中，UIView 是用户界面的基础，它负责处理用户交互和绘制内容，而 CALayer 是 UIView 内部用于显示内容的核心图层（Layer）。每个 UIView 内部都有一个 CALayer 实例，负责管理其外观。

UIView 负责：
- 事件响应（如触摸事件）
- 视图管理（如添加子视图、布局）
- 交互动画
CALayer 负责：
- 处理底层的图像绘制
- 提供丰富的视觉效果（如阴影、圆角、边框）
- 高效的图形渲染和动画性能优化

UIView 本质上是 CALayer 的封装，它提供了更高级的接口，使开发者能够方便地管理 UI 组件，而 CALayer 提供了更强大的低级绘制能力。

二、UIView 和 CALayer 的主要区别

特性	`UIView`	`CALayer`
作用	处理用户交互、管理子视图	负责显示内容、绘制图像
事件处理	能响应触摸事件	不能直接响应事件
层级关系	可以添加子视图 (`addSubview:`)	只能添加子层 (`addSublayer:`)
动画支持	UIView Animation	Core Animation（更底层，更高效）
内容渲染	依赖于 `CALayer`	直接渲染像素
性能	较高（封装较多）	更高效（直接操作 GPU）
阴影、圆角	部分支持，但性能较低	直接支持，性能更高

三、CALayer 的常见功能

CALayer 主要用于控制视图的视觉效果，包括阴影、圆角、边框、渐变、3D 变换等。以下是 CALayer 的一些常见属性和用法：

1. 圆角 (`cornerRadius`)

CALayer 提供 cornerRadius 属性，用于设置圆角：

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
view.backgroundColor = [UIColor blueColor];
view.layer.cornerRadius = 20;
view.layer.masksToBounds = YES;

cornerRadius 让 CALayer 变得更圆滑。
masksToBounds = YES 确保子视图不会超出 cornerRadius 限制。

⚠️ 注意：masksToBounds = YES 会裁剪子视图，但同时也会影响阴影效果，导致 shadow 无法生效。

2. 阴影 (`shadow`)

CALayer 允许为视图添加阴影效果：

view.layer.shadowColor = [UIColor blackColor].CGColor;
view.layer.shadowOffset = CGSizeMake(3, 3);
view.layer.shadowOpacity = 0.5;
view.layer.shadowRadius = 5;

shadowColor：阴影颜色
shadowOffset：阴影偏移量
shadowOpacity：阴影透明度
shadowRadius：阴影模糊半径

注意： masksToBounds = YES 会裁剪阴影，导致阴影不可见。如果要同时使用 cornerRadius 和 shadow，可以使用 UIView 的 shadowPath：

view.layer.shadowPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds cornerRadius:20].CGPath;

这样可以手动设置阴影路径，避免 masksToBounds 影响阴影显示。

3. 边框 (`border`)

CALayer 提供 borderWidth 和 borderColor 让视图添加边框，太常用，也没啥注意的，不举例子了

4. 透明度 (`opacity`)

CALayer 允许控制透明度：

view.layer.opacity = 0.5; // 0.0 完全透明，1.0 不透明

与 UIView 的 alpha 类似，但 opacity 只作用于 CALayer，不会影响 UIView 的交互事件。

5. 变换 (`transform`)

CALayer 提供 transform 属性支持 3D 变换：

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
view1.backgroundColor = UIColor.redColor;
[self.view addSubview:view1];
    
CATransform3D rotate = CATransform3DMakeRotation(M_PI / 4, 0, 0, 1);
view1.layer.transform = rotate;

以上就实现了旋转45度（π/4），还可以可以实现缩放、平移等复杂动画，可自己试试。

6. 透明背景 (`backgroundColor`)

CALayer 允许直接设置 backgroundColor：

view.layer.backgroundColor = [UIColor greenColor].CGColor;

此代码实际效果和view.backgroundColor = UIColor.greenColor是一样的，UIView 的 backgroundColor 其实是封装的 CALayer 的 backgroundColor。

7. 渐变色 (`CAGradientLayer`)

使用 CAGradientLayer 可以实现渐变背景：

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = view.bounds;
gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(1, 1);
[view.layer addSublayer:gradientLayer];

8. 组动画 (`CAAnimationGroup`)

CALayer 的动画比 UIView 的 animation 更强大，例如：

CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scale.fromValue = @1.0;
scale.toValue = @1.5;
scale.duration = 0.5;

CABasicAnimation *fade = [CABasicAnimation animationWithKeyPath:@"opacity"];
fade.fromValue = @1.0;
fade.toValue = @0.5;
fade.duration = 0.5;

CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[scale, fade];
group.duration = 0.5;

[view.layer addAnimation:group forKey:@"groupAnimation"];

这样可以同时实现缩放+透明度变化。

四、总结

方面	`UIView`	`CALayer`
作用	处理用户交互，管理子视图	负责绘制内容、动画、阴影、渐变等
事件响应	能处理触摸事件	不能直接处理触摸事件
动画	`UIView.animateWithDuration`	`Core Animation`（更高效）
视觉特效	部分支持（圆角、阴影）	更强大（渐变、3D 变换、阴影优化）