在 Swift 项目中实现侧滑菜单-利用 SWRevealViewController

你可以完全自己手动写一个侧滑菜单,但是现在在 GitHub 上面已经有很多免费的开源库了,如果不是有很特别的需求,大可不必新建一个轮子。

在这里我使用的这个第三方库名字叫做 SWRevealViewController,作者是 John Lluch。这个免费的类库提供了很方便快捷的方法去把侧滑菜单加入到你的 App 里面,而且它还提供了很多个性化的设置项。它是用 Objective-C 来写的,但是我们也可以很方便的在 Swift 项目中去使用它。你分分钟便可学会如何使用。

首先来看一下我们的 Demo 是个什么样子的

像往常一样,我们还是创建一个 Demo App 来展示一下具体如何使用 SWRevealViewController。这个 Demo 很简单,功能上也不完善;主要的目的只是引导你去了解如何实现侧滑菜单。

我们将要实现的侧滑菜单大概是这个样子的:

  • 用户可以单击左上角的列表按钮来显示侧滑菜单
  • 用户也可以右滑内容视图来显示侧滑菜单
  • 侧滑菜单显示的时候,用户可以再次单击列表按钮来关闭它
  • 用户也可以左滑内容区域来关闭它

新建一个 Xcode 项目

这篇文章的主要目的是讲解侧滑菜单的实现,所以为了节省你的时间,你可以直接下载这个Xcode模板来开始学习。

这个工程里面已经创建好了一个 Storyboard,它包含了所有我们需要的视图控制器。如果你已经下载好了模板,那么先打开 Storyboard 来看一下。

想要使用 SWRevealViewController 来实现侧滑菜单,你需要有一个控制器做容器,用它来存放菜单控制器和一组内容控制器。我已经为你创建好了菜单控制器,它是一个静态的列表视图,有三行内容。对应的有三个内容控制器来分别展示新闻、地图和照片。鉴于这个 Demo 只是演示的目的,内容控制器里放置的都是静态内容。所有用到的图标和图片资源都已经包含在了工程里面(注:在这里需要感谢Pixeden网站提供的免费图标)。

接下来开始使用 SWRevealViewController

依照上文说的,我们要用 SWRevealViewController 来实现侧滑菜单。首先从GitHub上把这个类库下载下来并解压zip文件。解压之后你能找到 SWRevealViewController 文件夹,这个文件夹里面有两个文件。在工程目录下选中 SidebarMenu,单击鼠标右键,选择“New Group”,命名为“SWRevealViewController”,将上面提到的两个文件拖拽到 SWRevealViewController 这里。在你刚添加完这两个文件之后,Xcode 会及时的弹出一个提示,是否要配置一个连接 Objective-C 代码的头文件;有了这个头文件,你就可以将 Objective-C 代码转做 Swift 代码来使用了。所以,点击 Yes 继续。

然后 Xcode 会随即生成一个名字叫做“SidebarMenu-Bridging-Header.h”的文件,打开这个文件并将下面的代码复制进去:

    #import "SWRevealViewController.h"

配置前置(显示内容)和后置(菜单栏)视图控制器

SWRevealViewController 内置了对 Storyboard 的支持。你需要做的就是将前置和后置控制器与 SWRevealViewController 用 Segue 联系起来。前置控制器是用来显示内容的主控制器,在我们的 Storyboard 里面对应的是连接新闻控制器的导航控制器。后置控制器是用来显示导航菜单的控制器,这里对应的是侧滑菜单栏。

点开 Storyboard,首先选中那个空控制器(容器)并把它的类设置为 SWRevealViewController。

然后,按住Control键-鼠标左键 从 SWRevealViewController 拖拽到菜单控制器,释放按键后悔显示一个选择 Segue 类型的菜单,在这里选择“reveal view controller set controller”。

这样就创建了一个 Segue,选中这个 Segue 将它的 identifier 设置成“sw_rear”;这样 SWRevealViewController 就知道了它对应的是后置控制器,这个菜单就会隐藏在内容视图的后面。

接下来,用同样的方法将 SWRevealViewController 和新闻控制器对应的导航控制器联系起来,也是选择“reveal view controller set controller”选项。

把这个 Segue 的 identifier 设置成“sw_front”,告诉 SWRevealViewController 这是前置控制器。

继续之前,运行一下你的 App,它应该是能正常显示新闻视图。但是你点击按钮或者滑动视图都不能把菜单栏调出来,这是因为我们还没有实现这些功能。

如果程序运行正常,我们继续下面的步骤。打开 NewsTableViewController.swift,在 viewDidLoad 这个方法里面插入下面的代码:

if self.revealViewController() != nil {
    menuButton.target = self.revealViewController()
    menuButton.action = "revealToggle:"
    self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())
}

SWRevealViewController 提供了一个叫 revealViewController() 的方法来从任何子控制器中拿到父控制器 SWRevealViewController;它还提供了一个叫 revealToggle: 的方法来 显示/隐藏 菜单栏,最后我们添加了一个手势。

现在你既可以点击按钮来控制侧滑菜单,也可以滑动内容视图的区域来控制侧滑菜单了;跑起模拟器试一下吧。

添加侧滑菜单的点击事件

到现在为止,我们还没有为菜单栏配置任何 Segue;所以不管你点击哪一个菜单项,App 总是不能切换到相符的那个视图。

