借助StackView简化页面布局

　　当某个页面需要承载较多内容时，页面难免显得拥挤，此时页面布局也越来越难以掌控，于是堆叠视图（StackView）应运而生。利用堆叠视图可以把一组视图组合起来，按行或列“流线化自适应”，而无需对其中每一个视图定义大量约束或代码，实现这个组合的“自治化”。

 

　　在Xcode中，使用堆叠视图有两种方式：

　　1，从组建库中拖一个堆叠视图控件，然后将需要布局的控件逐一放入堆叠视图中

　　

　　2，选中需要组合的控件，利用布局条上的“Stack”选项自由组合堆叠视图

　　

 

　　下图是一个运用堆叠视图设计页面的案例：

　　

　　该页面被分割为三部分（三个stackview）布局，每部分之间互不干扰：

　　

　　为避免中间的图片部分超出页面，需将中间的部分与外部View设置等宽：

　　

　　强行设置宽度可能会导致图像变形，再让其等比例缩放即可：

　　

 

　　这样布局完成后在竖屏方向基本没什么问题，但如果横屏显示还是会造成拥挤：

　　

　　因此对横屏模式还要单独适配，首先将SizeClass设为纵向紧凑模式，以模拟我们的横屏操作：

　　

　　为了使文字不至于堆叠，上部分的文字在横屏模式下更改为水平堆放：

　　

‘　　

　　更改图片的缩放比例：

　　

　　对下部的两个label也做同样调整，效果如下：