翻译@Auto Layout Guide(自动布局指南)
- 原文:Auto Layout Guide
- 作者:Apple
- 更新:Yannmm@Github.com
Getting Started(新手上路)
Auto Layout Without Constraints(无约束的自动布局)
(译者:这里"无约束"指的是不需手动定义约束 🤔)
借助堆叠视图(Stack View),无需手动定义约束,我们也能感受自动布局的强大。堆叠视图适用于盛装行列排布的界面元素,其有若干属性可供设置。
- axis:(仅适用于UIStackView)定义内容的排布方向,水平或垂直。
- orientation:(仅适用于NSStackView)定义内容的排布方向,水平或垂直。
- distribution:定义既定方向上内容的分布方式。
- alignment:定义与既定方向垂直的方向上内容的对齐方式。
- spacing:定义两个相邻内容之间的间距。
堆叠视图的使用方法很简单:在界面编辑器(Interface Builder)中拖拽一个水平或垂直排布的堆叠视图到画布上,并放入内容。
如果一个内容有固有尺寸(intrinsic content size),在堆叠视图中它会保持这个尺寸;如果没有,界面编辑器会为其提供一个默认尺寸。缩放后者,界面编辑器会自动为其添加尺寸约束。
通过属性(Attributes)面板,修改堆叠视图的属性,微调布局。例如,下例中,间距为8pt,分布方式为均匀填充。
图3堆叠视图在布局内容时,还会考虑内容视图的内缩(content-hugging)和外扩(compression-resistance)优先级,在尺寸(Size)面板中进行修改它们。
注意
为内容视图添加约束,可以进一步调整布局;然而,要注意避免冲突:一般来说,在某个方向上,如果视图的尺寸等同于固有尺寸,就可以添加约束。更多约束冲突的相关信息,详见Unsatisfiable Layouts(无法满足的约束)。
此外,堆叠视图中还可以互相嵌套,构建更为复杂的布局。
图4总而言之,如果可能,尽量使用堆叠视图进行布局。如若不能,再手动创建约束。
更多堆叠视图的相关信息,详见UIStackView Class Reference或NSStack View Class Reference。
注意
虽然巧妙使用堆叠视图可以创建复杂界面,但仍无法完全回避手动创建约束。至少,我们需要通过约束定义堆叠视图本身的位置。
网友评论