堆叠视图

新增一个专案，名称 StackViewDemo

下载这个教材

解压缩之后放到 Assets.xcassets (拖曳到 AppIcon 视窗)

点击 Main.storyboard，将预览装置改成 iPhone 11 Pro

加入一个 Vertical Stack View

放入两个 Label 到 Stack 里面

把两个 Label 改成这样的文字

把第一个 Label 改成 40 点大小，红色字体

点到 Stack View

把 Alignment 改成 Center

右上角按那把尺，将Ｘ跟Ｙ设定成 33 跟 70

新增一个元件 Image View

Image 的地方选择 user1

切换到旁边的尺规，设定为宽100高134

再新增两个 Image View，分别放入 user2／user3，并且设定一样的宽高

对这三个user按著 Ctrl 键往右拉，会跑出一条线，放开滑鼠就会跑出这个视窗，选择 Aspect Ratio (约束长宽比)

把这三个图片按著 Command 选起来

按下右下角的那个往下箭头，选择 Stack View

将这个 Stack 设定 Spacing 为 20 稍微拉开图片间距

接着选取这两个视图

一样选择右下角的箭头，选择 Stack View

目前的结构是这样

将最新这个 Stack View 的 Alignment 设定为 Fill

接着设定约束条件，按下画面中的按钮，设定上方50左右各10

按下 Add 3 Constraints，约束就设定完成了

点击这个文字

将 Autoshrink 设定为 Minimum Font Size

新增一个 Label 到这个视图下方

变更文字为 Need help with coding problem? Register!，并将文字设定为置中

新增两个按钮到萤幕下方

设定第一个按钮文字为 Sign up ，背景颜色设定为红色，字体颜色白色，宽度 200

另外一个按钮设定为 Log in with Facebook，其余按照上方的方式设定

把这两个按钮选起来

选择右下方的箭头，选择 Stack view

接着选择 Add new Alignment Constraints，把 Horizontally in Container 打勾，选择 Add 1 Constraint

并且按下 Add new Constraints，将底部设定为20，按下 Add 1 Constraint

对着按钮的视图按著 Ctrl 并且拉动滑鼠并放开，选择 Width

会跑出一个 Constraints 选择下面的 Width = 145

将宽度设定为 200

按下模拟器测试一下画面

选择下面的 Orientation 把画面改成横向

点一下最上层的 Stack View

再点一下上方的蓝色线

点一下 Constant 左边的加号

将 Width 选为 Any 并且按下 Add Variation

将新增出来的 hC 改为 15

再来一样点击最外层的视图

点击 Alignment 左边的加号

一样 Width 选择 Any，按下 Add Variation

把 hC 改成 Center

点击 Need… 那个 Label

找到 Hidden 选项，按下左边的加号

按照画面上的设定，按下 Add Variation

将 hC 的 Hidden 打勾

如此，横向的画面就不会有那个文字显示出来