Texture 二基本使用Node及布局

概述

上一节已经提到了Texture 的布局引擎包含了如下几种布局规范，这一节将对这些布局规范进行展开

ASWrapperLayoutSpec
ASStackLayoutSpec
ASInsetLayoutSpec
ASOverlayLayoutSpec
ASBackgroundLayoutSpec
ASCenterLayoutSpec
ASRatioLayoutSpec
ASRelativeLayoutSpec
ASAbsoluteLayoutSpec
ASCornerLayoutSpec

具体布局规范

ASLayoutSpec

所有布局的父类，一般很少用到，但是可以作为间隔占位空间使用。

类型	字段名	说明
ASDimension	.style.width	ASLayoutElement内容区域的宽度属性，默认值是ASDimensionAuto，注意它不是最终的宽度值，最终的宽度值会受minWidth和maxWidth属性影响
ASDimension	.style.height	ASLayoutElement内容区域的高度属性，默认值是ASDimensionAuto
ASDimension	.style.minWidth	ASLayoutElement内容区域的最小宽度，默认是ASDimensionAuto
ASDimension	.style.maxWidth	ASLayoutElement内容区域的最大宽度，默认是ASDimensionAuto
ASDimension	.style.minHeight	ASLayoutElement内容区域的最小高度，默认是ASDimensionAuto
ASDimension	.style.maxHeight	ASLayoutElement内容区域的最大高度，默认是ASDimensionAuto
ASDimension	.style.preferredSize	preferredSize提供了一个建议的尺寸，如果它超过了提供的最小尺寸和最大尺寸，那么最小尺寸和最大尺寸将会强制限制，也就是说这个只是一个建议的尺寸数据，如果这个值没有提供那么节点的尺寸将会是它的固有尺寸
CGSize	.style.minSize	设置最小的尺寸边界
CGSize	.style.maxSize	设置最大的尺寸边界
ASLayoutSize	.style.preferredLayoutSize	preferredLayoutSize 为布局节点提供了一个建议的相对尺寸，ASLayoutSize 和 CGSize 的区别是它使用的是相对百分比而不是绝对的像素值，和preferredSize类似如果它超过了提供的最小尺寸和最大尺寸，那么最小尺寸和最大尺寸将会强制限制
ASLayoutSize	.style.minLayoutSize	minSize的百分比版本
ASLayoutSize	.style.maxLayoutSize	maxSize的百分比版本

ASStackLayoutSpec

这里有一个可以比较直观体验ASStackLayoutSpec的小游戏，大家可以在看完后体验下：
https://huynguyen.dev/froggy-asdk-layout/

如果大家对Flex不是很了解还可以通过下面的网站看下，比较直观
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
https://www.flexboxpatterns.com/

ASStackLayoutSpec 是 Texture Flaxbox 布局的核心，Flexbox旨在为不同屏幕尺寸提供一致的布局。在堆叠布局中，我们可以将物品以垂直或水平堆叠方式对齐。堆栈布局可以是另一个堆栈布局的子布局，这使得使用堆栈布局规范几乎可以创建任何布局。

容器参数

ASStackLayoutSpec 在ASLayoutElement的基础上加上了7个额外的属性：

1. direction: 指明它的子元素的布局方向

纵向：ASStackLayoutDirectionVertical
横向：ASStackLayoutDirectionHorizontal

2. spacing:  子元素之间的间距

3. horizontalAlignment: 指定子项水平对齐的方式
4. verticalAlignment: 指定子项垂直对齐的方式
5. justifyContent: 它定义了沿主轴的对齐方式。

ASStackLayoutJustifyContentStart 从前端往后端排列
ASStackLayoutJustifyContentCenter 居中排列
ASStackLayoutJustifyContentEnd 从后端往前端排列
ASStackLayoutJustifyContentSpaceBetween 间隔排列，两端无间隔
ASStackLayoutJustifyContentSpaceAround 间隔排列，两端有间隔

6. alignItems: 它定义了沿交叉轴的对齐方式。

ASStackLayoutAlignItemsStart 从前往后排列
ASStackLayoutAlignItemsEnd 从后往前排列
ASStackLayoutAlignItemsCenter 居中排列
ASStackLayoutAlignItemsStretch 拉伸排列
ASStackLayoutAlignItemsBaselineFirst 以第一个文字元素基线排列（主轴是横向才可用）
ASStackLayoutAlignItemsBaselineLast以最后一个文字元素基线排列（主轴是横向才可用）

