03.ASDK整理：常用布局

ASDK布局使用Flexbox方式布局。

Flexbox

验证:
http://nguyenhuy.github.io/froggy-asdk-layout/

justifyContent:(items之间的关系)
ASStackLayoutJustifyContentStart: Items align to the left side of the stack. 靠左
ASStackLayoutJustifyContentEnd: Items align to the right side of the stack. 靠右
ASStackLayoutJustifyContentCenter: Items align at the center of the stack. 居中
ASStackLayoutJustifyContentSpaceBetween: Items display with equal spacing between them. 项目之间等间距(只有items之间的间隔，比如3个items，间隔是total/2)
ASStackLayoutJustifyContentSpaceAround: Items display with equal spacing around them. 项目以等间隔显示。(包含与左边和右边的间隔，比如3个items，间隔是total/4)

alignItems:(items与容器之间的关系)

ASStackLayoutAlignItemsStart: Items align to the top of the stack. 靠上
ASStackLayoutAlignItemsEnd: Items align to the bottom of the stack. 靠下
ASStackLayoutAlignItemsCenter: Items align at the vertical center of the stack. 居中
ASStackLayoutAlignItemsBaselineFirst: Items display at the first baseline of the stack. 项目显示在堆栈的第一个基线
ASStackLayoutAlignItemsBaselineLast: Items display at the last baseline of the stack. 项目显示在堆栈的最后一个基准
ASStackLayoutAlignItemsStretch: Items are stretched to fit the stack. 项目被拉伸以适合堆叠

direction:
ASStackLayoutDirectionVertical: Items are placed vertically. 垂直
ASStackLayoutDirectionHorizontal: Items are placed horizontally. 水平

---

ASLayoutSpec常用布局样式

• ASStackLayoutSpec布局容器

基于CSS Flexbox的一个简化版本，可以水平或者垂直的排布堆栈组件，并制定如何对其，如何适应空间

 ASStackLayoutSpec *mainStack = [ASStackLayoutSpec
      stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical//垂直
                           spacing:0//子控件间距
                    justifyContent:ASStackLayoutJustifyContentSpaceAround
                        alignItems:ASStackLayoutAlignItemsCenter
                          children:@[
                            _statusTextNode, _tipTextNode, _cameraButtonNode
                          ]];
  mainStack.style.preferredSize = constrainedSize.max;

• ASRelativeLayoutSpec相对布局

ASRelativeLayoutSpec *leftRelative = [ASRelativeLayoutSpec
      relativePositionLayoutSpecWithHorizontalPosition:
          ASRelativeLayoutSpecPositionStart
                                      verticalPosition:
                                          ASRelativeLayoutSpecPositionStart
                                          sizingOption:
                                              ASRelativeLayoutSpecSizingOptionDefault
                                                 child:leftInset];

  ASStackLayoutSpec *rightStack = [ASStackLayoutSpec
      stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical
                           spacing:0
                    justifyContent:ASStackLayoutJustifyContentSpaceBetween
                        alignItems:ASStackLayoutAlignItemsStart
                          children:@[
                            _materialInfoDisplayNode, _coverInfoDisplayNode
                          ]];

• ASAbsoluteLayoutSpec绝对布局

ASAbsoluteLayoutSpec *mainAbsolute = [[ASAbsoluteLayoutSpec alloc] init];
[mainAbsolute setChildren:@[
        _rulerHeadPointButtonNode,
        _rulerTailPointButtonNode,
        _rulerLineDisplayNode,
      ]];

• ASStaticLayoutSpec布局两个相对独立的控件

如果控件位置有重叠可以设置zPosition属性控制上下级关系

_rulerHeadPointButtonNode.zPosition = 11; 
_rulerTailPointButtonNode.zPosition = 12;
  ASStaticLayoutSpec *mainStatic = [[ASStaticLayoutSpec alloc] init];
  [mainStatic setChildren:@[ mainStack, versionStack,rulerHeadPointButtonNode,rulerTailPointButtonNode ]];

• ASInsetLayoutSpec

加内间距

  ASInsetLayoutSpec *mainInset =
      [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(8, 8, 8, 8)
                                             child:mainStatic];

---

其他

通常在layoutSpecThatFits方法里写布局

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize { ASStackLayoutSpec *verticalStack = [ASStackLayoutSpec verticalStackLayoutSpec]; verticalStack.direction = ASStackLayoutDirectionVertical; verticalStack.spacing = 4.0; [verticalStack setChildren:_commentNodes];
 return verticalStack; }

也可以在用layoutSpecBlock方式写布局，这种方式可以在当前node下写子node的内部布局。

- (instancetype)init {
self = [super init];
  if (self) {
... ...
NSArray *barNodes = @[ btnNode, textNode ];
ASDisplayNode *tabBarNode = [[ASDisplayNode alloc] init];
 tabBarNode.layoutSpecBlock =
          ^(ASDisplayNode *_Nonnull node, ASSizeRange constrainedSize) {
            ASStackLayoutSpec *layout = [ASStackLayoutSpec
                stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical
                                     spacing:0
                              justifyContent:ASStackLayoutJustifyContentCenter
                                  alignItems:ASStackLayoutAlignItemsCenter
                                    children:barNodes];
            return layout;
          };
        [self addSubnode:tabBarNode];
}
}

布局node时，需要先[self addSubnode:tabBarNode];添加到父node。也可以使用self.automaticallyManagesSubnodes = YES;设定要布局的节点根据布局约束自动管理父子node。

---

相关文章阅读：
AsyncDisplayKit系列之ASLayoutSpec布局