如何解决官方 iOS 应用开发教程中的 Auto Layout 问题？

Posted 2023-03-15

【中文标题】如何解决官方 iOS 应用开发教程中的 Auto Layout 问题？

【英文标题】：How to fix the Auto Layout issue on the official iOS app development tutorial?

【发布时间】：2017-05-06 10:12:18

【问题描述】：

在官方 ios 应用程序开发教程的Implement Edit and Delete Behavior 部分末尾，提到布局有错误，使用堆栈视图修复这些错误留给读者练习。 为了修复它们，我遵循了以下步骤：

添加一个水平堆栈视图，其中将包含 UIImageView 和一个垂直堆栈视图。 将水平堆栈视图的边缘约束到父视图的边缘。 将标签和评级控制添加到垂直堆栈视图。 在 UIImageView 中将内容模式设置为 Aspect Fit。 将 UIImageView 的 CHCR 属性设置为全 1000。

但是，布局仍然不是我喜欢的。例如，我在 iPhone 5 模拟器中启动了应用程序，情况如下：

图像视图不会扩展到单元格顶部和底部（保持纵横比）。此外，当我点击“编辑”时，图像视图会缩小而不是评级控制和标签：

类似地，当我们向左滑动一行时，不是将 label 和 Rating Control 缩小，而是将图像视图滑出视图：

我希望图像视图完全保留在那里，并根据需要缩小评级控制和标签。

我还尝试将 Rating Control 替换为包含 5 个普通按钮的普通水平堆栈视图。结果如下：

这一次，UIImageView 覆盖了整个单元格。我已经预料到了：

UIImageView 的高度等于单元格的高度。 UIImageView 的宽度与高度成正比（因为我在 Interface Builder 中将 UIImageView 的 Content Mode 设置为 Aspect Fit）。 标签和新评级控制要覆盖的剩余空间。它们应该占用剩余空间，因为我已将 UIImageView 的 CHCR 设置为全部 1000。

更新：

这是在图像视图中添加纵横比约束后的视图：

几乎完成了，除了图像视图不是从左边缘开始的事实。为了解决这个问题，我尝试将图像视图的前沿位置设置为超级视图的前沿位置，但这没有帮助。

我怎样才能达到想要的布局？

【参考方案1】：

滑动删除部分的工作完全正常。整个单元格向左滑动而不是向左收缩（看看 Mail.app，你会发现它的行为方式相同）。

至于另一个问题，当表格处于编辑模式时，图像视图是唯一缩小的部分……

调低评级视图和标签的抗压强度。 为图像视图添加纵横比约束。 选择图像视图和内容视图（使用 您截取屏幕截图的大纲视图中的命令键）并设置 他们有相同的高度。 这应该可以防止图像视图在编辑模式下缩小。如果不尝试在单元格顶层的水平堆栈视图的各种模式。

【讨论】：

添加纵横比约束修复了图像视图缩小的问题（见编辑）。但是，image view 没有附加到单元格左边缘的问题仍然存在。

请参阅我的回答中的第一句话，当用户向左滑动单元格时，图像视图不应该是可见的。这个想法是 整个 单元格正在移动以显示其下方的删除按钮。您无法使用滑动删除功能并仍然看到整个单元格。左边缘将始终从视图中隐藏。如果您希望图像在滑动过程中始终可见，则必须将其交换到单元格的右侧。

我不是在谈论滑动删除。我说的是表格在应用程序加载时的显示方式。请查看我最新编辑的第一张图片。

图像的纵横比与图像视图的比例正在吸引您。如果您查看原始版本，图像会触及屏幕的左边缘，并且正对着评级视图和标签。在新图像中，图像的两侧都有空间。图像看起来非常接近正方形，但图像视图可能比高度宽一些（查看纵横比以确认）。尝试删除比率，将图像视图设置为与图像本身相同的尺寸，然后将比率添加回来。