官方文档:http://asyncdisplaykit.org/appledocs.html
[TOC]
ASDisplayKit的布局
/ *AsyncDisplayKit’s layout system is centered around two basic concepts:
- Layout Specs
- Layout Elements
*/
ASDisplayKit的布局主要有两种, 一种是相对布局,一种是绝对布局
ASLayoutSpec
ASLayoutSpec主要有四个类型
绝对布局
ASAbsoluteLayoutSpec
相对布局
ASStackLayoutSpec.h
ASStackLayoutSpec是一个容器型布局,主要用于描述控件之间左右或者上下位置的关系(兄弟视图)。
stack控件分为两个轴,主轴和十字轴,主轴的方向和direction方向平行。
下面介绍它的几个重要属性:
ASStackLayoutDirection
属性
主要用来描述布局方向
- 如果ASStackLayoutDirection方向是水平的,那么主轴方向是自左向右,十字轴方向是自上往下。
- 如果ASStackLayoutDirection方向是垂直的,那么主轴方向是自上往下,十字轴方向是自左向右。
- 控件的布局方向就是按照主轴来逐步计算的,所以主轴不能弄错
ASStackLayoutJustifyContent
属性
emmmm
下面的图有一个污点!!这张图表明的情况是:主轴在水平方向的情况和主轴在垂直方向的情况,图中主轴都在水平方向,是我手误,后面有时间再纠正,先声明一下。谢谢@村里竹竿
同学的指出。。
描述主轴方向上子控件的排列方式
它是一个枚举值
- ASStackLayoutJustifyContentStart
在主轴方向上,在父控件中居左排列。
- ASStackLayoutJustifyContentCenter
emmmm
这里和上面一样也是。。图片手误画错,但是逻辑是对滴!!!
在主轴方向上,在父空间中居中排列。
- ASStackLayoutJustifyContentEnd
在主轴方向上,在父空间中居右排列。
- ASStackLayoutJustifyContentSpaceBetween
在主轴方向上,在父空间中等间距排。
- ASStackLayoutJustifyContentSpaceAround
在主轴方向上,在父空间中每个空间左右间距相等排列。
ASStackLayoutAlignItems
属性
这个属性的作用是描述十字轴方向(也就是与当前主轴垂直的那条轴)上子控件的排列方式
它也是一个枚举值
- ASStackLayoutAlignItemsStart> 在十字轴方向上,居顶排列
- ASStackLayoutAlignItemsEnd
在十字轴方向上,居底排列
- ASStackLayoutAlignItemsCenter
在十字轴方向上,居中排列
- ASStackLayoutAlignItemsStretch
在十字轴方向上,填充满父空间
spacing
属性
这个属性是描述子控件之间的间距
官方文档解释:
/** The amount of space between each child. */
@property (nonatomic, assign) CGFloat spacing;
另外还有其父类中的动态生成的一些属性也放到这里统一
-
flexShrink
,flexGrow
上面这两个属性描述:
当该控件比父控件大时,则可以在当前主轴方向上缩小或者拉伸自己,直至在当前方向上填满父空间。
-
spacingBefore
,spacingAfter
上面这两个属性描述:
如果是水平方向,before表示前面的间距,after表示后面的间距。
如果是垂直方向,before表示上面的间距,after表示下面的间距。
ASBackgroundLayoutSpec
这种布局模式用来描述z轴(在屏幕上展示也就是前后)方向上的两个控件位置关系,
background控件会作为背景位于child控件正下方。整个控件的大小和background的大小由child大小决定。
ASInsetLayoutSpec
ASLayoutSpec :用来改变子控件的大小,该控件的大小由子控件大小 + UIEdgeInsets四个方向上的数值。该空间的位置保持子控件的位置不变。
ASOverlayLayoutSpec
这种控件用来描述z轴(在屏幕上展示也就是前后)方向上的两个空间的位置关系,overlay控件会覆盖于child控件正上方。整个控件的大小和overlay的大小由child大小决定。
ASRatioLayoutSpec
ASRatioLayoutSpec :主要用于约束控件的 高宽比。
ratio = 0.5, 空间的宽是高的2倍。
ratio = 2.0, 空间的高是宽的2倍。
ASRelativeLayoutSpec
ASRelativeLayoutSpec :用来方便描述child在父控件中边角特殊位置。例如:左上角,上边界中间,右上角,左边界中间,正中间,右边界中间,左下角,下边界中间,右下角。
ASCenterLayoutSpec
ASCenterLayoutSpec :是ASRelativeLayoutSpec的子类,专用于描述child在父控件中水平居中,垂直居中,正中。
对于不了解 CSS 布局的可以先去了解 CSS 布局,这对理解 AsyncDisplayKit 布局事半功倍。
CSS Flex 布局语法
TODO:
这篇主要是研究ASStackLayoutSpec的布局
后面会持续更新
2017.12.1:关于 AS 的七种布局 demo
目前么有时间去写具体的介绍,所以先上 demo,配合这篇文章大多数人都能看懂的