区别 iPhone 做布局

现在主流有三种不同的 iPhone 尺寸：4 英寸、4.7 英寸以及 5.5 英寸。从设计上来讲，为特定的屏幕分别优化是很有必要的，当然，这就需要开发者做一些额外的工作。

作者：@nixzhu

虽然有所谓的 Adaptive Layout，但依其对屏幕的区分方式，我们并不能区分 iPhone 的不同屏幕尺寸，至少在应用竖屏时不行。

所以，我们依然需要用代码检测不同的屏幕尺寸，然后以其为基准来为界面元素设定如边距、大小之类的参数，以实现不同屏幕下最优的显示效果。

大家一定都写过（或使用过）判断 iPhone 型号的代码，并无甚特别。但重要的是在使用的层面，怎样设计优雅的 API 来完成不同屏幕的适配呢？

首先，我们设计屏幕的尺寸模型，因为和 UIDevice 有关，我们就扩展 UIDevice，有 enum 如下：

  1. import UIKit
  3. extension UIDevice {
  5.     enum ScreenModel {
  6.         case Classic
  7.         case Bigger
  8.         case BiggerPlus
  9.     }
  11.     // TODO
  12. }

注意，这里只从竖屏宽度上区分，将 3.5 英寸和 4 英寸都当作 Classic，如果你的应用还要区分 3.5 英寸的设备，那要对应增加 case。

然后，我们实现一个屏幕模型的单例，很明显它只需要初始计算一次即可，因此：

  1.     static let screenModel: ScreenModel = {
  3.         let screen = UIScreen.mainScreen()
  4.         let nativeWidth = screen.nativeBounds.size.width
  6.         if nativeWidth == 320 * 2 {
  7.             return .Classic
  9.         } else if nativeWidth == 375 * 2 {
  10.             return .Bigger
  12.         } else if nativeWidth == 414 * 3 {
  13.             return .BiggerPlus
  14.         }
  16.         return .Bigger // Default
  17.         }()
  19.     // TODO

我们利用 iOS 8 中 UIScreen 的 nativeBounds 来做判断。据其文档描述：

The bounding rectangle of the physical screen, measured in pixels. (read-only)

This rectangle is based on the device in a portrait-up orientation. This value does not change as the device rotates.

它表示设备在竖屏时的物理分辨率。有了它，我们就不需要关心两个 Bigger iPhone 的放大模式了。当然，若你的应用需要兼容 iOS 7 或以下版本，那就要换成其他的判断方法。如前所述，这并不是重点。

最后，我们设计一个 API 以对不同的屏幕设置不同的参数。我们需要它使用起来简单，那我们就设定其为 UIDevice 的类方法：

  1.     class func matchMarginFrom(classic: CGFloat, _ bigger: CGFloat, _ biggerPlus: CGFloat) -> CGFloat {
  2.         switch screenModel {
  3.         case .Classic:
  4.             return classic
  5.         case .Bigger:
  6.             return bigger
  7.         case .BiggerPlus:
  8.             return biggerPlus
  9.         }
  10.     }

注意其参数前的 _，这表示在使用时我们不需要写参数名，因此如果我要设定某个元素距离左边的距离，那使用起来的感觉如下：

  1.     let leftEdge = UIDevice.matchMarginFrom(15, 30, 40)

之后无论你要用其设置 AutoLayout 约束还是计算 CGRect 都可以。

如果没有这个 API 的话，那在每一个需要区别屏幕的地方我们都需要写一个 Switch 语句根据 screenModel 来判断。

另外，如果将来 iPhone 又出了新的型号以至于我们要增加新的屏幕模型，那只需要修改对应增加 ScreenModel 的 case，再进一步修改 matchMarginFrom 的实现。之后所有使用 matchMarginFrom 的地方都会编译失败，这正好给了我们补足新数据的机会，而不用担心匆忙中漏掉某一个。

而如果使用可变参数或者用传递数组的方式来实现 matchMarginFrom 就得不到编译器帮我们检查的好处。如果真有增加 ScreenModel case 的一天，那改起所有使用 matchMarginFrom 的地方就不保险了。

因为代码比较简单，就放在 gist https://gist.github.com/nixzhu/3c8ed0b8f7f24df924ac 里了。

7月22日补记：已有更合理的 Repo：https://github.com/nixzhu/Ruler

欢迎转载，但请一定注明出处！ https://github.com/nixzhu/dev-blog