模仿微信适配 iPad 的布局方式

首发于公众号

微信在 iPad 上竖屏时显示的样式和手机版一样，横屏的显示为分隔视图。

UIKit 里可以实现这样的效果的组件是 UISplitViewController 。

接下来就是要自定义一个 UISplitViewController 来逐步实现像微信一样的效果。

竖屏时只显示 Master 视图

竖屏时 master 视图需要占满全屏，横屏的时候则 master 和 detail 都需要显示，可以更好的利用 iPad 大屏幕的优势。

竖屏模式下，设置 master 的宽度为全屏大小：

private func toPortraitWidth() {
  maximumPrimaryColumnWidth = maxMasterWidth
  preferredPrimaryColumnWidthFraction = 1
}
复制代码

横屏时恢复为默认宽度

private func toLandscapeWidth() {
  maximumPrimaryColumnWidth = UISplitViewController.automaticDimension
  preferredPrimaryColumnWidthFraction = UISplitViewController.automaticDimension
}
复制代码

处理子视图的显示

竖屏模式下，所有子视图的显示都由 master 来处理，

横屏模式下，子视图的显示都放到 detail 视图中，

需要实现下面这个代理方法，自己来控制页面的显示。

public func splitViewController(_ splitViewController: UISplitViewController, showDetail vc: UIViewController, sender: Any?) -> Bool {
  if isPortrait {
    masterViewController?.show(vc, sender: nil)
  } else {
    detailViewController?.viewControllers = [vc]
  }

  return true
}
复制代码

处理横竖屏切换

竖屏时，所有的页面都显示在 master 视图中，

横屏时，所有的子页面都显示在 detail 视图中，

思路比较简单，在 viewWillTransition 方法里直接操作 viewControllers 属性来达到移动子页面的目的。

public override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
  super.viewWillTransition(to: size, with: coordinator)

  var subVCs: [UIViewController] = masterViewController!.viewControllers

  // after transition, it will be portrait mode
  if !isPortrait {
    var flag: Bool = false

    if let topVC = detailViewController?.topViewController, !topVC.isKind(of: placeholderViewControllerClass) {
      subVCs.append(contentsOf: detailViewController!.viewControllers)
      flag = true
    }

    if flag {
      let placeholderViewController = (placeholderViewControllerClass as? UIViewController.Type)?.init() ?? UIViewController()

      detailViewController?.viewControllers = [placeholderViewController]
      masterViewController?.viewControllers = subVCs
    }

    toPortraitWidth()
  } else {
    if subVCs.count > 1 {
      subVCs.remove(at: 0)
      masterViewController!.popToRootViewController(animated: false)
      detailViewController?.viewControllers = subVCs
    }

    toLandscapeWidth()
  }
}
复制代码

SFSplitViewController

根据以上思路封装了一个 SFSplitViewController 组件来实现像微信一样的布局功能。

使用起来也很简单，把 SFSplitViewController 作为 RootController 就可以了，要求 master 和 detail 的容器必须是 UINavigationController 类型。

使用方法如下：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  let rootVC = SFSplitViewController(master: UINavigationController(rootViewController: MainViewController()),
                                           detail: UINavigationController(rootViewController: PlaceholderViewController()))
  rootVC.placeholderViewControllerClass = PlaceholderViewController.self

  window = UIWindow(frame: UIScreen.main.bounds)
  window?.rootViewController = rootVC
  window?.makeKeyAndVisible()

  return true
}
复制代码

完整的代码请参考我的 github： SFSplitViewController