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一、基础什么是线程和进程?何为进程?进程是程序的一次执行过程,是系统运行程序的基本单位,因此进程是动态的。系统…

计算机专业 毕业论文 百度云,计算机专业毕业论文.pdf

XXXX 学院本科生毕业论文基于 VB 的人力资源管理信息系统的设计与实现院别 、专业 计算机科学与信息技术学院计算机科学与技术专业研 究 方 向 网络工程学 生 姓 名学 号指导教师姓名指导教师职称 讲 师20XX年 X 月 X 日大庆师范学院本科毕业论文 (设计 )摘 要为了提高人力资源…

python在linux中输出带颜色的文字的方法

在开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端中。而一般的应用服务器,第三方库,甚至服务器的一些通告也会在终端中显示,这样就搅乱了我们想要的信息…

运用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…

Python.with.context-manager

Context Manager 1. Context Manager简介 "Context managers are a way of allocating and releasing some sort of resource exactly where you need it." Ref[4] 例如: 1 with file("/tmp/foo", "w") as foo: 2 print >> foo, &qu…

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

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

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

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

mysql 下载到其他盘中_MYSQL 如果把数据文件保存到其他磁盘里

今天在CSDN上有人问起分开存储数据文件的问题。现在写下来。为了突破磁盘搜索的瓶颈。我们要把MYSQL的数据和索引保存到其他不同的磁盘中。目前还只是支持MyISAM引擎。在MYSQL中,官这个叫象征性链接。1、在WINDOWS下的象征性链接。数据库目录:E:/LAMP/my…

python定义了函数却显示未定义_python

我正在编写一个脚本,在我的脚本中,我具有以下功能: def insert_image(cursor, object_id, sku): product_obj core.Object.get(object_id) string_sku str(sku) folder string_sku[0] string_sku[1] string_sku[2] found_url False # K…

以下不属于计算机安全术语,基础知识(D).doc

1、计算机硬件是指组成计算机的任何机械的、磁性的、电子的装置或部件,其中微型计算机的主要组成部分有:A.CPU、存储器、基本输入输出设备和其他外围设备B.硬件系统和软件系统C.主机和系统软件D.主机和显示器答案:A (2)2、计算机网络的分类标…

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…

mysql没多久自动断开服务_mysql 长时间没连接了 就会自动断开服务

这是因为mysql 长时间没连接了 就会自动断开服务。 解决办法 1、首先,下载必须的jar包 dbcp 包,目前版本是1.2.1:http://jakarta.apache.org/commons/ dbcp / pool包,目前版本是1.3:http://jakarta.apache.org/commons…

python将print内容输入txt_Python将矩阵写入txt文件,保持格式

我正在努力把我的代码输出写入一个txt文件,同时保持格式。代码如下:import os # Compute matrix titles [Filename, Date] matrix [titles] for directory, __, files in os.walk(MY_DIRECTORY): # replace with actual directory path for filename i…

浙江大学计算机学院研究生论文盲审,浙江理工大学研究生学位论文盲审实施办法...

浙理工研〔2014〕11号为进一步完善研究生教育质量监控体系,提高研究生培养质量,根据学校实际,特修订本办法。一、工作原则研究生学位论文盲审工作在校硕士和博士学位评定委员会领导下开展,由研究生部(校学位办)和学院组织实施。除…

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…

python的交互式解释器_python3.4.1解释器python交互式图形编程实例(三)

本文实例为大家分享了python交互式图形编程实例的第三部代码,供大家参考,具体内容如下 #!/usr/bin/env python3 # -*- coding: utf-8 -*- #时钟 from turtle import * from datetime import * def Skip(step): penup() forward(step) pendown() def mkHa…