使用SWRevealViewController实现侧边菜单功能详解

  下面通过两种方法详解SWRevealViewController实现侧边菜单功能:

1.使用StoryBoard实现 2.纯代码实现

前言:手机屏幕始终有限,如何在有限的展示空间提供便捷的导航入口呢?Facebook的App设计了一个可以从屏幕侧边滑出的导航,这一设计模式引得各大主流 App尽相模仿。一时间,Path,Mailbox,Gmail都采用了这种设计。Github 上也有很多侧栏导航的解决方案,这里我们使用John的SWRevealViewController类来实现,这里就通过分别详细的通过StoryBoard和纯代码结合xib来实现。

SWRevealViewController在github下载地址: 点击这里

它的工作流程:

  • 用户点击“list”按钮,导航向右滑出
  • 用户再次点击“list”按钮,导航向左收起
  • 通过左右滑动也能达到同样的效果

不管接下来用的是StoryBoard方法实现还是纯代码实现,首先都要做的一件事情就是将框架里的主要的源码拷贝进项目中:

开始:

一、使用StoryBoard实现:

1、首先建立UI框架:

2、上面的图的连线在这里也详细补充一下吧:

ContentVC里用了三个UINavigationVC以及自带的连线,当然你可以自己更换UINavigationVC的rootViewController,比如我这里就是换成了普通的ViewController,然后自己添加子控件比如UIView,最后连线连上Navigation的rootViewController连线。(这里会点StoryBoard就应该秒懂)

接下来讲的连线是就是比较重要的,反正我之前没用过的连线,也是到别的大神博客里学习来的。

剩下需要连线的是ContainerVC、MenuVC,三个UINavigationVC之间的连线,而这里他们的连线上面一个图给出了,但是连接的模式有些细节上的不一样,对于ContainerVC作为容器的连线,都是选择reveal view controller set Controller :

而除了容器控制器ContainerVC之外的连线,也就是作为MenuVC的TabVC连接三个作为ContentVC的UINavigationVC,都是用reveal view controller push Controller连线:

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

rear英文就是后背的意思,这里设置sw_rear就是告诉SWRevealViewController这是后背控制器

接下来为对应的控制器创建类,然后为对应的控制器指派类Class。

首先最重要的是要将主要的作为容器的控制器ContainerVC,将作为侧滑栏的容器视图的指派类Class设置为SWRevealViewController

然后指派的类用图快速表示表示:

为了能够当视图从 ContentVC —> MenuVC ,所以需要在三个TabView的toolBar上添加需要响应的item控件,并设置图标:

接着需要在OneVC控制器类中,结合代码将框架和这个第一个页面对应的控制器联系起来

然后第二个页面和第三个页面也是这样。

通过以上storyboard实现侧滑菜单的运行效果:

到这里源码百度云下载链接: http://pan.baidu.com/s/1c1coLLu 密码: avgw

SwRevealViewController提供了很多方法来配置菜单栏的样式。比如你想更改菜单栏的宽度,你就可以更新rearViewRevealWidth属性即可:

其实这只是实现侧滑菜单的很多方法中的一种,你也可以试着自己从空项目开始写,使用自定义的动画去实现;或者是寻找别的开源类库去实现,比如ENSwiftSideMenu 。

二、纯代码结合xib实现:

用纯代码实现比较灵活,比如可以设置右边的侧滑菜单,StoryBoard目前我还不知道怎么连线添加右边的侧滑菜单。不过StoryBoard想实现右边侧滑在前面项目示例基础上可以使用源代码实现添加哦。其实本质还是接下来要讲解的全纯代码实现:

在用纯代码之前,设置Main清除掉,然后愿意的话删除Main.storyboard也是可以的。

接着开始在AppDelegate中敲代码,管理需要创建的所有的控制器

一步一步跟着我的代码步骤很好理解的哦。

到这里我就试着运行了一下,发现只是打开了一个空白的Navigation视图,没有什么卵用,那是当然的拉,还没有为各自控制器设置事件监听或者手势监听,甚至界面的控件都没添加,当然没什么效果了。

接着就要为各自的视图添加UI喽,首先添加item需要的素材,素材备份百度云下载链接: http://pan.baidu.com/s/1jHh2oV8 密码: p7me :

然后首先在FrontViewController中添加代码:

上效果图展示:

接着要要丰富这个框架喽,先处理RearViewController

然后要记得为UITableView控件添加数据源和代理

然后运行一下,自己看看效果吧,这里暂时不上图了。

然后接着为这个RearViewController的两个cell添加向导到目标控制器

补充下图缺少的部分代码:

/** 辅助变量 表示是否是刚刚显示过的控制器 */

@property (nonatomic,assign)NSInteger isSameViewController;

然后在这里我将之前的画板的控制器拷贝拖进来了,然后#import “CanvasViewController.h”就直接使用了

然后现在必须要看运行效果了:

