Texture (二)

简书内容都是个人的知识点整理和笔记。

Texture布局

Texture的Layout API相较于复杂且增加开销的Auto Layout其具有以下的有点:

  • 快捷:比Auto Layout 布局快速
  • 异步并发:可以在后台线程中对布局进行计算从而不影响交互
  • 规范:使用不可变数据结构声明布局
  • 可缓存
  • 可扩展

熟悉使用Flexbox布局(比如RN、Flutter)的人会从Texture发现许多相似的地方。

Flexbox旨在为不同的屏幕尺寸提供一致的布局。在堆栈布局中,您可以在垂直或水平堆栈中对齐项目。堆栈布局可以是另一个堆栈布局的子代,这使得使用堆栈布局规范创建几乎任何布局成为可能。

Texture布局主要围绕这两个中心概念:

  • Layout Elements
  • Layout Specs

Layout Elements

布局规范(ASLayoutSpec)由布局元素构成并对他们进行排列,并且所有的节点(ASDisplayNode)和布局规范都遵循了ASLayoutElement的协议,这意味着我们可以通过节点和其他作为子元素的规范来组合实现复杂的布局规范。

Layout Specs

布局规范可以作为一个盛放布局元素的容器通过理解布局元素的布局来使他们可以相互关联。
Texture提供了几个ASLayoutSpec的子类:

ASWrapperLayoutSpec

作为ASLayoutSpec一个简单的子类,它可以包裹ASLayoutElement并根据布局元素上设置的大小计算子项的布局。

ASStackLayoutSpec

作为Texture最有用最强大的布局规范,ASStackLayoutSpec使用flexbox算法确定其子项的位置和大小。
ASStackLayoutSpec除了具有布局元素所具有的属性外,还额外提供了7个属性:

  • direction:指定子元素的堆叠方法,既设定主轴的方向
  • spacing:所有子元素之间的间距
  • horizontalAlignment:指定子元素在水平方向上的对齐方式
  • verticalAlignment:指定子元素在垂直方向上的对齐方式
  • justifyContent:指定子元素沿着主轴的排列方式
  • alignItems:指定子元素沿着次轴的排列方式
  • flexWrap:子元素是否堆叠为多行
  • alignContent:当子元素堆叠为多行时,多行的对齐方式


    justifyContent.png
ASInsetLayoutSpec

ASInsetLayoutSpec会在减去上左下右的插入间距后将约束后的最大Size传递给其子元素。一旦子元素确定了它的最终尺寸,ASInsetLayoutSpec就会将其尺寸加上插入边距作为最终尺寸。因此子元素必须具有内部大小或明确设置其大小。


ASInsetLayoutSpec

我们可以使用INFINITY作为插入间距中的值来保持子元素原有的尺寸。

ASOverlayLayoutSpec

在子元素上拉伸覆盖另一个元素。叠加元素的大小会根据子元素进行计算。

ASBackgroundLayoutSpec

与ASOverlayLayoutSpec相反,在子元素后拉伸垫底另一个元素。垫底元素的大小会根据子元素进行计算。

ASCenterLayoutSpec

该规范会根据规范的最大约束大小将其子元素置于居中位置。


ASCenterLayoutSpec
ASRatioLayoutSpec

ASRatioLayoutSpec以固定的宽高比进行缩放的布局规范。此规范必须具有作constrainedSize为它传递宽度或高度。


ASRatioLayoutSpec
ASRelativeLayoutSpec

根据垂直和水平位置说明符布置组件并将其放置在布局边界内。

ASAbsoluteLayoutSpec

字面上的意思,绝对布局,在iOS开发上都熟。

ASCornerLayoutSpec

ASCornerLayoutSpec是一种用于快速角元素布局的规范。通过使用声明性代码表达式而不是手动坐标计算的方法在角落中定位元素。


ASCornerLayoutSpec

在了解到Texture的布局后我们下面将会开始通过组合布局规范与布局元素来构造复杂的页面。

参考资料

Texture - Layout
AsyncDisplayKit系列之ASLayoutSpec布局

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • 翻译自“Auto Layout Guide”。 1 入门 1.1 理解自动布局 自动布局根据视图层级结构中视图上的...
    lakerszhy阅读 3,638评论 3 26
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AGI阅读 16,003评论 3 119
  • Texture快速开始(C) 1.1: Motivation & Benefits 对于复杂的视图层次结构来说,U...
    iYeso阅读 1,522评论 0 3
  • 为谁醉倒为谁醒?到今犹恨轻别离。 两年前,从西安走的那天,乌云把天空压的很低很低,看着车窗上滑下的...
    从此无恙阅读 136评论 0 1