前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在 iPhone 上使用 Popover Segue

在 iPhone 上使用 Popover Segue

作者头像
Sheepy
发布2018-09-10 12:20:09
9800
发布2018-09-10 12:20:09
举报

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

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

Popover.gif

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

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

LandStatusMenu.png

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

SetContentSize.png

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

DebugSize.png

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

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

DragSegue.png

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

PopoverSegueMenu.png

最后就是稍微写几行代码了,在 HomeViewController 中:

代码语言:javascript
复制
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if segue.identifier == SegueId.LandStatus {
        let popoverViewController = segue.destinationViewController
        popoverViewController.popoverPresentationController!.delegate = self
    }
}

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

代码语言:javascript
复制
struct SegueId {
    static let LandStatus = "LandStatusPopover"
    static let LandInfo = "LandInfoShow"
}

最后让 HomeViewController 遵守委托协议,实现委托方法:

代码语言:javascript
复制
extension HomeViewController: UIPopoverPresentationControllerDelegate {
    func adaptivePresentationStyleForPresentationController(controller: UIPresentationController) -> UIModalPresentationStyle {
        return UIModalPresentationStyle.None
    }
}

这样就完成了。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016.01.14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档