在 iPhone 上使用 Popover Segue

男娘i 2022-06-09 12:11 263阅读 0赞

iOS 系统提供了4种基本的转场方式：Show、Show Detail、Present Modally、Present as Popover。我们平常用的最多的是 Show ，就是从右向左滑入新页面，这也是最符合用户习惯的转场方式。

Popover 一般是用在 iPad 上，在 iPhone 上不能直接使用。因为早些时候 iPhone 的尺寸都不大，苹果是非常不推荐在 iPhone 上使用 Popover 这种风格弹出新页面的。不过现在 iPhone 的尺寸越来越大了，偶尔也会碰到些挺适合 Popover 的场景，比如下面这样的：

![strip][]

Popover.gif

最近我渐渐从手写代码用 Frame 布局转向使用 Storyboard ＋ Auto Layout 布局了，真是食髓知味，妙不可言呐。所以这次我就演示一下用 Storyboard 来快速实现如上图的 Popover 效果。

首先，先拉一个 UITableViewController 出来，用 Static Cells 就行，把菜单项填上：

![1240][]

LandStatusMenu.png

然后将 Use Preferred Explicit Size 选项打勾，并在下方填上你所需要的弹出菜单的尺寸：

![1240 1][]

SetContentSize.png

当然这样凭空设置尺寸不是很直观，我们可以先在 Storyboard 模拟一下：

![1240 2][]

DebugSize.png

这个时候我们刚刚拖到 Storyboard 上的那个 UITableViewController 就会显示 150 ＊ 200 的大小了，你可以用 Simulated Size 直接在 Storyboard 上调试尺寸，调试完了之后把最合适的尺寸填到 Content Size 里就好。

接下来就是拉一个 Segue 了，我这边是从 HomeViewController 上的“地块”按钮拉到 LandStatusViewController，Segue 的类型选择 Present as Popover：

![1240 3][]

DragSegue.png

然后最好填一下 Segue Id，便于在代码中区分多个不同的 Segue：

![jpg][]

PopoverSegueMenu.png

最后就是稍微写几行代码了，在 HomeViewController 中：

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
        if segue.identifier == SegueId.LandStatus {
            let popoverViewController = segue.destinationViewController
            popoverViewController.popoverPresentationController!.delegate = self
        }
    }

这个`SegueId.LandStatus`就是个字符串常量，跟 Storyboard 中填的 Identifier 是一致的：

struct SegueId {
        static let LandStatus = "LandStatusPopover"
        static let LandInfo = "LandInfoShow"
    }

最后让 HomeViewController 遵守委托协议，实现委托方法：

extension HomeViewController: UIPopoverPresentationControllerDelegate {
        func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle {
            return UIModalPresentationStyle.None
        }
    }

这样就完成了。

作者：Sheepy  
链接：http://www.jianshu.com/p/5ffeb2170101  
來源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[strip]: /images/20220609/d70ae2dc667b4759a63b1bed21f9640b.png
[1240]: /images/20220609/85f0654cf6f34853b5e451bf56720a7e.png
[1240 1]: /images/20220609/556160d391124efaa481b06def46170e.png
[1240 2]: /images/20220609/99ab48b790e2413ebadeb5544dacd96d.png
[1240 3]: /images/20220609/e18469be9a4a44a79a81d20afc982554.png
[jpg]: /images/20220609/04f50ed548114be19c4bdf65d1d4c2f2.png