iOS14+Swift5.x+Xcode12学习笔记（2）—— 初识布局

布局简介

Xcode的布局工具共有两套，一套为Autoresizing，另一套为AutoLayout。

Autoresizing

将可视化控件拖放到ViewController上时，默认使用的就是Autoresizing排版。在Storyboard中由两个同心正方形表示，外面的正方形表示SuperView（父视图），里面的正方形代表控件。例如，如果需要控件的宽度随屏幕的宽度自动调整，我们只需要设定控件的「左」、「右」、「上」、以及「水平方向」即可。（可以理解为通过这些线段将控件约束到父视图中，此时他出了宽度之外的位置属性都是被固定的）

AutoLayout

AutoLayout有两个重要的工具，trait variation(特征变量）和constraint（约束）。

• tarit variation（特征变量）帮助我们检查控件在不同屏幕尺寸的设备上的位置是否合理。在Stroyboard中点击「View as: …」按钮可以查看支持预览的设备。点击Vary for Traits可以设置控件是否在符合某种特征的设备中出现，如某些控件只在iPhone直向时出现，横向时不出现。
  苹果设备的宽高属性在特征变量中被归纳为regular（正常）和compact（湖紧凑），可以组合出四种不同的状况，如 Regular Width和Compact Height。在Storyboard中通常时以缩写的形式表示（wR和hC）。有时，在iPad布局中布局中会遇到Any，代表在regular和compact之间的情况。
• constraint（约束）帮助我们将控件固定在某个控件或是屏幕的边缘上。当被绑定的控件随着屏幕宽度改变而移动时，绑定到该控件上的控件会随之移动。（tips：在Xcode9之前，以Lable控件为例，如果只设定「左」、「上」约束是没有问题的，在Xcode9之后，会报出警告，因为此时该控件长度过长时可能覆盖其他控件（比如Label中填入了一个超长的字符串或者在多国语言转换时可能会导致字符串超出预想的长度），此时如果让Xcode自动修正，会在控件加上可变动大小的「右」约束（>=)。

Storyboard布局案例

• 在屏幕中放置三个Label控件，水平居中，分别位于屏幕1/4、2/4、3/4处。
  首先在Storyboard中放置三个Label控件，勾选Horizontally in Container和Vertically in Container。此时三个控件均在界面中水平垂直居中，此时依次设置三个控件的「Align Center Y」的Multiplier（倍率）为2/4、4/4、6/4。（此时三个Label重叠在一起，可以在Storyboard编辑界面的左侧文件浏览中找到各个Label，设置「Align Center Y」属性的尺寸面板图标为三角形）
  需要平均分布的控件的个数与各个控件的倍率对照：
  两个 => 2/3,4/3 (1/2 * 2/3 =