内容简介:首发于公众号微信在 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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- rem 适配布局
- 移动端布局适配hotcss+postcss-pxtorem
- flutter 屏幕尺寸适配 字体大小适配
- 前端适配:移动端/web端适配方案
- iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案
- iOS 关于全面屏适配的方案及UI在不同尺寸下适配方案
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Creative Curve
Allen Gannett / Knopf Doubleday Publishing Group / 2018-6-12
Big data entrepreneur Allen Gannett overturns the mythology around creative genius, and reveals the science and secrets behind achieving breakout commercial success in any field. We have been s......一起来看看 《The Creative Curve》 这本书的介绍吧!