使用SWRevealViewController实现侧边菜单功能详解

    当我们需要实现侧边式视图效果的时候,SWRevealViewController这个第三方的开源实现会是一个很好的选择。比如实现类似下面所示的侧板式操作菜单效果,在主展示视图手指从左到右滑动,左侧展开菜单界面,手指从右到左滑动,即关闭菜单界面。那么如何通过这个第三方的库实现类似下面的效果呢?

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

    

打开Xcode,比如本人使用的是Xcode5。选择创建新的项目,项目类型为IOS->Application->Empty Application,并输入项目相关的创建信息,如下图所示:

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

  

      

       项目创建后,主要包含一个AppDelegate类,其他的代码,需要我们接下来逐步添加,如下图所示:

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

  

接下来,需要主要是创建左侧菜单视图和主展示视图这两个界面。

首先是创建左侧菜单视图界面。右键选择添加文件,如下图所示:

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

       视图界面的设计,我们选择使用xib方式。

       打开LeftMenuViewController.xib文件的设计视图,选择拖放一个Table View控件到View中,如下图所示:

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

 

       打开LeftMenuViewController.h头文件,并编辑代码,如下图所示:

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

  

       打开LeftMenuViewController.m源文件,往LeftMenuViewController类中添加以下的方法代码:

-(int)numberOfSectionsInTableView:(UITableView *)tableView

{

    return 1;

}

 

-(int)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

{

    return 4;

}

 

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

{

    static NSString* cellIndentity=@"cell";

    UITableViewCell* cell=[tableViewdequeueReusableCellWithIdentifier:cellIndentity];

    if(cell==nil)

    {

        cell=[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIndentity];

    }

   

    switch (indexPath.row)

    {

        case 0:

        {

            cell.textLabel.text=@"侧边菜单1";

        }

            break;

           

        case 1:

        {

            cell.textLabel.text=@"侧边菜单2";

        }

            break;

           

        case 2:

        {

            cell.textLabel.text=@"侧边菜单3";

        }

            break;

           

        case 3:

        {

            cell.textLabel.text=@"侧边菜单4";

        }

            break;

           

        default:

            break;

    }

   

    return cell;

}

 

至此,我们完成了左侧菜单视图界面的创建工作。

接下来,我们需要创建主展示视图界面,创建的过程和上面的类似,不同的是,主展示视图界面只拖放一个Label控件,并将其显示的文本设置为“主展示视图”,如下图所示:

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

  

       到目前为止,我们已经完成了左侧菜单视图界面和主展示视图界面的设计工作,下面开始为这两个视图界面加入我们一开始就想要做到的侧边式视图效果。

         首先,需要在我们的项目之中引入SWRevealViewController这个第三方的开源库,下载地址:点击这里

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

       如上图所示,下载SWRevealViewController-master.zip后解压。将SWRevealViewController目录复制到我们的项目当中,如下图所示:

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

 

接下来,我们需要将SWRevealViewController这个库加入到项目代码当中,如下图所示:

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

  

       在我们的项目中添加了SWRevealViewController这个库后,下面就是编写代码,实现我们想要的效果。

       打开AppDelegate.h头文件,并添加代码,如下图所示:

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

  

       打开AppDelegate.m源文件,并添加代码,如下图所示:

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

 

       最后,打开CenterViewController.m源文件,并添加代码,如下图所示:

使用SWRevealViewController实现侧边菜单功能详解 - lesonshare - 乐众分享

  

       至此,所有工作已经完成,点击运行查看实际的效果即可。


转载:http://lesonshare.blog.163.com/blog/static/21616005120144610525258/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值