UIView 与 CALayer 的联系和区别

今天说一下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 变换、阴影优化）

• UIView 是更高层的 UI 组件，适用于普通 UI 开发。
• CALayer 提供更低级的图形绘制功能，适用于高性能动画、渐变、阴影等优化。

如果你需要更复杂的 UI 效果（如渐变、动画、3D 变换等），可以直接操作 CALayer 来优化性能！