# UI视图相关

UI视图相关

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

1. UITableView

  1. 重用机制
  2. 数据源同步(多线程)

重用机制

  1. cell = [UITableView dequeueReusableCellWithIdentifier:@"identifier"];
  2. 不在屏幕上的cell 放到重用池中,即将在屏幕上显示的cell用相同的重用标识符从重用池中取得缓存的cell

数据源同步(UI刷新错乱)

  1. 并发访问,数据拷贝
  2. 串行访问

2. 事件传递&视图响应

  1. UIView和CALayer
  2. 事件传递与视图响应链

1. UIView和CALayer

  1. UIView显示的部分是CALayer的contents(backing store),UIView的backgroundColor是CALayer的同名属性的封装
  2. 区别
    1. UIView 为CALayer提供显示的内容,以及负责触摸灯事件,参与响应链(设计原则,单一职责原则)
    2. CALayer只负责内容contents的显示

2. 事件传递与视图响应链

  1. 涉及的两个方法hitTest:withEvent:(方法一)与pointInside:withEvent:(方法二)

  2. 流程:

    1. 用户点击了屏幕,硬件接收到点击事件后,由UIKit(硬件驱动)处理包装事件,发送给桌面,如果桌面当前没有程序在运行,就转换成自己的事件,如点击APP图标启动APP,滑动APP列表,或者打开通知中心等。如果有APP在前台运行,就把事件传给APP,APP会利用RunLoop处理事件。
    2. App会把事件分发给当前的UIWindow对象,UIWindow对象会调用方法一返回对应的视图。在调用方法一之前会判断当前视图不是是隐藏,用户交互是enable,透明度大于0.01,然后调用方法二,检测触摸点是否在本视图之内,如果不在则不进行方法一,如果在就会用倒叙的方法遍历自己的子视图,让他们走一遍方法二与方法一,如果子视图方法一返回的UIView不为空则让这个UIView处理点击事件,如果他不处理就让他的父视图处理,以此类推,最后都没有视图响应就丢弃。
  3. 事件响应

    1. touchesBegan(Modved)(Ended):withEvent:

3. 图像显示原理

设计工作单位

  1. cpu
  2. gpu:涂层渲染,纹理合成
  3. 帧缓冲区:gpu产生的数据
  4. 视频控制器:把帧缓冲去的数据显示到显示器
  5. 显示器

UI具体显示

  1. CALayer(内容布局等计算)(cpu负责)
  2. Core Animation(cpu负责)
  3. OpenGL(ES)(GPU负责)
  4. Screen

cpu具体流程

  1. 布局计算(UI布局,文本计算)
  2. 显示计算(drawRect:)
  3. 其他一些准备工作(图片编解码)
  4. 提交内容给GPU(提交位图)

GPU渲染管线(OpenGL渲染管线)

  1. 顶点着色
  2. 图元装配
  3. 光栅化
  4. 片段着色
  5. 片段处理
  6. 把最终的像素点提交到帧缓冲区中(视频控制器会在VSync(垂直同步)到来时显示在屏幕上)

4. 卡顿&掉帧

  1. 原因
  2. 解决方案

1. 原因

  1. 16.7ms产生一帧画面
  2. cpu+gpu提交一次帧缓冲区的时间和小于16.7ms
  3. 时间大于这个时间 就会产生掉帧,卡顿现象

2. 解决方案

  1. 从cpu
    1. 对象的创建调整销毁(子线程)
    2. 预排版 (布局计算,文本计算)
    3. 预渲染(文本异步绘制,图片编码等)
  2. 从GPU
    1. 纹理渲染(离屏渲染)
    2. 视图混合(视图复杂,减轻视图复杂程度)

5. 绘制原理&异步绘制

  1. UIView对象调用setNeedsDisplay方法,就会调用他的layer的同名方法
  2. layer标记自己需要在runloop休眠时刷新自身contents-[layer display]
  3. 在刷新自身content算的时候会判断自身的delegate是否响应了displayLayer:方法,如果没有就走系统绘制流程,如果有则走用户自定义的绘制流程(这也是异步绘制的突破点)

系统绘制流程

  1. CALayer 创建 backing store(CGContextRef)
  2. layer代理没有响应方法
  3. CALayer 调用drawInContext:
  4. CALayer 上传backing store
  5. 结束

自定义绘制流程

这个过程要求代理自己生成响应的bitmap(位图),并且把bitmap设置为layer.contents的值。

  1. 会在相应代理方法后调用代理绘制方法
    1. CGBitmapContextCreate()
    2. CoreGraphic API
    3. CGBitmapContextCreateImage()
  2. 回调UIView 的 drawRect:让用户做一些其他自定义的事情
  3. 上传backing store

6. 离屏渲染-Off-Screen rendering

  1. 相对应的On-Screen Rendering
  2. Off-Screen rendering

1. 相对应的On-Screen Rendering

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

2. Off-Screen rendering

GPU在当前屏幕缓冲区以外新开辟的一个缓冲区进行渲染操作

触发条件

  1. 圆角与maskToBounds 一起设置
  2. 图层蒙版
  3. 阴影
  4. 光栅化

为什么避免

增加GPU工作量,导致GPU工作时间增长

  1. 新的渲染缓冲区
  2. 上下文的切换
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容