Texture (ASDK) 学习记录

Texture 记录

相关链接

1. 官方文档
2. 布局小游戏
3. 从 Auto Layout 的布局算法谈性能
4. segment AsyncDisplayKit 介绍

Texture 使用

布局相关

Layout Specs

1. ASWrapperLayoutSpec
   
   • 根据 布局元素 自适应 来计算大小，目前来看该布局方式是有默认边距。
2. ASStackLayoutSpec
   
   • 常用 的组合 布局方式，通过设置不同的property 来确定布局样式
     
     • direction ：主轴方向（水平或者竖直）
     • spacing ：各 child 的间距
     • horizontalAlignment : 水平方向上的对齐 （该属性优先于justifyContent和alignItems）
     • verticalAlignment ： 竖直方向上的对齐方式（该属性优先于justifyContent和alignItems）
     • justifyContent：在主轴方向上的位置
     • alignItems：在十字轴方向上的位置
     • flexWrap
     • alignContent
3. ASInsetLayoutSpec
   
   • 常用 的组合 布局方式，用于确定内边距
     
     主要参数为 UIEdgeInset
4. ASOverlayLayoutSpec
   
   
   • ASOverlayLayoutSpec lays out its child (blue), stretching another component on top of it as an overlay (red).
   • The overlay spec’s size is calculated from the child’s size. In the diagram below, the child is the blue layer. The child’s size is then passed as the constrainedSize to the overlay layout element (red layer). Thus, it is important that the child (blue layer) must have an intrinsic size or a size set on it.
5. ASBackgroundLayoutSpec
   
   
   • ASBackgroundLayoutSpec lays out a component (blue), stretching another component behind it as a backdrop (red).
   • The background spec’s size is calculated from the child’s size. In the diagram below, the child is the blue layer. The child’s size is then passed as the constrainedSize to the background layout element (red layer). Thus, it is important that the child (blue layer) must have an intrinsic size or a size set on it.
6. ASRelativeLayoutSpec
   
   • 通过 HorizontalPosition 和 VerticalPosition 两个参数 来决定 子元素 所处的位置，类似九宫格
7. ASCenterLayoutSpec
   
   
   • 一种特殊的 ASRelativeLayoutSpec ，当 HorizontalPosition 和 VerticalPosition 都为 Center 的时候即为 ASCenterLayoutSpec
8. ASRatioLayoutSpec
   
   
   • 用于确定元素的宽高比

ASRatioLayoutSpec *imagePlace = [ASRatioLayoutSpec ratioLayoutSpecWithRatio:imageRatio child: imageNode];

1. ASAbsoluteLayoutSpec
   
   • 绝对布局 通过 ASLayoutElementStyle 的 position 和 size 来确定 node 位置
     
     • node.style.preferredSize = CGSizeMake(15, 15);
     • node.style.layoutPosition = CGPointMake(30, 30);

Layout Elements

基本概念 （摘自官方文档）

• Layout specs contain and arrange layout elements.
• All ASDisplayNodes and ASLayoutSpecs conform to the protocol. This means that you can compose layout specs from both nodes and other layout specs. Cool!
• The ASLayoutElement protocol has several properties that can be used to create very complex layouts. In addition, layout specs have their own set of properties that can be used to adjust the arrangment of the layout elements.

ASDisplayNode

基本概念 （摘自官方文档）

• ASDisplayNode is the main view abstraction over UIView and CALayer. It initializes and owns a UIView in the same way UIViews create and own their own backing CALayers.

具体分为：

• ASDisplayNode
• ASCellNode
• ASButtonNode
• ASTextNode
• ASImageNode
• ASNetworkImageNode
• ASVideoNode
• ASMapNode
• ASControlNode
• ASScrollNode
• ASEditableTextNode
• ASMultiplexImageNode

need Sizes Set	don’t need Sizes Set
ASImageNode	ASVideoNode
ASTextNode	ASVideoPlayerNode
ASButtonNode	ASNetworkImageNode
~~~	ASEditableTextNode

Some elements have an “intrinsic size” based on their immediately available content. For example, ASTextNode can calculate its size based on its attributed string.

All other nodes either do not have an intrinsic size or lack an intrinsic size until their external resource is loaded. For example, an ASNetworkImageNode does not know its size until the image has been downloaded from the URL.

需要注意的 node 使用

1. 圆角

   • 其他 Node
     
     • ASCornerLayoutSpec 这个 Spec 是 Texture git master 分支上才有的LayoutSpec，目前无法使用。
     • 使用 ASBackgroundLayoutSpec 来模拟圆角，基本相当于在需要圆角的 node 下面添加一个类型为imageNode 的背景 node。让后对于 imageNode 使用圆角。

   • image Node

     • 类方法

           + (UIImage *)as_resizableRoundedImageWithCornerRadius:(CGFloat)cornerRadius
                             cornerColor:(UIColor *)cornerColor
                               fillColor:(UIColor *)fillColor
                             borderColor:(UIColor *)borderColor
                             borderWidth:(CGFloat)borderWidth

     • 实例方法

       - (void)setImageModificationBlock:(asimagenode_modification_block_t)imageModificationBlock

       这种方法是对现有图片的裁切，然后通过 block 返回使用。

2. ASTextNode 的换行: ASTextNode 默认为多行显示，所以要显示单行需要设置maximumNumberOfLines 属性为1即可。对于裁切部分的显示需要其他设置，

   • truncationMode : 段落 属性。
   • truncationAttributedText : 段落剪切时，末尾展示的 text，默认为 ... 。
   • additionalTruncationMessage : 段落剪切时，添加在truncationAttributedText后面。

3. flexGrow 和 flexShrink 使用
   占位 Node 的使用需要标明的是 ASDisplayNode 的两个属性。

   • flexGrow : 指当有多余空间时，拉伸谁以及相应的拉伸比例（当有多个元素设置了flexGrow时）
   • flexShrink : 指当空间不够时，压缩谁及相应的压缩比例（当有多个元素设置了flexShrink时）

   通过设置 这个两个属性来拉伸 node 以适应父 node。

4. ASDisplayNode的初始化方法

   • 根据 ASDisplayNode 的官方定义。ASDidplayNode是对于 UIView 和 CALayer 的抽象，所以在初始化方法中提供了对 UIView 或者 CALayer 的创建。
     

      - (instancetype)initWithViewBlock:(ASDisplayNodeViewBlock)viewBlock
      - (instancetype)initWithLayerBlock:(ASDisplayNodeLayerBlock)layerBlock

5. Node 的点击事件

   • ASDisplay 虽然相当于 UIKit 中的 UIView ，但是相比较于 UIView 的手势添加，目前并没有找到 ASDisplay 与之相对应的添加手势的官方 API，也就是说针对于 ASDisplay。 的手势添加需要一些其他操作，比如直接修改成 ASButtonNode ，或者添加一个蒙层等。
   • 其他 Node 几乎所有都是继承于 ASControlNode。ASControlNode 提供了对于点击事件的操作。

6. 动画部分

   Animating between Layouts
   The layout Transition API makes it easy to animate between a node’s generated layouts in response to some internal state change in a node.

7. ASTableNode & ASCollectionNode

   敬请等待