以编程方式为 iPhone 和 iPad 布局 UI 的最佳实践

Question

寻找一种简洁的解决方案，以编程方式布置 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

我通常先获取屏幕的大小，然后使用框架的宽度/高度百分比

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)

Answer 2

您的问题目前无法回答...

你的应用是做什么的？如果它是照片幻灯片，请将 imageView 限制为完整视图并将其内容模式设置为比例匹配。瞧！它在所有设备上都“看起来不错”！

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

此外，让应用程序“在每台设备上看起来都正确”涉及很多，很多，很多 不仅仅是应用约束。

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

一般来说，您的第一步应该是手绘您希望拥有的每个屏幕和 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 型号上看起来都相似：

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

小小的云看起来不太好。添加 trait-variations / size-classes，我们可以得到：

---

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

是的。建议针对 trait-variations / size-classes 进行设计，以便您的应用程序在所有配置中看起来都符合您的要求（希望下一款设备也能适应未来）。

Answer 3

只检查设备是否是 iPad 是否是一种不好的做法？ 是，只有 iPad 有约束，如果没有，有约束 只是 iPhone。

如果您计划支持拆分视图，那绝对是不行的。实现和处理这一点的代码总是有点冗长。这里没有单线来实现你想要的。

在您的-[UIViewController viewDidLoad] 方法中，您希望使用控制器视图可用的基本特征集合来设置视图。这是你的起点。

当您的应用程序的窗口被操作系统调整大小时（想象一下，将横向模式下的全屏应用程序转换为分体大小的应用程序，占据屏幕的三分之一）：在您的视图上调用 -[UIViewController traitCollectionDidChange:] 方法控制器。这是您更新布局约束的地方。

您可以而且应该将布局逻辑封装在一个方法中，并从-[UIViewController viewDidLoad] 和-[UIViewController traitCollectionDidChange:] 调用它。

在这种方法中，我不建议检查主机设备是否为 iPad。您特别想查看活动特征集合的 horizontalSizeClass 和 verticalSizeClass 属性以确定布局约束的值。

有关更多信息，我建议您阅读以下文档：
1.https://developer.apple.com/documentation/uikit/uitraitcollection?language=objc
2.https://developer.apple.com/documentation/uikit/uitraitenvironment/1623516-traitcollectiondidchange?language=objc

第二个链接有一个关于如何检查是否需要更新约束的简单示例。