簡書內(nèi)容都是個人的知識點整理和筆記。
Texture布局
Texture的Layout API相較于復雜且增加開銷的Auto Layout其具有以下的有點：
- 快捷：比Auto Layout 布局快速
- 異步并發(fā)：可以在后臺線程中對布局進行計算從而不影響交互
- 規(guī)范：使用不可變數(shù)據(jù)結(jié)構(gòu)聲明布局
- 可緩存
- 可擴展
熟悉使用Flexbox布局（比如RN、Flutter）的人會從Texture發(fā)現(xiàn)許多相似的地方。
Flexbox旨在為不同的屏幕尺寸提供一致的布局。在堆棧布局中，您可以在垂直或水平堆棧中對齊項目。堆棧布局可以是另一個堆棧布局的子代，這使得使用堆棧布局規(guī)范創(chuàng)建幾乎任何布局成為可能。
Texture布局主要圍繞這兩個中心概念：
- Layout Elements
- Layout Specs
Layout Elements
布局規(guī)范（ASLayoutSpec）由布局元素構(gòu)成并對他們進行排列，并且所有的節(jié)點（ASDisplayNode）和布局規(guī)范都遵循了ASLayoutElement的協(xié)議，這意味著我們可以通過節(jié)點和其他作為子元素的規(guī)范來組合實現(xiàn)復雜的布局規(guī)范。
Layout Specs
布局規(guī)范可以作為一個盛放布局元素的容器通過理解布局元素的布局來使他們可以相互關(guān)聯(lián)。
Texture提供了幾個ASLayoutSpec的子類：
ASWrapperLayoutSpec
作為ASLayoutSpec一個簡單的子類，它可以包裹ASLayoutElement并根據(jù)布局元素上設(shè)置的大小計算子項的布局。
ASStackLayoutSpec
作為Texture最有用最強大的布局規(guī)范，ASStackLayoutSpec使用flexbox算法確定其子項的位置和大小。
ASStackLayoutSpec除了具有布局元素所具有的屬性外，還額外提供了7個屬性：
- direction：指定子元素的堆疊方法，既設(shè)定主軸的方向
- spacing：所有子元素之間的間距
- horizontalAlignment：指定子元素在水平方向上的對齊方式
- verticalAlignment：指定子元素在垂直方向上的對齊方式
- justifyContent：指定子元素沿著主軸的排列方式
- alignItems：指定子元素沿著次軸的排列方式
- flexWrap：子元素是否堆疊為多行
-
alignContent：當子元素堆疊為多行時，多行的對齊方式
justifyContent.png
ASInsetLayoutSpec
ASInsetLayoutSpec會在減去上左下右的插入間距后將約束后的最大Size傳遞給其子元素。一旦子元素確定了它的最終尺寸，ASInsetLayoutSpec就會將其尺寸加上插入邊距作為最終尺寸。因此子元素必須具有內(nèi)部大小或明確設(shè)置其大小。
我們可以使用INFINITY作為插入間距中的值來保持子元素原有的尺寸。
ASOverlayLayoutSpec
在子元素上拉伸覆蓋另一個元素。疊加元素的大小會根據(jù)子元素進行計算。
ASBackgroundLayoutSpec
與ASOverlayLayoutSpec相反，在子元素后拉伸墊底另一個元素。墊底元素的大小會根據(jù)子元素進行計算。
ASCenterLayoutSpec
該規(guī)范會根據(jù)規(guī)范的最大約束大小將其子元素置于居中位置。
ASRatioLayoutSpec
ASRatioLayoutSpec以固定的寬高比進行縮放的布局規(guī)范。此規(guī)范必須具有作constrainedSize為它傳遞寬度或高度。
ASRelativeLayoutSpec
根據(jù)垂直和水平位置說明符布置組件并將其放置在布局邊界內(nèi)。
ASAbsoluteLayoutSpec
字面上的意思，絕對布局，在iOS開發(fā)上都熟。
ASCornerLayoutSpec
ASCornerLayoutSpec是一種用于快速角元素布局的規(guī)范。通過使用聲明性代碼表達式而不是手動坐標計算的方法在角落中定位元素。
在了解到Texture的布局后我們下面將會開始通過組合布局規(guī)范與布局元素來構(gòu)造復雜的頁面。
