UI视图

69 阅读2分钟
  1. UITableView相关
  2. 事件传递&视图响应
  3. 图像显示原理
  4. 卡顿&掉帧
  5. 绘制原理&异步绘制
  6. 离屏渲染

UITableView相关

  • 重用机制
  • 数据源同步(多线程)

重用机制

  • cell = [tableView dequeueReusableCellWithIdentifier:identifier]; image.png
  • 字母索引条(理解重用机制)

数据源同步问题

  • 新闻、咨询类的App当中 image.png
  • 数据源同步解决方案
并发访问、数据拷贝

image.png

串行访问

image.png

UIView和CALayer(单一职责原则)

image.png

  • UIView为其提供内容,以及负责处理触摸等事件,参与响应链
  • CALayer负责显示内容contents

事件传递与视图响应链

image.png

  • -(UIVIew *)hitTest:(CGPoint)point withEvent:(UIEvent *)event;
  • -(BOOL)pointInside(CGPoint)point withEvent:(UIEvent *)event;

事件传递流程

image.png

hitTest:withEvent:系统实现

image.png

代码实战

  • 方形区域指定区域接受事件响应

image.png

视图响应

image.png

视图事件响应

  • -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
  • -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
  • -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;

image.png

  • 事件都不处理则抛弃

图像显示原理

image.png

image.png

CPU工作

image.png

GPU渲染管线(OpenGL)

image.png

UI卡顿、掉帧的原因

image.png

  • 掉帧:在下一次Vsync信号到来之前,并没有CPU与GPU共同完成下一帧画面的合成,既产生掉帧即表现卡顿。

滑动优化方案

CPU
  • 对象的创建、调整*、销毁*(放在子线程)
  • 预排版(布局计算、文本计算)(放在子线程)
  • 预渲染(文本等异步绘制、图片编解码等)
GPU
  • 纹理渲染*(避免离屏渲染)
  • 视图混合*(减少视图复杂性,异步绘制放在CPU)

UIView的绘制原理&异步绘制

image.png

系统的绘制流程

image.png

异步绘制

-[layer.delegate displayLayer:]

  • 代理负责生成对应的bitmap
  • 设置改bitmap作为layer.contents属性值

image.png

离屏渲染

On-Screen Rendering

-意为当前屏幕渲染,指的是GPU的渲染操作是在当前用于显示的屏幕缓存区中进行

Off-Screen Rendering

  • 意为离屏渲染,指的是GPU在当前屏幕缓存区以外新开辟一个缓冲区进行渲染操作

  • 当我们设置某一些UI视图的图层属性,未合成之前不能用于当前屏幕直接显示则会产生离屏渲染。

何时会触发?

  • 圆角(当和maskToBounds一起使用时)
  • 图层蒙版
  • 阴影
  • 光栅化
为何要避免离屏渲染?(产生GPU额外开销,离屏渲染增加GPU工作量)
  • 创建新的渲染缓冲区
  • 上下文切换

UI视图总结

  • 系统的UI事件传递机制是怎样的?
  • 使UITableView滚动更流畅的方案或思路都有哪些?
  • 什么是离屏渲染?
  • UIView和CALayer之间的关系是怎样的?(单一职责原则)