Texture 布局快速开始

动机和优点

Layout API 的设计是作为UIKit 的自动布局的一种高性能替代方案，其非常适合复杂的页面设计。Texture 的 Layout API拥有许多比UIKit的自动布局更优秀的地方：

快捷：编码速度和一般的代码布局一样javascript:void(null)快，显著快于Auto Layout。
异步&并发：页面布局的计算放在后台线程中，所以用户交互不会被中断，不会出现页面卡度。
声明式：布局被声明为不可变的数据结构。这使得开发、编写文档、代码审查、测试、调试、调优、维护变得更加容易。
缓存化的：因为布局结果是不可变的数据结构，所以可以将结果在后台线程缓存起来以提高用户体验感。
可扩展的：在类之间复用代码非常简单

灵感来自CSS Flexbox

熟悉CSS Flexbox的人会发现它们存在许多的相似之处。但是Texture的Layout API并没有完全实现CSS的布局方案。

基本概念

Texture布局系统主要围绕两个基础概念：

布局规格
布局元素

布局规格

布局规格并没有实体，它是充当了其他布局元素的容器来解释这些子布局元素之间的布局关联。
Texture提供了几个ASLayoutSpec子类，一个简单的布局只需要一个子布局元素，更复杂的布局则组合多个子布局元素

布局元素

布局规格包含和管理布局元素
所有的ASDisplayNode和ASLayoutSpec都遵从ASLayoutElement协议。这意味着你可以通过多个node和其他的布局来组成布局。
ASLayoutElement协议中包含的几个属性能够用来组成非常复杂的布局。另外，布局规格有其自己的一组属性用于调整布局元素的布局。

组合多个布局规格和布局元素来组成复杂的UI布局

这里你将看到一个ASTextNode(highlighted in yellow），一个ASVideoNode(top image)和一个ASStackLayoutSpec(stack layout spec)联合生成一个复杂的布局。

播放按钮放置在ASVideoNode上（top image）使用的是ASCenterLayoutSpec（center layout spec）和ASOverlayLayoutSpec(overlay覆盖 layout spec)

一些node需要设置size

一些元素基于它们即时可用的内容拥有一个"固有size"。例如，ASTextNode能够基于富文本计算它的size。其他拥有"固有size"的node

ASImageNode
ASTextNode
ASButtonNode

所有的其他node要么没有"固有size"要么其"固有size"需要等待其资源加载完成后才知晓。例如，一个ASNetworkImageNode直到图片从URL地址下载完成后才知道其自身的大小。这些元素包括

ASVideoNode
ASVideoPlayerNode
ASNetworkImageNode
ASEditableTextNode
这些缺少"固有size"的node必须有一个初始Size来设置他们，使用ASRationLayoutSpec、ASAbsoluteLayoutSpec或者style对象的size属性。

布局调试

调用一个ASDisplayNode或者ASLayoutSpec的 -asciiArtString 方法将返回一个类或者其子类的ascii-art描述。可选的，假如你在node或者layout spec设置了 .debugName，它也会包含在ascii-art中。例子如下。

-----------------------ASStackLayoutSpec----------------------
|  -----ASStackLayoutSpec-----  -----ASStackLayoutSpec-----  |
|  |             ASImageNode           |  |           ASImageNode             |  |
|  |             ASImageNode           |  |           ASImageNode             |  |
|  ------------------------------  ------------------------------  |
-----------------------------------------------------------------

你也可以直接打印ASLayoutElement的style对象(node或layout spec)。这是一个在调试sizing属性时及其实用的方法。

(lldb) po _photoImageNode.style
Layout Size = min {414pt, 414pt} <= preferred {20%, 50%} <= max {414pt, 414pt}