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

Posted 2023-03-15

【中文标题】具有自动布局和设备旋转的 UIScrollView

【英文标题】：UIScrollView with Auto Layout and Device Rotation

【发布时间】：2014-03-20 19:54:03

【问题描述】：

我正在尝试布置一个 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 文档here。

我已阅读 this 博文

听从他们的建议对我来说真的没有意义（或者至少，当我尝试时，它不起作用）。

【问题讨论】：

您是否尝试在内部视图和UIScrollView 之间直接添加约束。由于多种原因，这不起作用。在UIScrollView 内放置东西的最接近方法是使用与内容大小相同的“容器视图”。将其放置在 (0,0) 并将您的内容放入此容器中。您现在可以相对于容器视图布置内容。

此外，您尝试实现的布局似乎比标准 UIScrollView 更适合 UITableView 或 UICollectionView。

【参考方案1】：

每个视图必须至少有 4 个约束，以便 Autolayout 计算 4 条边。 从左上角的图像开始。为顶部边缘设置约束：将其固定到其 superView 并使用默认值（只需删除 InterfaceBuilder 中的数值）。然后对左边缘做同样的事情。 现在对右上角和右边缘的右上角地图视图执行相同的操作（将它们固定到 superView）。 然后设置从左图像的右边缘到地图的左边缘的水平约束。再次删除数值，自动布局将使用默认值。 最后为图像设置纵横比 1:1 约束，为地图设置相同的约束。 现在两个顶视图已经完全定义好了。

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

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

你已经完成了。