iOS 应用在每台设备上看起来都不一样,难以理解自动 layout/constraints

iOS app looks different on every device, trouble understanding auto layout/constraints

我正在尝试创建一个非常基本的应用程序,但我一直 运行 遇到同样的问题。我正在故事板中的 iPhone 11 上设计 UI,它看起来像这样

这正是我希望它在每个屏幕尺寸上的显示方式,但是当我 运行 它在 iPhone 8 模拟器甚至插入 iPhone 7 时,看起来像这样:

这非常令人沮丧,因为我不知道自己做错了什么。我已经尝试按照来自多个来源的 autolayout/constraint 说明进行操作,但我似乎无法让它工作!非常感谢任何有关如何解决此问题或至少在哪里寻找指导的建议。

欢迎使用 iOS 编程,约束一开始可能令人生畏,每个人都会遇到。我从下面的这些链接中了解到。虽然他们需要先耐心阅读。

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html#//apple_ref/doc/uid/TP40010853-CH11-SW1

https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/ProgrammaticallyCreatingConstraints.html

请记住,每个视图都需要两件事来定义其布局、大小和位置。

  1. 位置是最简单的,您可以为任何视图定义前导、尾随、顶部和底部,我们还有 centerX 和 centerY
  2. 大小有点棘手,因为一些视图定义了自己的大小(内在内容大小)。但是如果视图没有定义自己的大小,它们要么由它们的内容(子视图)定义,要么由我们(通过宽度和高度锚点)定义