具有自动布局和设备旋转的UIScrollView

Question

我正在尝试布局UIScrollView以具有多个内容UIView对象（几个UIImageView对象，一个MKMapView对象， UILabel对象等）。

我想要的是在项目的顶部放置一个“大” UIImageView ，在右上方放置一个MKMapView 。 我希望它们的大小相同，通常在屏幕的左右边缘之间隔开（标准20点），在视图的顶部（标准20点），并且在每个屏幕的中心通常隔开其他（标准8分）。 我希望它们是正方形的，所以它们的高度取决于它们的计算宽度。

然后，我想放置一排布局类似的UIImageView对象，这些对象通常与顶部“行”，视图的左侧和右侧以及彼此之间通常隔开。 我也希望这些对象是正方形的，从它们的宽度计算它们的高度。

在此之下，我需要一些UILabel对象（标题标签，然后是更长的描述）。

这是我的愿望的粗略布局：

人像模式

|------------------------------|
|                              |
|  |----------|  |----------|  |
|  |          |  |          |  |
|  |          |  |          |  |
|  |          |  |          |  |
|  |----------|  |----------|  |
|                              |
|  |------| |------| |------|  |
|  |      | |      | |      |  |
|  |      | |      | |      |  |
|  |------| |------| |------|  |
|                              |
|  Title Label Here            |
|                              |
|  Description here..........  |
|  Description here..........  |
|  Description here..........  |
|  Description here..........  |
|                              |
|------------------------------|

横向模式 （假定标题和描述标签不在屏幕上）

|----------------------------------------------|
|                                              |
|  |------------------|  |------------------|  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |                  |  |                  |  |
|  |------------------|  |------------------|  |
|                                              |
|  |-----------| |-----------|  |-----------|  |
|  |           | |           |  |           |  |
|  |           | |           |  |           |  |
|  |           | |           |  |           |  |
|  |           | |           |  |           |  |
|  |-----------| |-----------|  |-----------|  |
|                                              |
|----------------------------------------------|

显然，很多标题/说明内容将填充比屏幕更大的尺寸，因此，我试图将所有这些内容放置在UIScrollView 。

此外，我希望这种布局能够适应设备旋转。

我似乎无法弄清楚如何使用自动布局。

有了弹簧和支柱，这似乎是一个相当简单的过程。

使用自动布局时，我不断收到“缺少约束”和“位置错误的视图”的错误/警告。

我在这里阅读了Apple文档。

我已阅读此博客文章

遵循他们的建议对我来说真的没有意义（或者至少在我尝试时不起作用）。

Answer 1

每个视图必须至少具有4个约束，自动布局才能计算4个边。 从左上方的图像开始。 设置顶部边缘的约束：使用默认值将其固定到其superView（只需删除InterfaceBuilder中的数值）。 然后对左边缘执行相同操作。 现在，对右上角和右上角的地图视图执行相同的操作（将它们固定到superView）。 然后设置从左侧图像的右侧到地图左侧的水平约束。 再次删除数值，“自动布局”将使用默认值。 最后，为图片和地图设置长宽比1：1约束。 现在，两个顶视图已完全定义。

继续左侧的小图像，将其左边缘固定到超级视图（默认），将顶部边缘固定到大图像的底部（默认）。 现在，将中间小图像的顶部边缘与左侧图像对齐。 将右侧小图像的上边缘与中间小图像对齐。 将左侧图像的右侧边缘固定到中间图像的左侧边缘，然后对右侧+中间图像进行相同的操作。 将右图的右边缘固定到超级视图。 现在，所有图像都进行了顶部对齐，并彼此水平固定并固定在超级视图上。 同样，您需要向至少一张图像添加高宽比1：1约束。 但是，您可以将其他两幅图像的底边与第一幅图像对齐，而不是每幅图像都有自己的长宽比约束。 现在，三个小图像已完全定义。

最后，将标签分别固定在超级视图的左边缘，每个顶边缘固定在其顶视图的底部。 由于文本标签的大小取决于文本（宽度）和使用的字体（高度），因此标签仅需要两个约束（x，y）。

你完成了。