UI

UIView 和 CALayer的关系

  • UIView是CALayer代理，参与响应链，处理触摸等事件，
  • CALayer负责显示内容

事件传递

1
2
func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView?
func point(inside point: CGPoint, with event: UIEvent?) -> Bool


事件响应

1
2
3
4
5
func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?)
func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?)
func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?)
func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?)
SubView -> SuperView -> ViewController -> Window -> AppDelegate

图像显示原理

CPU工作

  • Layout: UI布局, 文本计算
  • Display: 绘制（DrawRect）
  • Prepare: 图片编码
  • Commit: 提交位图

GPU工作

UI卡顿掉帧原因

  • 在下一个VSYNC信号到来之前（16.7ms内），CPU和CPU未能完成一帧画面的合成

UIView绘制原理


异步绘制原理

[layer.delegate displayLayer:]

  • 代理负责生成对应bitmap
  • 设置该bitmap为layer的contents

离屏渲染

  • On-Screen Rendering: GPU在当前用于显示的屏幕缓冲区中进行的渲染操作
  • Off-Screen Rendering: GPU在当前用于显示的屏幕缓冲区之外新开辟缓冲区进行渲染操作
    总结:离屏渲染开辟了新的缓冲区，涉及上下文切换，增加了GPU工作量

离屏渲染何时会触发

  • 圆角（同时设置maskToBounds）
  • 图层蒙版
  • 阴影
  • 光栅化