移动应用中的Layer层——是什么、有哪些类型及工作原理

移动图形中的Layer是什么？

Layer——是图形系统的低级对象，存储屏幕片段的位图图像并管理其视觉属性：位置、大小、旋转、透明度、阴影和颜色。在iOS中，每个UIView都有一个内置的CALayer，可通过layer属性访问。开发人员可以直接使用layer，绕过UIView，以进行精细的渲染调整。

图层架构遵循Model-View-Controller模式，其中CALayer扮演Model的角色——它存储视觉属性的状态。Core Animation是Controller，管理状态之间过渡的动画。View（UIView）——是一个可选包装器，添加触摸处理和Auto Layout参与。

根据Apple WWDC 2024，现代iOS渲染管线使用Metal进行图层合成。每个CALayer被绘制到单独的缓冲区中，之后Core Animation将所有缓冲区合成为最终图像，考虑透明度和混合模式。

在Android中，图层的对应物是View和背景Drawable，但通过Canvas和RenderNode（Android 10+）可以进行直接的图形图层操作。理解layer的概念对于在两个平台上优化渲染非常重要。

Layer与View的区别

主要区别在于责任领域。View负责用户输入（触摸、手势）、定位（Auto Layout、frame）和生命周期。Layer专门负责视觉呈现：内容渲染、属性动画以及与其他图层的合成。

这种分离允许独立于View缓存图层的位图表示。如果图层没有变化，Core Animation使用缓存的帧而不调用drawRect。对于静态元素，这提供了显著的性能提升而无需更改代码。

iOS和Android中的主要图层类型

iOS提供了继承自CALayer的丰富类层次结构。每个子类针对特定场景进行了优化：显示文本、矢量图形、渐变或3D变换。选择正确的图层类型直接影响渲染性能。

• CALayer——用于带背景色、边框和阴影的矩形区域的基本图层。
• CAShapeLayer——用于通过CGPath绘制矢量形状的图层。渲染在GPU上执行，无需创建单独的缓冲区。
• CATextLayer——用于显示文本的图层，支持亚像素渲染和字形缓存。
• CAGradientLayer——用于线性或径向渐变的图层，具有硬件加速功能。
• CAReplicatorLayer——自动创建具有指定偏移量的子图层副本的图层。

在Android中，图层概念通过RenderNode、ViewLayer和HardwareRenderer实现。从Android 5.0（API 21）开始，每个View在自己的硬件加速图层中渲染，允许在不调用onDraw的情况下执行动画。

iOS中的额外灵活性由CAReplicatorLayer和CAEmitterLayer提供。前者用于创建重复模式，后者用于粒子系统。两者都仅在GPU上运行，允许在不损失性能的情况下创建复杂的视觉效果。

图层层级与场景合成

iOS中的图层层级基于树的原则构建：每个CALayer可以包含多个子sublayer。应用于父图层的所有变换——缩放、旋转、位移——自动应用于子元素。这确保了动画期间视觉呈现的一致性。

场景合成由Core Animation按以下顺序执行：首先渲染背景，然后每个子图层按添加顺序从下到上进行。对于每个图层，Core Animation检查透明度、遮罩和混合模式的属性，然后执行合成（compositing）为最终帧。

根据Apple Documentation，具有opaque = true且无Alpha通道的图层合成无需额外通道——GPU只需将像素复制到前一层之上。如果图层包含透明度，GPU执行Alpha混合，这需要额外的计算资源。

在Android中，图层合成通过SurfaceFlinger执行——系统服务接收来自每个应用程序的缓冲区，并按照z顺序将它们合并。Android中的每个Window都是一个单独的Surface，可以包含多个图形图层。

遮罩与图层裁剪

CALayer.mask——允许将任意形状的遮罩应用于图层的属性。遮罩可以是任何其他CALayer——例如，具有圆形路径的CAShapeLayer或用于创建平滑透明度渐变的CAGradientLayer。使用遮罩会增加GPU负载，因为它需要额外的渲染通道来计算每个像素的Alpha值。

对于简单的矩形边界裁剪，建议使用cornerRadius和masksToBounds。与通过mask属性的遮罩不同，cornerRadius在栅格化阶段由硬件处理，不需要额外通道。

图层性能：渲染与缓存

shouldRasterize——CALayer用于性能优化的关键属性。当shouldRasterize设置为true时，Core Animation将图层及其所有sublayer渲染到单独的位图缓冲区（offscreen buffer）中。在后续帧中，使用缓存的位图图像代替重新渲染。

缓存对于静态或很少变化的图层效果很好：阴影、渐变、带圆角的文本。然而，对于经常更新的图层（动画、视频、滚动），栅格化可能会降低性能，因为每帧都需要重新生成缓存。

根据Objc.io的研究，在iPad Pro上正确使用shouldRasterize可将复杂屏幕的渲染时间从25毫秒降低到8毫秒——超过三倍。关键条件：图层不应每3-5帧以上变化一次。

• Opaque = true——通知Core Animation图层不透明，排除Alpha混合。
• drawsAsynchronously——为复杂图层启用异步渲染，不阻塞主线程。
• allowsEdgeAntialiasing——为变换后的图层启用边缘平滑，但增加GPU负载。
• allowsGroupOpacity——控制子图层的组透明度。

Swift和Kotlin中图层工作示例

第一个示例演示了在Swift中配置CALayer的基本视觉属性——圆角、阴影和边框：

import UIKit

class StyledView: UIView {
    override func awakeFromNib() {
        super.awakeFromNib()
        layer.cornerRadius = 12
        layer.masksToBounds = false
        layer.shadowColor = UIColor.darkGray.cgColor
        layer.shadowOpacity = 0.3
        layer.shadowOffset = CGSize(width: 0, height: 4)
        layer.shadowRadius = 8
    }
}

第二个示例——使用CABasicAnimation在Swift中创建图层动画。position属性在无需UIView参与的情况下进行动画：

let animation = CABasicAnimation(keyPath: "position")
animation.fromValue = NSValue(cgPoint: CGPoint(x: 0, y: 0))
animation.toValue = NSValue(cgPoint: CGPoint(x: 150, y: 300))
animation.duration = 1.0
animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
targetLayer.add(animation, forKey: "moveAnimation")

第三个示例——在Android上使用Kotlin操作RenderNode。RenderNode——CALayer的直接对应物，允许在Canvas级别操作图形图层：

import android.graphics.renderer.RenderNode

fun createLayer(): RenderNode {
    val node = RenderNode("customLayer")
    node.setPosition(0, 0, 300, 200)
    node.setScaleX(1.5f)
    node.setScaleY(1.5f)
    val canvas = node.beginRecording()
    canvas.drawColor(android.graphics.Color.BLUE)
    node.endRecording()
    return node
}