iOS 中的 UI 自适应

你会在代码中查看当前用户的设备类型，然后根据该类型来写布局代码。还有，当处于横屏状态时，处理布局的代码可能就会发生一点特殊的变化。这个行为是不可持续的，你不能一直为这 12 种屏幕尺寸分别写不同的布局代码，这种做法完全行不通。

自适应布局介绍(4:53)

这就是为什么苹果要发布自适应布局的原因，这也是我们处理布局的首选方式之一。它将尺寸这个设计细节进行了抽象。我们无需再关心设备的类型或者设备的方向。相反，我们将这些观念用一种称为“屏幕分类 (size classes) ”的东西组织起来。

什么是屏幕分类呢？这不是在说屏幕有多少个像素点的问题，而是在说有多少空间的问题。我们有多少空间可供我们放东西进去呢？

我们将屏幕划分为两种不同的类型：紧凑的 (compact) 和常规的 (regular)。紧凑意味着空间不是很充足，我们会受到某种局限。常规意味着空间的余量是正常的，这就是这两种类型的涵义。

我们同时还会以两种不同的方向来讨论屏幕分类，就是横向和纵向。比如说横向紧凑、纵向常规之类的屏幕类型。这是一种分类的方式，描述特定视图的空间量。

设备上的屏幕分类(7:34)

那么这些概念是如何与真实设备映射的呢？

当你在使用 iPad 或者 iPad Pro 的时候，两个方向都是常规类型。横向和纵向都存有大量的空间，一般来说在 iPad 上你随时都可以将足够的内容放到上面。

然而，当你看到竖屏的 iPhone 时，会发现它的宽度变为了紧凑型。对于 iPhone 来说，它的横向层面并没有太多的空间。接着当你将 iPhone 横置过来时，纵向方向上就没有太多空间了，因此纵向变为了紧凑。如果你在竖屏的 iPhone 上查看内容的时候，纵向方向有着充足的空间，因为你可以上下滚动，但是当你将其横置过来的时候，一般来说你是无法左右滚动的。没有人愿意读完某个东西后，滚动到另一侧，然后如果要读取开头的话，还得将所有东西回滚回去。因此，我们可以将其认为是紧凑的。

在 iOS 9 中，随着多任务 (multi-tasking) 的推出，这个概念变得愈发重要。例如，无论其方向如何，iPad 通常是常规/常规尺寸的。然而，当你在 iOS 9 中使用新推出的多任务时，你可以在右侧进行滑动从而显示出其他的应用。如果你使用新的 iPad 的话，你可以将其推得更远，让两个应用分别对半占据屏幕。这时候，实际上它是将其视为运行着两个相邻 iPhone 应用的 iPad。即使这个应用是专门针对 iPad 推出的，但是在这个情形下它会使用和 iPhoen 相同的屏幕分类配置，也就是横向紧凑的纵向常规的屏幕配置。

随后，在 iPad Pro 中，我觉得你可以拥有两个相邻的常规/常规应用。这时候，我们已经将设备尺寸从特定设备中抽象出来了，我们现在可以在同一个设备上运行不同的尺寸设计。

适配自适应布局(11:16)

那么，怎样适配自适应布局才是合理的呢？我们的最终目标就是创建一个管理全局的故事板文件。这个故事板可以在 iPad、iPhone 以及所有不同尺寸的 iOS 设备上运行。我们不再使用 4 个不同的故事板来构建布局，我们同时也可以不再 UI 更新时一个个地对这几个故事板进行更改。对这个管理全局的故事板进行更新，就意味着所有设备上的 UI 都能相应得到更新。那么我们该怎么做呢？我建议大家采取下列五个步骤：

1. 搭建基础布局
   • 这一步是用来“让我们搭建需要在屏幕上显示的内容”，以及搭建我们大多数时候想展示的布局的。
2. 选择要重构的屏幕分类
3. 卸载无关的约束
   • 我们在这里将谈论自动布局 (Auto Layout)。这些约束将约定了不同视图的尺寸和位置，你可以通过“卸载”操作将不需要的约束移除。当我们选择一个特定的屏幕分类时，我可能就想要把一些要改变的约束移走。
4. 为特定的屏幕分类添加新的约束
   • 这一步将确保我们在新的屏幕尺寸中能够得到实际想要的布局。
5. 对其他需要的屏幕分类重复上述步骤
   • 最重要的事情就是不要为 iPhone 纵向、横向布局分别创建不同的布局，然后在前往 iPad 的时候又重头开始。这会导致你对真实布局产生混乱和困惑。最好的方法就是以基础布局开始，然后根据不同的设备对之进行些许改变。

