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

使用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”就直接使用了

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/543326.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

绘图的尺寸_Auto CAD机械绘图尺寸标注教程1(尺寸标注简介)

1、尺寸是工程图中不可缺少的一项内容,工程图中的图形只用来标识工程图形的形状,而工程形体的大小尺寸是靠尺寸来说明的,所以工程图图中尺寸必须标注得正确、完整、清晰、合理。工程图中尺寸标注包括:尺寸界线、尺寸线、尺寸起止符…

java并发核心知识体系精讲_Java 面试突击之 Java 并发知识基础 amp; 进阶考点全解析

版权说明:本文内容根据 github 开源项目整理所得项目地址:https://github.com/Snailclimb/JavaGuide​github.com一、基础什么是线程和进程?何为进程?进程是程序的一次执行过程,是系统运行程序的基本单位,因此进程是动态的。系统…

运用python的方式_对Python使用mfcc的两种方式详解

1、Librosa import librosa filepath "/Users/birenjianmo/Desktop/learn/librosa/mp3/in.wav" y,sr librosa.load(filepath) mfcc librosa.feature.mfcc( y,sr,n_mfcc13 ) 返回结构为(13,None)的np.Array,None表示任意数量 2、python_speech_features…

nginx加载图片慢_优化vue项目的首屏加载速度

最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢。居然需要21s,体验极差。这是打包的结果截图根据这种情况&am…

micropython移植教程_【教程】智能编程T-Watch手表初试micropython之电子秤教程

原标题:【教程】智能编程T-Watch手表初试micropython之电子秤教程 【项目的故事】 在极客玩具中,我一直喜欢穿戴类和小车类。前后做过两只运动心率表,并且参与过麦步手表的测试。TTGO最新出品了一块叫做T-Watch的手表,实际上&…

音乐和计算机跨界融合,音乐类综艺跨界融合有了新思路

图集8月9日《人民日报》刊文,对原创综艺节目《幻乐之城》匠心做原创的新思路、新经验、新趋势进行了表扬,文章指出:“音乐电影”的节目模式在呈现出音乐与电影双重质感的同时,也为国内音乐类综艺节目的跨界融合发展提供了新的思路…

java api项目配置统一的错误返回json提示

2019独角兽企业重金招聘Python工程师标准>>> 项目使用的json解析框架是fastjson自定义的返回对象如下:package com.test;public class ResultObj {private boolean result;private int code200;private String msg;private Object data;private PagerRes…

iOS开发UI篇—使用storyboard创建导航控制器以及控制器的生命周期

一、基本过程 新建一个项目,系统默认的主控制器继承自UIViewController,把主控制器两个文件删掉。 在storyboard中,默认的控制器是View Controller,而我们需要的是导航控制器,那么就把系统的给删掉,拖一个导…

mysql 5.5 1366错误_laravel5.3 在 mysql5.1中运行出错 error: 1366 Incorrect integer

Laravel 在 MySQL5.1 下运行出错 ,错误如下:SQLSTATE[HY000]: General error: 1366 Incorrect integer value: 1 for column status at row 1 (SQL: insert into cases (case_name, status, updated_at, created_at) values (fdsafdsadsa, 1, 1474504956…

计算机组成原理输入实验报告,计算机组成原理实验报告

/串形式构成的 8 位字长的运算器。右方为低 4 位运算芯片,左方为高 4 位运算芯片。低位芯片的进位输出端 Cn4 与高位芯片的进位输入端 Cn 相连,使低 4 位运算产生的进位送进高 4位运算中。低位芯片的进位输入端 Cn 可与外来进位相连,高位芯片…

python中导入模块队列_【每日学习】Python中模块的导入

模块的概念:每一个以扩展名py结束的Python源代码文件都是一个模块模块名同样也是一个标识符,需要符合标识符的命名规则在模块中定义的全局变量、函数、类都是提供给外界直接使用的工具模块就好比工具包,要想使用这个工具包中的工具&#xff0…

setuptools安装_在Ubuntu 18.04系统上安装ERPNext ERP

简介ERPNext是一个功能丰富的企业级ERP系统,使用Frappe框架编写,一个Python和JavaScript的Web应用程序框架,具有:会计管理、库存管理制造管理、客户关系管理系统、销售管理、采购管理、项目管理等特性。ERPNext ERP系统适用于中小…

Spark Mlib TFIDF源码详读 笔记

2019独角兽企业重金招聘Python工程师标准>>> 在提取文本特征时,经常用到TF-IDF算法。Spark Mlib实现了该算法。下面是Spark Mlib中,TF_IDF算法调用的一个实例: def main(args:Array[String]){val sc: SparkContext null …

焦作的计算机三级考试考点,3月河南计算机等级考试考点分布情况

摘要: 3月河南计算机等级考试考点分布情况为你介绍河南计算机等级考试时间为2020年3月28日-30日,为了方便河南考生。下面是小编整理的2020年3月河南计算机等级考试报...河南计算机等级考试时间为2020年3月28日-30日,为了方便河南考生。下面是…

js客户端存储之Web存储

WEB存储 客户端存储有几种方式,WEB存储就是其中一种。最初作为H5的一部分被定义成API形式,后来被剥离出来作为独立的标准。所描述的API包含localStorage对象和sessionStorage对象,这两个对象实际都代表同一个Storage对象,是持久化…

直播软件自动化测试,基于SRS-Bench工具的直播平台性能测试

摘要:性能测试通过自动化的测试工具模拟正常、异常场景来对系统的各项性能指标进行测试。通过性能测试可以分析一个系统能力、瓶颈、关键问题等。本文结合直播平台的部分场景,使用开源SRS-Bench工具对直播并的4个场景进行压力测试,测试直播平…

pythontype函数使用_Python astype(np.float)函数使用方法解析

Python astype(np.float)函数使用方法解析 我的数据库如图结构我取了其中的name age nr,做成array,只要所取数据存在str型,那么取出的数据,全部转化为str型,也就是array阵列的元素全是str,不管数据库定义的…

计算机硬件加速怎么开,显卡硬件加速,小编教你电脑怎么开启显卡硬件加速

小编之前是不知道怎么开启显卡硬件加速的,后来是朋友教我,才知道原来开启显卡硬件加速并不难操作。所以今天小编也将者开启的方法分享给小伙伴们。让你们也知道怎么开启硬件加速。显卡硬件加速有什么作用呢?其实开启了显卡硬件加速&#xff0…

um是代表什么意思_女生约会心里都想什么?女生约会举动代表什么意思

在和女生约会的全过程中,女生的思绪通常都较为细致,1个目光、1个行为、1个中停……都将会蕴含了無限的含意,男生们假如愿意取得成功将女生追到手,很必须剖析一下下女生约会心里都想干什么,女生约会举动代表什么意思&am…

ubuntu mysql开发_ubuntu linux mysql 开发模式与连接编译

【源码 测试】#include #include #include int main(void){MYSQL_RES *result;MYSQL_ROW row;MYSQL *connection, mysql;int state;mysql_init(&mysql);connection mysql_real_connect(&mysql,"localhost","root","951241","mysql…