Texture布局文档

2018-11-13 本文已影响67人 Michale_Zuo

Layout 布局

ASDK有一套自己的成熟的的布局方案，最大的好处是提升性能，这套布局主要借鉴了CSS的FlexBox思想,在布局的时候我们要注意一个原则：
从里往外!

flex有2个很重要的概念：主轴和交叉轴。主轴是子视图默认的排列方向，交叉轴是和主轴相垂直的轴，是项目在交叉方向上的排列方式。主轴默认是水平的，可以修改为竖直方向。
layout-1.png

在自定义的displaynode类中重写- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize方法，进行布局。如果没有自定义node，官方提供了一个layoutSpecBlock同样可以实现布局。

// 1.自定义node
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  请在这里进行布局
  、、、
}

// 2.没有自定义node
self.node.layoutSpecBlock = ^ASLayoutSpec *(ASDisplayNode *node, ASSizeRange constrainedSize) {

  请在这里进行布局
  、、、
};

相关API继承关系

ASLayoutSpec
- ASStackLayoutSpec：栈布局
- ASAbsoluteLayoutSpec：绝对布局
- ASBackgroundLayoutSpec：背景布局
- ASOverlayLayoutSpec ：覆盖布局
- ASInsetLayoutSpec：边距布局
- ASRatioLayoutSpec：比例布局
- ASRelativeLayoutSpec：相对布局
- ASCenterLayoutSpec：居中布局
- ASWrapperLayoutSpec：填充布局
- ASCornerLayoutSpec：圆角布局

ASStackLayoutSpec

ASStackLayoutSpec是比较常用的spec，包含几个常见的属性：

direction：主轴的方向
- ASStackLayoutDirectionHorizontal：水平
- ASStackLayoutDirectionVertical：竖直
spacing：主轴上子视图的之间的间距
justifyContent：子视图在主轴上的排列方式(下面默认主轴为水平)
- ASStackLayoutJustifyContentStart：从左往右排列
- ASStackLayoutJustifyContentCenter：居中排列
- ASStackLayoutJustifyContentEnd：从后往前排列
- ASStackLayoutJustifyContentSpaceBetween：间隔排列，两端没有间隙
- ASStackLayoutJustifyContentSpaceAround：间隔排列，两端有间隙(每个子视图的两端距离是相等的，所以如果有超过3个视图，那么中间的视图的间距比两端的视图大一倍)
alignItems：交叉轴排列方式
- ASStackLayoutAlignItemsStart：起点对齐
- ASStackLayoutAlignItemsEnd：终点对齐
- ASStackLayoutAlignItemsCenter：居中对齐
- ASStackLayoutAlignItemsStretch：没有设置高度前提下，会去拉伸直到填满整个父视图
- ASStackLayoutAlignItemsBaselineFirst： (水平布局专有)第一个子视图的文字内容作为基线对齐
- ASStackLayoutAlignItemsBaselineLast： (水平布局专有)最后一个子视图的文字内容作为基线对齐
children：添加约束的子视图 (注意：添加顺序不同，布局顺序不同e.g.[view1,view2] 和[view2,view1]这两种布局会不同)

ASAbsoluteLayoutSpec

可以设置视图的绝对位置，但是这个比较固定，官方文档里不建议使用

ASAbsoluteLayoutSpec *absoluteLayoutSpec = [ASAbsoluteLayoutSpec absoluteLayoutSpecWithChildren:@[self.photoNode,
            self.iconNode]];
return absoluteLayoutSpec;

ASBackgroundLayoutSpec && ASOverlayLayoutSpec

这两种布局方式比较类似
- 背景布局：把一个视图拉伸作为另外一个视图的背景
- 覆盖布局：和背景布局是对立的
  比较常见的业务场景：组合两个视图

ASBackgroundLayoutSpec *backgroundLayoutSpec = [ASBackgroundLayoutSpec backgroundLayoutSpecWithChild:self.blueNode
                                                                                             background:self.redNode];

// child:是在下面的视图，overlay是设置在上层的视图
ASOverlayLayoutSpec *overlayLayoutSpec = [ASOverlayLayoutSpec overlayLayoutSpecWithChild:self.redNode overlay:self.blueNode];

ASInsetLayoutSpec

可以设置边距，需要设置一个UIEdgeInsets

ASInsetLayoutSpec *insetLayoutSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(30, 30, 30, 30)
                                                                                child:self.cyanNode];

ASRatioLayoutSpec

根据自身的高度或者宽度来设置自身比例(高度 : 宽度)，所以必须先设置自身的高度或者宽度。 (ratio > 1 == 高>宽，ratio < 1 == 高<宽)
常见的业务场景：图片设置比例等

layout-2.png

ASRelativeLayoutSpec

可以设置类似九宫格上任意一个区域的位置，需要水平和竖直方向组合使用：
- horizontalPosition: 水平方向位置
  - ASRelativeLayoutSpecPositionStart: 左边
  - ASRelativeLayoutSpecPositionCenter: 中间
  - ASRelativeLayoutSpecPositionEnd: 右边
