【翻译】Texture 入门(Getting Started)

iOS 上的黄金准则 — 为了保持用户界面的顺畅和响应,你的 app 需要每秒渲染 60 帧。这意味着主线程有 1/60 秒的时间来推动每一帧。这是执行所有布局和绘制代码的 16 毫秒!并且因为系统开销,你的代码通常在导致丢帧之前的运行时间少于 10 毫秒。

June 30, 2017 -
ios texture 翻译

本文翻译自 TextureGetting Started 一文。

入门


Texture 的基本单位是 nodeASDisplayNode 是对 UIView 的抽象,而 UIView 又是对 CALayer 的抽象。不同于只能在主线程中使用的视图,node 是线程安全的:你可以在后台线程中并行实例化和配置它们的整个层次结构。

iOS 上的黄金准则 — 为了保持用户界面的顺畅和响应,你的 app 需要每秒渲染 60 帧。这意味着主线程有 1/60 秒的时间来推动每一帧。这是执行所有布局和绘制代码的 16 毫秒!并且因为系统开销,你的代码通常在导致丢帧之前的运行时间少于 10 毫秒。

Texture 让你可以将图像解码,文本大小和渲染,以及其它昂贵的 UI 操作移出主线程,来保持主线程可用于响应用户交互。Texture 还有其它技巧,但我们稍后会说。

Nodes

如果你习惯于使用 view,那么你已经知道怎样使用 node。大多数方法都有相等的 node,并且大多数 UIViewCALayer 的属性也都可以使用。在任何情况下,如果存在命名差异(如 .clipsToBounds vs .masksToBounds),node 将默认使用 UIView 的名字。唯一的例外是 node 使用位置来代替中心。

当然,你总是可以通过使用 node.viewnode.layer 来访问底层 view 或 layer,只需确保是在主线程上使用它!

Texture 提供了各种 node 去替换那些你习惯使用的大部分 UIKit 组件。大型可扩展应用程序已经能够使用 Texture 的 node 完全编写自己的 UI。

Node 容器

当切换应用程序以使用 Texture 时,一个常见的错误是直接将 node 添加到已有的 view 结构。这么做几乎可以保证你的 node 在渲染时将会闪烁。

反而,你应该将 node 作为子 node 添加到许多 node 容器类里的一个。这些容器负责通知持有的 node 当前处于什么状态,以便可以加载数据,并且能尽可能高效的渲染 node。

布局引擎

Texture 的布局引擎既是其最强大的功能之一,也是其最独特的功能之一。基于 CSS FlexBox 模型,它提供一种声明性的方式来指定自定义 node 的大小和子 node 的布局。而全部 node 默认被同时渲染,每个 node 都通过提供一个 ASLayoutSpec 来执行异步测量和布局。

高级开发者功能

Texture 提供了在 UIKit 或 Foundation 找不到的各种高级开发者功能。我们的开发人员发现 Texture 可以简化其结构,并提升其开发速度。

(即将推出完整列表!)

添加 Texture 到你的 App

如果你刚接触 Texture,我们推荐你查看我们的 ASDKgram 样例 app。我们已经创建了一份便利的指南(即将推出!),和一步步的指导,并按照一个样例说明如何将 Texture 添加到一个 app。

如果你遇到任何问题,请使用 GitHub 或 Texture Slack 社区联系我们来获得帮助。