iOS之UI--使用SWRevealViewController实现侧边菜单功能详解实例
使用SWRevealViewController实现侧边菜单功能详解
下面通过两种方法详解SWRevealViewController实现侧边菜单功能:
1.使用StoryBoard实现 2.纯代码实现
前言:手机屏幕始终有限,如何在有限的展示空间提供便捷的导航入口呢?Facebook的App设计了一个可以从屏幕侧边滑出的导航,这一设计模式引得各大主流 App尽相模仿。一时间,Path,Mailbox,Gmail都采用了这种设计。Github 上也有很多侧栏导航的解决方案,这里我们使用John的
|
它的工作流程:
- 用户点击“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实现侧边菜单功能详解实例相关推荐
- php工具箱选项菜单功能详解,莱莎的炼金工房主菜单功能选项作用详解 主菜单选项有哪些-游侠网...
莱莎的炼金工房主菜单选项有哪些?各选项功能是什么?一些萌新玩家了解的不全面,这里给大家整理了莱莎的炼金工房主菜单功能选项作用详解,快来看下吧. 推荐阅读: 主菜单功能选项作用详解 主菜单画面说明 可以 ...
- iOS 8系统正式版升级指南及功能详解
9月18日上午消息,苹果公司iOS8系统最早于今年6月的苹果开发者大会上发布,此前已经有多个面向开发者的测试版,今天上线的,才是面向一般用户的正式版本. 很多用户目前还没有升级,此前也没接触过iOS8 ...
- IOS视频编辑功能详解下篇-视频裁剪、视频拼接、音视频的处理
转自:http://www.hudongdong.com/ios/550.html 前言 用代码在简单视频编辑中,主要就是加美颜.水印(贴图).视频截取.视频拼接.音视频的处理,在美颜中,使用GPUI ...
- IOS视频编辑功能详解上篇-添加水印
前言 用代码在简单视频编辑中,主要就是加美颜.水印(贴图).视频截取.视频拼接.音视频的处理,在美颜中,使用GPUImage即可实现多种滤镜.磨皮美颜的功能,并且可以脸部识别实时美颜等功能,这个有很多 ...
- VS2010-MFC(菜单:VS2010菜单资源详解)
转自:http://www.jizhuomi.com/software/210.html 上一节讲了标签控件Tab Control以后,常用控件的内容就全部讲完了,当然并没有包括所有控件,主要是一些很 ...
- html中怎么做扇形菜单,CSS3实现扇形动画菜单流程详解
这次给大家带来CSS3实现扇形动画菜单流程详解,CSS3实现扇形动画菜单的注意事项有哪些,下面就是实战案例,一起来看一下. 原文章请点击这里 简化版完整实例 CSS3扇形动画菜单 *{padding: ...
- iOS开发——使用Charles进行https网络抓包详解
我在前面两篇博客中<网络抓包工具Charles的介绍与使用><iOS开发--使用Charles进行http网络抓包详解>对Charles的http抓包进行了详细的讲解.今天我们 ...
- iOS 开发 Certificate和Code Signing--证书与签名--详解
iOS 开发 Certificate和Code Signing–证书与签名–详解 1.Certificate-证书 iOS 开发 证书–根证书/申请证书/开发(发布)证书–详解 2.Code Sign ...
- linux右键菜单颜色,Linux_自定义右键菜单代码详解, style !-- /*定义菜单 - phpStudy...
自定义右键菜单代码详解 < style > < !-- /*定义菜单方框的样式1*/ .skin0 { position:absolute; text-align:left; wid ...
最新文章
- 大数据盘点00后求职选择,过半职场新人会因工作太简单辞职?
- 入行Web前端,这些侧重点和学习方法你要了解
- Bash:把粘贴板上的内容拷贝的文件中。(脚本)
- MongoDB源码阅读之ReplSet源码分析
- Ubuntu更新过程被中断后的问题
- Linux驱动如何在不同版本上快速迭代升级
- Python 内置模块之 re
- axios发post请求,后端接收不到参数的问题
- 查询性能优化 in and union
- 使用Python写登录京东商城购物,加入购物车的脚本
- 常见视频分辨率及码率
- 学不会模具设计的原因你知道吗?
- 关于cocos2d引擎写的手游加速
- iOS 加速计 摇一摇
- 指定gpu训练模型却依然使用了cpu问题解决
- 江苏省2022年普通高校专转本选拔考试 计算机专业大类专业技能 试题卷
- RS485总线灵魂问答,看你知道几个?
- Alax技术实现的基本原理——XMLHttpRequest对象的使用
- flutter 中实现磨砂玻璃效果
- 各种有用的东西、黑科技、技巧
热门文章
- 台式机没有显示计算机图标,为什么台式电脑没有喇叭图标
- mysql在单片机移植_移植MySQL到嵌入式ARM平台
- java中死锁_关于java中死锁的总结
- linux mv 保持目录结构_(三)Linux系统目录结构
- 移除镜像_这是否是你心目中的英雄联盟手游?镜像地图。水晶塔,传送移除
- 龙贝格数值分析作业c语言,数值分析龙贝格实验报告.doc
- java查看weblogic服务器_java判断服务器是那种,例如区分tomcat和weblogic | 学步园
- c语言3368题目,电大《C语言程序设计课程》期末考试复习资料
- python解放二次开发_[转载]Python二次开发程序详解
- C语言(CED)与long long相关的知识