- verticalPosition: 竖直方向位置
  - ASRelativeLayoutSpecPositionStart: 上边
  - ASRelativeLayoutSpecPositionCenter: 中间
  - ASRelativeLayoutSpecPositionEnd: 下边

self.subNode.style.preferredSize = CGSizeMake(100, 100);
ASRelativeLayoutSpec *relativeLayoutSpec = [ASRelativeLayoutSpec
          relativePositionLayoutSpecWithHorizontalPosition:ASRelativeLayoutSpecPositionEnd
                                          verticalPosition:ASRelativeLayoutSpecPositionCenter
                                              sizingOption:ASRelativeLayoutSpecSizingOptionDefault child:self.subNode];

return relativeLayoutSpec;

ASCenterLayoutSpec

设置主轴或者交叉轴上的居中布局
- centeringOptions: 居中方式(X，Y，XY轴)
- sizingOptions: 这个中心布局会占据多少空间(minimum X, minimum Y, minimum XY)

layout-3.png

ASCenterLayoutSpec *centerLayoutSpec = [ASCenterLayoutSpec
           centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringXY
                                  sizingOptions:ASCenterLayoutSpecSizingOptionDefault child:self.subNode];

ASWrapperLayoutSpec

根据布局视图上设置的大小来包装和计算子视图的布局。

ASCornerLayoutSpec

常见的业务场景：设置角标

layout-4.png

// corner：边角上的node
// location: corner的位置可以设置为
/*
    ASCornerLayoutLocationTopLeft, 左上
    ASCornerLayoutLocationTopRight, 右上
    ASCornerLayoutLocationBottomLeft, 左下
    ASCornerLayoutLocationBottomRight, 右下
*/

ASCornerLayoutSpec *cornerLayoutSpec = [ASCornerLayoutSpec cornerLayoutSpecWithChild:self.photoNode corner:self.dotNode
                                                                                location:ASCornerLayoutLocationTopRight];
    // offset:corner的偏移量            
    cornerLayoutSpec.offset = CGPointMake(-3, 3);
    self.photoNode.style.preferredSize = CGSizeMake(100, 100);
    self.dotNode.style.preferredSize = CGSizeMake(10, 10);
    return cornerLayoutSpec;

layout 元素的属性

ASStackLayoutElement
- spacingBefore: 栈布局中，第一个子视图在主轴上的间隙
- spacingAfter: 栈布局中，最后一个子视图在主轴上的间隙
- flexGrow：定义子视图的放大比例，如果为0，即使有剩余空间也不会放大。如果所有子视图都设置，那么就按照设置的比例分配，如果都设置为1，那么是均分剩余空间，如果有一个设置为2，那么该视图分到的空间将是其他视图的2倍
- flexShrink：缩小比例：当空间不足的时候，缩小子视图，如果所有的子视图都设置为1就是等比例缩小，如果有一个子视图设置为0，表示该视图不缩小。
- flexBasis：可以指定某个约束的初始大小
- alignSelf：这个属性和alignItems效果一样，设置了这个，那么就会覆盖alignItems的效果
- ascender：在baseline选项中生效，文字基准线的顶部距离
- descender：在baseline选项中生效，文字基准线的底部距离
ASAbsoluteLayoutElement
- layoutPosition：ASAbsoluteLayoutSpec布局中，设置的起点位置
ASLayoutElement
- width:设置ASLayoutElement的内容宽度，默认ASDimensionAuto。minWidth和maxWidth会覆盖width。
- height：设置spec的内容高度
- minWidth：设置spec最小宽度
- maxWidth：设置spec最大宽度
- minHeight：设置spec最小高度
- maxHeight：设置spec最大高度
- preferredSize: 设置视图的大小，但是如果设置了maxSize或者minSize，那么maxsize和minSize的优先级高。
- minSize:设置最小尺寸
- maxSize:设置最大尺寸
- preferredLayoutSize:设置建议的相对尺寸，也就是一般推荐写百分比
- minLayoutSize：设置最小的相对尺寸
- maxLayoutSize：设置最大的相对尺寸
size
- ASDimension:本质上就是CGFloat，可以表示具体的值也可以表示百分比。
```
// dimension returned is relative (%)
ASDimensionMake(@"50%");  
ASDimensionMakeWithFraction(0.5);

// dimension returned in points
ASDimensionMake(@"70pt");
ASDimensionMake(70);      
ASDimensionMakeWithPoints(70);
```
-ASLayoutSize:类似CGSize，不同点是width和height既可以代表点的值也可以代表百分比的值
- ASSizeRange:表示CGSize对(最小size和最大size)

//  constrainedSize：表示一个自定义的node里的子元素可以设置的最大和最小的size
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize;

Texture布局文档

Layout 布局

相关API继承关系

ASStackLayoutSpec

ASAbsoluteLayoutSpec

ASBackgroundLayoutSpec && ASOverlayLayoutSpec

ASInsetLayoutSpec

ASRatioLayoutSpec

ASRelativeLayoutSpec

ASCenterLayoutSpec

ASWrapperLayoutSpec

ASCornerLayoutSpec

layout 元素的属性

猜你喜欢

热点阅读