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布局
