在我们的iOS项目开发中,当我们在屏幕中显示一张图片,一个UIView、UILabel或者UIButton时,iOS系统到底如何将它们显示在屏幕上的呢?
屏幕显示
以如下的登录注册界面为例
这个界面上有Label,button,image等控件,通过布局将它们显示在了屏幕上的相应位置,那么它们在显示到屏幕上的时候是如何被渲染到屏幕上的呢?
UIView和CALayer的关系
首先我们要搞明白UIView和Layer到底有什么关系和区别!
- UIKit使用UIResponder作为响应对象,来响应系统传递过来的事件并进行处理。UIApplication、UIViewController、UIView、和所有从UIView派生出来的UIKit类(包括UIWindow)都直接或间接地继承自UIResponder类。
- 在 UIResponder中定义了处理各种事件和事件传递的接口, 而 CALayer直接继承 NSObject,并没有相应的处理事件的接口。
- 每个 UIView 内部都有一个 CALayer 在背后提供内容的绘制和显示,并且 UIView 的尺寸样式都由内部的 Layer 所提供。两者都有树状层级结构,layer 内部有 SubLayers,View 内部有 SubViews.但是 Layer 比 View 多了个AnchorPoint;
- 在 View显示的时候,UIView 作为 Layer 的 CALayerDelegate,View 的显示内容由内部的 CALayer显示;
- CALayer 是默认修改属性支持隐式动画的,在给 UIView 的 Layer 做动画的时候,View 作为 Layer 的代理,Layer 通过 actionForLayer:forKey:向 View请求相应的 action(动画行为);
- layer 内部维护着三分 layer tree,分别是 presentLayer Tree(动画树),modeLayer Tree(模型树), Render Tree (渲染树),在做 iOS动画的时候,我们修改动画的属性,在动画的其实是 Layer 的 presentLayer的属性值,而最终展示在界面上的其实是提供 View的modelLayer;
- 两者最明显的区别是 View可以接受并处理事件,而 Layer 不可以。
关于更详细的解释,请移步详解CALayer 和 UIView的区别和联系
iOS屏幕渲染的本质
通过对UIView和UILayer关系和区别的理解我们知道,我们在使用UIView进行界面的布局时,本质上是对CALayer进行布局,系统最终是将CALayer转换成位图渲染到屏幕上。
CALayer渲染流程
着色器渲染流程
当图片在屏幕上显示时,首先我们先通过frame,获取到顶点数组,将顶点数据通过"顶点着色器"进行处理,以点、线或三角形的形式进行顶点的连接;然后通过光栅化,并使用“片色着色器"将图片的像素点渲染到顶点数据所框住的区域内。
iOS下的渲染框架
CoreAnimation通过OpenGL ES 或者 Metal驱动GPU 将图片通过“着色器渲染流程”渲染到屏幕上
CoreAnimation框架
CoreAnimation渲染流水线
- 第一步:处理各种事件,Handle Events;
- 第二步:CoreAnimation 将图片提交到GPU;
- 第三步:Render Server渲染图片;
Render Server操作分析
待更新。。。