iOS-简单抽屉效果实现
2016-06-09 本文已影响3121人
麦穗0615
今天,特别想研究研究抽屉效果实现,虽然,如今,抽屉效果有很多第三方框架,可以帮助你实现此功能,但是我认为,作为学习,还是亲自实现一下,了解一下基本的操作做好。
基本分析:
-1.点击菜单时,出现的菜单界面位于主界面的下方。
-2.点击菜单,里面的item时,会进行不同控制器的跳转。
-3.菜单列表会呈现给我们不同的控制器界面,需要进行控制器管理,必须用到容器控制器。
第一步创建 创建工程
我们采用纯代码的方式,进行工程的配置。并且,创建了一个继承于UIViewController的容器控制器,用来管理子控制器。并把它设置为窗口的根视图控制器。
配置后-项目展示-纯代码
第二步 创建菜单控制器
创建菜单控制器,并配置item

第三步 创建菜单控制器
我们要想让视图展现出来,必须先确立父、子视图控制器的关系,在把菜单控制器的根视图,添加到容器控制器中。(实现抽屉必须)

此时运行结果为:

第四步 主界面的设置
创建主界面的控制器类,first 和 second,在first中,上方有个导航条,所以要创建一个导航控制器,并对其样式进行设置。

第五步 添加和移除主界面控制器
在容器控制器中,设置两
个属性,一个是用来存放和记录当前呈现的主控制器界面,一个是记录容器控制器中,要管理多少个这样的界面。


当前效果展示:

第四步 主界面的设置
点击菜单按钮,显示侧滑菜单.


-
通过找与父视图的关系-进行点击菜单跳转界面
通过找与父视图的关系-进行点击菜单跳转界面
效果展示:
效果展示
第五步 点击菜单栏的item,切换子控制器
通过点击菜单栏的item,切换子控制器。
-
设置代理,告诉容量控制器去执行哪个操作
代理-声明
判断代理方法是否响应
遵守协议
代理的实现
第六步 收尾
如果动画正在执行,我们避免重复点击事件。



效果展示:

Demo地址:https://github.com/RenZhengYang/RZYDrawer
欢迎点星!!!谢谢~
简单的抽屉实现了,总结的感觉差点劲,第一遍还没有理解透,希望多多指教。