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

栏目: IOS · 发布时间: 6年前

内容简介:首发于公众号微信在 iPad 上竖屏时显示的样式和手机版一样,横屏的显示为分隔视图。UIKit 里可以实现这样的效果的组件是

首发于公众号

微信在 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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机组成与设计硬件/软件接口

计算机组成与设计硬件/软件接口

[美] David A.Patterson、John L.Hennessy / 郑纬民 / 机械工业出版社 / 2007-4 / 75.00元

《计算机组成与设计硬件:软件接口》(原书第3版)是计算机组成的经典教材。全书着眼于当前计算机设计中最基本的概念,展示了软硬件间的关系,并全面介绍当代计算机系统发展的主流技术和最新成就。同以往版本一样,《计算机组成与设计硬件:软件接口》(原书第3版)采用MIPS处理器作为展示计算机硬件技术基本功能的核心。书中逐条指令地列举了完整的MIPS指令集,并介绍了网络和多处理器结构的基本内容。将CPU性能和程......一起来看看 《计算机组成与设计硬件/软件接口》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具