IOS开发UI篇--一个侧滑菜单SlidingMenu

http://blog.csdn.net/yixiangboy/article/details/46883307

一、简介

侧滑菜单已经成为app一个极常用的设计，不管是事务类，效率类还是生活类app。侧滑菜单因Path 2.0和Facebook为开发者熟知，国内目前也有很多流行app用到了侧滑菜单，比如QQ、网易邮箱、知乎等等。
IOS官方并没有提供类似于侧滑栏之类的组件，所以我们需要自己写一个侧滑栏控件，为了不要重复造轮子，我在github上找到了一个使用简单方便，新手容易入手的侧滑菜单控件，地址：https://github.com/John-Lluch/SWRevealViewController/tree/master/

下面我们就是使用上面的控件，来做一个侧滑栏的小Demo，来教大家快速入门侧滑栏控件。
Demo界面演示如下：

 

二、使用说明

第一步：导入SWRevealViewController.h和SWRevealViewController.m文件

第二步：编写中间显示界面CenterViewController

在viewDidLoad方法中设置SWRevealViewController中的panGestureRecognizer方法，即可实现在主界面上滑动就可以出现左侧或者右侧菜单。设置revealToggle:方法就可以实现点击进行左边菜单和中间界面的切换。设置rightRevealToggle:方法就可以实现右边菜单和中间界面的切换。下面就是中间界面的相关代码：

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//注册该页面可以执行滑动切换</span>
    SWRevealViewController *revealController = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.revealViewController</span>;
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.view</span> addGestureRecognizer:revealController<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.panGestureRecognizer</span>];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 注册该页面可以执行点击切换</span>
    [leftBtn addTarget:revealController action:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@selector</span>(revealToggle:) forControlEvents:UIControlEventTouchUpInside];
    [rightBtn addTarget:revealController action:<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@selector</span>(rightRevealToggle:) forControlEvents:UIControlEventTouchUpInside];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

第三步、编写左侧菜单栏LeftViewController

左侧菜单栏是由一个UITableView组成的，我们在每个cell的点击方法中执行 [revealViewController pushFrontViewController:viewController animated:YES];切换中间界面的操作。代码如下：

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">- (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span>)tableView:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UITableView</span> *)tableView didSelectRowAtIndexPath:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSIndexPath</span> *)indexPath{
    SWRevealViewController *revealViewController = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.revealViewController</span>;
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIViewController</span> *viewController;

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">switch</span> (indexPath<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.row</span>) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>:
            viewController = [[CenterView1Controller alloc] init];
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>:
            viewController = [[CenterView2Controller alloc] init];
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;

        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">default</span>:
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;
    }
    [revealViewController pushFrontViewController:viewController animated:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>];

}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

第四步、编写右侧菜单栏RightViewController

这里主要演示左侧菜单栏，这里就不做过多描述。就以一个简单的ViewController代替。

第五步、在AppDelegate.m文件中的- (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions方法中配置以上界面，可以分别设置左侧菜单栏、右侧菜单栏和中间首页。

详见代码注释：

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">- (<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">BOOL</span>)application:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIApplication</span> *)application didFinishLaunchingWithOptions:(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">NSDictionary</span> *)launchOptions {

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.window</span> = [[<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIWindow</span> alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//左侧菜单栏</span>
    LeftViewController *leftViewController = [[LeftViewController alloc] init];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//首页</span>
    CenterView1Controller *centerView1Controller = [[CenterView1Controller alloc] init];

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//右侧菜单栏</span>
    RightViewController *rightViewController = [[RightViewController alloc] init];

    SWRevealViewController *revealViewController = [[SWRevealViewController alloc] initWithRearViewController:leftViewController frontViewController:centerView1Controller];
    revealViewController<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.rightViewController</span> = rightViewController;

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//浮动层离左边距的宽度</span>
    revealViewController<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.rearViewRevealWidth</span> = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">230</span>;
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//    revealViewController.rightViewRevealWidth = 230;</span>

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//是否让浮动层弹回原位</span>
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//mainRevealController.bounceBackOnOverdraw = NO;</span>
    [revealViewController setFrontViewPosition:FrontViewPositionLeft animated:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>];

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.window</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.rootViewController</span> = revealViewController;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.window</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.backgroundColor</span> = [<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">UIColor</span> whiteColor];
    [<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span><span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">.window</span> makeKeyAndVisible];
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> <span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">YES</span>;
}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li></ul>

三、总结

接下来准备使用这个界面作为主框架，写一系列关于IOS动画的总结 和 facebook开源动画项目pop动画的使用的博客。敬请期待。

四、下载地址

github下载地址：https://github.com/yixiangboy/IOSAnimationDemo

如果觉得对你还有些用，给一颗star吧。你的支持是我继续的动力。

博主的话

以前看过很多别人的博客，学到不少东西。现在准备自己也开始写写博客，希望能够帮到一些人。 
我的联系方式： 
微博：新浪微博 
博客：http://blog.csdn.net/yixiangboy 
github：https://github.com/yixiangboy