×

2. Auto Layout Without Constraints(无约束的自动布局)@Auto Layout Guide(自动布局指南)

96
fever105
2017.09.13 16:36* 字数 680

翻译@Auto Layout Guide(自动布局指南)


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 ReferenceNSStack View Class Reference

注意

虽然巧妙使用堆叠视图可以创建复杂界面,但仍无法完全回避手动创建约束。至少,我们需要通过约束定义堆叠视图本身的位置。

Web note ad 1