iOS之UI--使用SWRevealViewController实现侧边菜单功能详解实例相关推荐

  1. php工具箱选项菜单功能详解,莱莎的炼金工房主菜单功能选项作用详解 主菜单选项有哪些-游侠网...

    莱莎的炼金工房主菜单选项有哪些?各选项功能是什么?一些萌新玩家了解的不全面,这里给大家整理了莱莎的炼金工房主菜单功能选项作用详解,快来看下吧. 推荐阅读: 主菜单功能选项作用详解 主菜单画面说明 可以 ...

  2. iOS 8系统正式版升级指南及功能详解

    9月18日上午消息,苹果公司iOS8系统最早于今年6月的苹果开发者大会上发布,此前已经有多个面向开发者的测试版,今天上线的,才是面向一般用户的正式版本. 很多用户目前还没有升级,此前也没接触过iOS8 ...

  3. IOS视频编辑功能详解下篇-视频裁剪、视频拼接、音视频的处理

    转自:http://www.hudongdong.com/ios/550.html 前言 用代码在简单视频编辑中,主要就是加美颜.水印(贴图).视频截取.视频拼接.音视频的处理,在美颜中,使用GPUI ...

  4. IOS视频编辑功能详解上篇-添加水印

    前言 用代码在简单视频编辑中,主要就是加美颜.水印(贴图).视频截取.视频拼接.音视频的处理,在美颜中,使用GPUImage即可实现多种滤镜.磨皮美颜的功能,并且可以脸部识别实时美颜等功能,这个有很多 ...

  5. VS2010-MFC(菜单:VS2010菜单资源详解)

    转自:http://www.jizhuomi.com/software/210.html 上一节讲了标签控件Tab Control以后,常用控件的内容就全部讲完了,当然并没有包括所有控件,主要是一些很 ...

  6. html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解

    这次给大家带来CSS3实现扇形动画菜单流程详解,CSS3实现扇形动画菜单的注意事项有哪些,下面就是实战案例,一起来看一下. 原文章请点击这里 简化版完整实例 CSS3扇形动画菜单 *{padding: ...

  7. iOS开发——使用Charles进行https网络抓包详解

    我在前面两篇博客中<网络抓包工具Charles的介绍与使用><iOS开发--使用Charles进行http网络抓包详解>对Charles的http抓包进行了详细的讲解.今天我们 ...

  8. iOS 开发 Certificate和Code Signing--证书与签名--详解

    iOS 开发 Certificate和Code Signing–证书与签名–详解 1.Certificate-证书 iOS 开发 证书–根证书/申请证书/开发(发布)证书–详解 2.Code Sign ...

  9. linux右键菜单颜色,Linux_自定义右键菜单代码详解, style !-- /*定义菜单 - phpStudy...

    自定义右键菜单代码详解 < style > < !-- /*定义菜单方框的样式1*/ .skin0 { position:absolute; text-align:left; wid ...

最新文章

  1. 大数据盘点00后求职选择,过半职场新人会因工作太简单辞职?
  2. 入行Web前端,这些侧重点和学习方法你要了解
  3. Bash:把粘贴板上的内容拷贝的文件中。(脚本)
  4. MongoDB源码阅读之ReplSet源码分析
  5. Ubuntu更新过程被中断后的问题
  6. Linux驱动如何在不同版本上快速迭代升级
  7. Python 内置模块之 re
  8. axios发post请求,后端接收不到参数的问题
  9. 查询性能优化 in and union
  10. 使用Python写登录京东商城购物,加入购物车的脚本
  11. 常见视频分辨率及码率
  12. 学不会模具设计的原因你知道吗?
  13. 关于cocos2d引擎写的手游加速
  14. iOS 加速计 摇一摇
  15. 指定gpu训练模型却依然使用了cpu问题解决
  16. 江苏省2022年普通高校专转本选拔考试 计算机专业大类专业技能 试题卷
  17. RS485总线灵魂问答,看你知道几个?
  18. Alax技术实现的基本原理——XMLHttpRequest对象的使用
  19. flutter 中实现磨砂玻璃效果
  20. 各种有用的东西、黑科技、技巧

热门文章

  1. 台式机没有显示计算机图标,为什么台式电脑没有喇叭图标
  2. mysql在单片机移植_移植MySQL到嵌入式ARM平台
  3. java中死锁_关于java中死锁的总结
  4. linux mv 保持目录结构_(三)Linux系统目录结构
  5. 移除镜像_这是否是你心目中的英雄联盟手游?镜像地图。水晶塔,传送移除
  6. 龙贝格数值分析作业c语言,数值分析龙贝格实验报告.doc
  7. java查看weblogic服务器_java判断服务器是那种,例如区分tomcat和weblogic | 学步园
  8. c语言3368题目,电大《C语言程序设计课程》期末考试复习资料
  9. python解放二次开发_[转载]Python二次开发程序详解
  10. C语言(CED)与long long相关的知识