这里需要注意的是主轴和交叉轴的定义，可以看我之前的Flutter分享的内容。

7. flexWrap： 子元素是否堆叠到单行或者多行，默认是堆叠到单行
8: alignContent： 多行的情况下交叉轴的对其方向

节点参数

类型	字段名	说明
CGFloat	.style.spacingBefore	该对象在堆叠方向的起始部分添加一定的空间
CGFloat	.style.spacingAfter	该对象在堆叠方向的结束部分添加一定的空间
CGFloat	.style.flexGrow	如果所有的子节点在堆叠的方向尺寸和小于最小的尺寸，那么作为子节点的当前对象是否需要扩充它的大小
CGFloat	.style.flexShrink	如果所有的子节点在堆叠的方向尺寸和大于最大的尺寸，那么作为子节点的当前对象是否需要压缩它的大小
CGFloat	.style.flexBasis	为当前节点设置一个初始大小，但是这个初始大小并不是最终的大小它会受flexGrow/flexShrink的设置所影响
ASStackLayoutAlignSelf	.style.alignSelf	为当前元素指定交叉轴的对齐方向，这个值将会覆盖alignItems
CGFloat	.style.ascender	这个用于基准线对其的方式，表示从对象的顶部距离它的基准线的尺寸
CGFloat	.style.descender	这个用于基准线对其的方式，表示从对象的基准线到节点对象底部的尺寸

ASInsetLayoutSpec

这个相当于在某个布局外面加个空白间距。如果在UIEdgeInsets中将INFINITY设置为一个值，则插入规范将仅使用子内在尺寸，也就是默认的尺寸。

ASOverlayLayoutSpec && ASBackgroundLayoutSpec

ASOverlayLayoutSpec 和 ASBackgroundLayoutSpec 为层叠布局，将一个布局叠加在另一个布局上，他们都需要注意的是它们的尺寸是根据基准大小尺寸计算而来的，基准的尺寸会通过constrainedSize传递给它们，所以基准必须要有一个固有的尺寸或者手动设定了它的宽高。对于ASOverlayLayoutSpec它的基准元素是底部的那个元素，对于ASBackgroundLayoutSpec 它的基准元素是顶部的元素。这一点需要注意下

ASCenterLayoutSpec

ASCenterLayoutSpec将其子控件中心置于其最大约束大小内。

如果ASCenterLayoutSpec的宽度或高度不受约束，则会缩小到子组件的大小。
ASCenterLayoutSpec有两个属性：

centeringOptions。确定子组件在中心规格内的居中方式。选项包括：无，X，Y，XY。
sizingOptions。确定ASCenterLayoutSpec将占用多少空间。选项包括：默认，最小X，最小Y，最小XY。

ASRatioLayoutSpec

ASRatioLayoutSpec可以缩放的固定高宽比来布局组件,ASRatioLayoutSpec必须有宽度或高度作为constrainedSize传递给它作为缩放的基数。

ASRelativeLayoutSpec

顾名思义是一个相对布局规范，指定了当前节点相对另一个节点的位置。

ASCornerLayoutSpec

ASCornerLayoutSpec 主要用于像小红点那样角标布局而设计的。

ASAbsoluteLayoutSpec

ASAbsoluteLayoutSpec可以通过设置它们的layoutPosition属性来指定其子项的确切位置（X/Y坐标）。绝对布局相对来说比较不灵活很难适配到各种机型。

节点参数

类型	字段名	说明
CGFloat	.style.layoutPosition	当前节点在父节点的位置参数

尺寸创建

CGFloat, ASDimension

是一个可以容纳百分比值，像素值的尺寸数据

百分比方式

ASDimensionMake(@"50%");  
ASDimensionMakeWithFraction(0.5);

像素点方式

ASDimensionMake(@"70pt");
ASDimensionMake(70);      
ASDimensionMakeWithPoints(70);

一般用ASDimensionMakeWithXXX会比较明确，个人比较喜欢这种方式。

CGSize, ASLayoutSize

和ASDimension类似，它的存在也是为了兼容像素和百分比而存在的，它的宽高元素是ASDimension。它用于.preferredLayoutSize, .minLayoutSize 以及 .maxLayoutSize这些属性中

ASLayoutSizeMake(ASDimension width, ASDimension height);

ASSizeRange

ASSizeRange 是由两个CGSize，这两个CGSize决定了某个元素的最小尺寸和最大尺寸区间