以编程方式为iPhone和iPad布置UI的最佳做法

Question

bounty到期在6天内。该问题的答案有资格获得+ 100声望赏金。Gabe Spound正在寻找信誉良好的答案：“理想情况下，我听到一些人有在生产应用程序中为iPhone和iPad设计的UI实施解决方案的经验”

正在寻找一种干净的解决方案，以编程方式对UI进行布局，并使它在每台设备上看起来都正确。我尝试扩展CGFloat来缩放数字，具体取决于设备

extension CGFloat {
    func scale() {
        // Modifies self by multiplies by the ratio between the initial screen size and the desired screen size
    }
}

// usage
view.widthAnchor.constraint(equalToConstant: 20.scale())

我还尝试仅为iPhone和iPad创建两组不同的约束，并根据运行该应用的设备激活它们，但这似乎不必要。

我如何布置我的UI，以便它可以在所有设备上正常工作，而没有任何变通办法。我应该避免某些限制类型吗？ （例如，不是设置宽度/高度常量，而是将它们设置为屏幕（或其他视图的）宽度/高度的倍数？）

编辑：我不想过度解释自己的情况，所以让我再问一个问题。在为iPhone和iPad设计的应用程序中设置约束的最佳实践是什么？仅检查设备是否为iPad是不正确的做法，如果是，则仅对iPad有约束，如果不是，则仅对iPhone有约束。

Answer 1

原样，您的问题无法回答...

您的应用程序做什么？如果是照片幻灯片放映，则将imageView约束为完整视图，并将其内容模式设置为可缩放。瞧！在所有设备上都“看起来不错”！

如果您的应用比这更复杂，则可能需要使用all约束类型：彼此相对的元素；彼此相等不断调整的相对/相等；相对/相等乘数调整；等。并且您可能需要基于设备+方向的不同布局（不仅仅是大小不同），在这种情况下，您还需要利用size-class-variation。

此外，使应用程序“在每台设备上看起来正确”]比应用约束所涉及的更多，much，MUCH更多。

• 应用程序应使用标签栏吗？
• 导航栏？
• 它们的组合？
• 都不？
• 应该使用文本按钮还是图像按钮？
• 是否应针对辅助功能和动态字体进行调整？
• 在小屏幕和大屏幕上运行时，它甚至可能具有不同的功能吗？

[通常，第一步应该是手绘每个期望的屏幕和UI元素-包括活动“流程”-尺寸和方向的变化，因此从一开始就设计最佳的UI / UX。此时，您将开始实际的UI构造。

请记住，有些人不能制作“ Hellow World”应用程序，但可以使非常好充当“应用程序设计师”。

尽管说了这么多，但是...您几乎确定地不应采取的一种方法是：

view.widthAnchor.constraint(equalToConstant: 20.scale())

---

编辑

这是一个简单的示例-基于本文：https://www.raywenderlich.com/1343912-adaptive-layout-tutorial-in-ios-12-getting-started

一个简单的天气应用程序-设置了约束，因此在所有iPhone和iPad型号上看起来都类似：

但是，当您旋转手机时会发生什么？

很小的小云看起来不太好。添加特质变化/大小分类，我们可以得到：

---

并且，尝试回答您编辑过的问题：“仅检查设备是否为iPad ...是不正确的做法？”

是。建议针对性状变化/大小分类进行设计，以便您的应用在所有配置中都可以看起来像您想要的样子（希望对于将来推出的下一个设备也能面向未来）。

Answer 2

我通常首先获得屏幕的尺寸，然后使用框架的宽度/高度百分比

height = view.bounds.height
width = view.bounds.width
mybutton.frame = CGRect(x: width * 0.05, y: height * 0.02, width: width * 0.3, height: height * 0.1)