Slide-out Sidebar Menu

IOS学习之路十（仿人人滑动菜单Slide-out Sidebar Menu）

2013-09-03 22:13 by lixingle, 270 阅读, 0 评论, 收藏, 编辑

最近滑动菜单比较流行，像facebook和人人等都在使用滑动菜单，今天做了一个小demo大体效果如下：

 

 

这次用了一个开源的项目ECSlidingViewController这个也是一个挺著名的托管在Github上的开源项目:

Github上Project的URL是：https://github.com/edgecase/ECSlidingViewController

大体步骤如下：

创建一个SingleView applicaton:

 

 

 

下面把下载的源码包含进来：

解压缩后打开 找到   ECSlidingViewController/Vendor/ECSlidingViewController 下的两个文件，我们把整个Vendor文件夹都导入：

 

添加一个类库：

 

 

 

打开StoryBoard另外再创建两个UIViewController 

创建后大概界面如下：

 

1.新建两个文件分别为：ToDoViewController和MenuViewController都继承于UIviewController:

2.把新建时自带的ViewController两个文件删除，新建一个文件为：InitialSlidingViewController，打开stroryBoard并把它设为RootViewController。

3.在stroryBoard中把刚才新建的两个ToDoViewController和MenuViewController进行设置：

先设置ToDoViewController：把controller类设为：ToDoViewController标示符设为：ToDoView

 

MenuViewController的设置如上：把controller类设为：MenuViewController标示符设为：MenuView

 

下面修改代码：

 

InitialSlidingViewController.m

 

 

 

#import "InitialSlidingViewController.h"
#import "ToDoViewController.h"
@interface InitialSlidingViewController ()

@end

@implementation InitialSlidingViewController


- (void)viewDidLoad
{
    [super viewDidLoad];

     self.topViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"ToDoView"];
}



@end

ToDoViewController.m：中修改如下：

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];

    // Add a shadow to the top view so it looks like it is on top of the others
    self.view.layer.shadowOpacity = 0.75f;
    self.view.layer.shadowRadius = 10.0f;
    self.view.layer.shadowColor = [[UIColor blackColor] CGColor];

    // Tell it which view should be created under left
    if (![self.slidingViewController.underLeftViewController isKindOfClass:[MenuViewController class]]) {
        self.slidingViewController.underLeftViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"MenuView"];
    }

    // Add the pan gesture to allow sliding
    [self.view addGestureRecognizer:self.slidingViewController.panGesture];
}

MenuViewController修改如下：

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self.slidingViewController setAnchorRightRevealAmount:240.0f];
    self.slidingViewController.underLeftWidthLayout = ECFullWidth;

}

为了美观你可以设置一下ToDoViewController和MenuViewController的背景色：

 

运行一下效果大体如下：

接下来你可以自己添加个性的View和segue了

转载请注明：
原文转载自：http://blog.csdn.net/wildcatlele

新浪微博：http://weibo.com/u/3202802157

原文参考：http://kingscocoa.com/tutorials/slide-out-navigation/