示例(13:22)

我在 GOTO Copenhagen 2015 上对这个方法写了一个示例，你可以在文章上方看到。我解释了如何从一个简单的基础布局，通过安装新的约束从而给不同的设备添加布局的。

什么是自适应的？(25:34)

什么类型的东西是可以自适应的呢？首先第一个是约束。你可以取一个约束，然后决定是否在特定的屏幕分类中显示它。这样，你就可以以多种不同的方式重新排列和组织布局了，这一点非常赞。但是这不仅仅是自适应布局的完全能力。还有其他东西也可以完成自适应。

您同样也可以改变某个约束的约束值 (constant)。如果有一个约束表示“这两个视图之间的间隔是 10 点”，那么我们可以让其变成：“如果有充足的空间，那么这个间隔可以是 100 点”。我无需删除并添加新的约束。奇怪的是，虽然你可以改变约束的倍数 (multiplier)，但是为了实现这个效果，实际上你必须卸载这个约束创建一个新的才能实现这个效果。

你同样也可以改变字体。如果对于 iPhone 和 iPad 应用来说，我想改变字体大小以让 iPad 上的字体更大一些。我可以轻松完成这个操作。

最后就是视图的安装，这同样也是非常重要的。如果你想在 iPad 上重用 iPhone 上的布局的话，你可能不想改变字体大小以及间隔距离。你可能想要创建一个新的视图在 iPad 上显示，这个操作同样也是非常简单的。

屏幕分类以及字体改变示例(27:23)

这里有一个关于如何改变屏幕分类和字体大小的示例，单击此处来查看上面的视频！

与代码做抗争(31:12)

这在代码中该如何实现的呢？通过界面构造器非常轻松愉快，但是如果想要在代码中实现此功能的话，很可能就要面临着一场艰难的“战争”了。

public class UITraitCollection : NSObject, NSCopying, NSSecureCoding, NSCoding {    ...          public var userInterfaceIdiom: UIUserInterfaceIdiom { get }     public var displayScale: CGFloat { get }     public var horizontalSizeClass: UIUserInterfaceSizeClass { get }    public var verticalSizeClass: UIUserInterfaceSizeClass { get }      @available(iOS 9.0, *)    public var forceTouchCapability: UIForceTouchCapability { get }  }

public protocol UITraitEnvironment : NSObjectProtocol {    public var traitCollection: UITraitCollection { get }      public func traitCollectionDidChange(previousTraitCollection: UITraitCollection?)  }

extension UIViewController {    public func setOverrideTraitCollection(collection: UITraitCollection?,      forChildViewController childViewController: UIViewController)     public func overrideTraitCollectionForChildViewController(      childViewController: UIViewController) -> UITraitCollection?  }

public protocol UIContentContainer : NSObjectProtocol {    ...          public func viewWillTransitionToSize(size: CGSize,      withTransitionCoordinator coordinator:      UIViewControllerTransitionCoordinator)          public func willTransitionToTraitCollection(      newCollection: UITraitCollection,      withTransitionCoordinator coordinator:      UIViewControllerTransitionCoordinator)  }

extension UIViewController {    @available(iOS, introduced=2.0, deprecated=8.0)    public var interfaceOrientation: UIInterfaceOrientation { get }          @available(iOS, introduced=2.0, deprecated=8.0,      message="Implement viewWillTransitionToSize:withTransitionCoordinator: instead")     public func willRotateToInterfaceOrientation(       toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval)    @available(iOS, introduced=2.0, deprecated=8.0)    public func didRotateFromInterfaceOrientation(      fromInterfaceOrientation: UIInterfaceOrientation)           @available(iOS, introduced=3.0, deprecated=8.0,       message="Implement viewWillTransitionToSize:withTransitionCoordinator: instead")    public func willAnimateRotationToInterfaceOrientation(      toInterfaceOrientation: UIInterfaceOrientation, duration: NSTimeInterval)  }

override func viewWillTransitionToSize(size: CGSize,    withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator) {        super.viewWillTransitionToSize(size, withTransitionCoordinator: coordinator)    let image = imageForAspectRatio(size.width / size.height)          coordinator.animateAlongsideTransition({      context in       // 创建一个变化效果(transition)，匹配上下文的持续时间(duration)      let transition = CATransition()      transition.duration = context.transitionDuration()            // 播放淡入淡出动画      transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)      transition.type = kCATransitionFade      self.backgroundImageView.layer.addAnimation(transition, forKey: "Fade")              // 设置新图片      self.backgroundImageView.image = image      }, completion: nil)  }