iPad Safari多窗口视图分析和实现思路

2019年苹果更新了 iPad mini 和 Air 的产品线，iPad 算是个相当好用的产品，比起 iPhone ，部分型号允许你外接键盘、使用触控笔等硬件来提升生产力，那么我们从软件应用开发角度可以如何帮助用户提升生产力呢？这里我将以 Safari 为参考探讨它的实现思路。

Safari 是 iOS 系统自带的浏览器，支持打开多个网页窗口。在手机上，由于屏幕空间有限，点击窗口管理的按钮可以看到手机上采用了一种视图层叠的效果，有点模拟从一个实体文件夹中翻查文件的感觉。

iPhone Safari 的多窗口管理

而在iPad 上，同样的按钮打开的视图是一个大纲视图，所有的网页窗口平铺展示，就像桌面平台的多窗口管理

iPad 上 Safari 的多窗口管理

我们再认真观察一下 Safari 的大纲视图，我们发现除了大纲视图可以进行过度拖动和回弹，双指捏合也可以进行过度缩小并回弹，双指搓开放大某个页面缩略图的时候可以退出大纲视图，聚焦到该缩略图的页面，由此我们猜测这里很可能是一个 ScrollView。另外我们可以看到缩略图的顶部有一个标题栏和一个关闭按钮，在双指缩放放大的过程中我们可以看到一个临界点，超过这个临界点的时候标题栏会渐隐，露出原本页面截图顶部的搜索栏和标签栏。放大的过程默认 Safari 会对最后聚焦的窗口的缩略图标题做上述处理。这里还有一点小细节，因为捏合过程双指还可以移动，我们实测 Safari 选择最终放大的页面还会根据捏合手势结束之后哪个视图占据目前视口面积较多、距离视口中心最近来决定，和前述标题的变化无关。

要实现类似的效果，我们需要了解 Container View Controller。我们常用的 UITabBarController、UINavigationController 都是这样的容器控制器（还有一个在 iPad 分屏展示会用到的 UISplitViewController）。他们的核心在于管理和控制多个子级ViewController 的视图，通过自己定制创造一个新的Container View Controller我们可以做出不一般的交互，例如我们这次说的多窗口管理。

每个窗口可以是一个独立的 ViewController，我们再创建一个Container View Controller来管理这些独立的 ViewController。Container View Controller 的 view 我们可以添加一个ScrollView，每当一个新的 ViewController 需要展示，我们参考Apple的示例代码添加childViewController，并把视图添加到 scrollView 上，具体frame定位可以根据scrollView 大纲视图的排布来定，然后我们通过设置 scrollView 的 zoomScale和 contentOffset 来使得新 vc 的 view 正好充满整个视口。

- (void) displayContentController: (UIViewController*) content {
   [self addChildViewController:content];
   content.view.frame = [self frameForContentController];
   [self.scrollView addSubview:self.currentClientView];
   [content didMoveToParentViewController:self];
}

除了上述的实现方法之外，我们还可以利用 snapshotViewAfterScreenUpdates: 这个 API 来获取具体某个页面的截图。通过截图这个障眼法来操作可以避免 ScrollView 的交互和子视图中的交互发生冲突。具体来说，从某个具体页面切换到大纲视图之前，对页面做一个截图，ScrollView 中也不再加载具体的 ViewController 的 view 而是仅放置静态截图。当从大纲视图回到具体页面，同样可以通过操作 zoomScale和 contentOffset 来使得截图铺满视口，完成后再操作实际 ViewController 的 view 带到视图顶层，再把截图卸载。从 Safari 的表现来看它极有可能也是采用截图的方式，我们实测网页中动态播放的视频到了大纲视图并不会继续动态播放，此外 Safari 在进程被杀后重启，大纲视图里仍有之前的截图，可以推测是通过静态截图的并落地的方式实现。

如果有人感兴趣可以留言，我再来补一个 demo，不过这里涉及的技术并不难，大家可以自己尝试。