那么,现在我们再次点开 Storyboard。首先选中地图Cell,按住按住 Control 键-鼠标左键 拖拽到地图控制器对应的导航控制器,然后选择“reveal view controller push controller”。对新闻 Cell 和照片 Cell 也做相同的操作,不过连接的时它们各自对应的控制器。

然后,在 MapViewController.swift 和 PhotoViewController.swift 两个文件中,对应也插入下面的代码:

if self.revealViewController() != nil {
    menuButton.target = self.revealViewController()
    menuButton.action = "revealToggle:"
    self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())
}

OK!运行起来看一下吧。

定制样式

SWRevealViewController 提供了很多方法来配置菜单栏的样式。

比如你想更改菜单栏的宽度,你就可以更新 rearViewRevealWidth 属性的值即可。试着在 NewsTableViewController.swift 文件的 viewDidLoad 方法里插入下面的代码:

self.revealViewController().rearViewRevealWidth = 62

运行 App 之后你会看到这样的结果:

更多的参数设置,你可以去文件 SWRevealViewController.h 里面去摸索一下。

总结:

在这篇博客里面,我带着你使用了 SWRevealViewController,向你展示了怎么在 Swift 工程中实现侧滑菜单。其实这只是实现侧滑菜单的很多方法中的一种,你也可以试着自己从空项目开始写,使用自定义的动画去实现;或者是寻找别的开源类库去实现,比如 ENSwiftSideMenu

最后,你可以从这里下载最终的代码。

译自

Creating a Sidebar Menu Using SWRevealViewController in Swift

时间: 2024-10-26 02:48:50

在 Swift 项目中实现侧滑菜单-利用 SWRevealViewController的相关文章

Swift 项目中常用的第三方框架

Swift 项目中可能用到的第三方框架 字数1004 阅读4091 评论17 喜欢93 这里记录下swift开发中可能用的框架 , 最近浏览了不少,积累在这里,以后用的时候方便查阅.顺便推荐给大家! 这里的框架都是纯swift的 , 感谢开源 ,感谢大神们 . 下拉刷新 BreakOutToRefresh 一个下拉刷新打砖块的swift库 SDRefreshView 简单易用的上拉和下拉刷新 ZLSwiftRefresh - 下拉刷新/上拉加载更多,支持自定义动画,集成简单 GearRefres

swift项目中使用OC/C的方法

假如有个OC类OCViewController : UIViewController类里有两个方法 //swift调用oc或c的混编是比较常用的,反过来的调用很少.这里只写了swift调用oc和c的方式.//OC函数声明- (void)testOC;//C函数声明void testc(); 实现:void testc(){  printf("testc.....................");} -(void)testOC{  NSLog(@"\ntestOC.....

利用CocoasPod在Swift项目中使用CorePlot

最近在研究可用的第三方的图标控件,然后网上搜了之后,感觉功能比较强大的就是CorePlot了,于是就开始研究如何部署到程序中.网上关于这方面的教程比较少,大部分都是objective-c的,而且历史也比较久远,后来找到一篇老外写的blog,讲述在swift中如何使用CorePlot(http://blog.alwold.com/2014/08/07/using-coreplot-with-swift-in-ios/),研究了好久,总算成功安装了.下面就一步一步介绍. 1. 建立工程 首先建立一个

Swift 项目中使用抽屉效果基于MMDrawerController

准备用Swift撸一个项目了, 就用这个样式了. 晚上睡不好了.黑眼圈(- -) 看细节请访问我的githubhttps://github.com/Zhangjingwang1993/SwiftApp 还可以点个Star,给个鼓励. Swift/OC 进阶交流群: 498143780 // AppDelegate.swift var drawer = MMDrawerController() let leftViewController = LeftViewController() let ri

swift项目中嵌入oc

参考资料 需要注意的是  与oc包含swift不同的是  swift包含oc需要在桥接文件中包含要使用的oc的头文件 demo:swiftPlayOc(提取码:37c6)

Swift项目中调用Objective-C的库

这是来自stack overflow上的一个回答,更多回答请查看: http://stackoverflow.com/questions/24002369/how-to-call-objective-c-code-from-swift Using Objective-C Classes in Swift * If you have an existing class that you'd like to use, perform Step 2 and then skip to Step 5. (

如何在 Swift 项目中使用 CocoaPods

4个步骤,将 CocoaPods 导入 Swift 1.创建.编辑 Podfile 文件并 pod install 2.使用 File -> New -> File- 创建一个 Header File(iOS->Source->HeaderFile 模板),名字为 xxxx.h. 3.打开项目的 Build Settings,设置 Objective-C Bridging Header 为 xxxx.h. 4.编辑 xxxx.h,将想要导入的库 import 到这里,例如: #im

swift项目中引入OC框架

(转)在 Swift 和 Objective-C 项目中使用 CocoaPods

在 Swift 和 Objective-C 项目中使用 CocoaPods 2016-07-13  838 作者:Gregg Mojica,原文链接,原文日期:2016/06/24译者:saitjr:校对:Cee:定稿:千叶知风 CocoaPods——Swift 与 Objective-C 项目的依赖管理工具,iOS 开发者的必备技能.如果你没有任何 CocoaPods 经历,那么这篇短文就是为你而写.我们将会学到什么是 CocoaPods,为什么我们要使用它,还有怎样开始使用它! AppCod