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

下面修改代码：

[html] view plaincopyprint?

InitialSlidingViewController.m

[html] view plaincopyprint?

#import "InitialSlidingViewController.h"

#import "ToDoViewController.h"

@interface InitialSlidingViewController ()

@end

@implementation InitialSlidingViewController

- (void)viewDidLoad

{

[super viewDidLoad];

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

}

@end

ToDoViewController.m：中修改如下：

[html] view plaincopyprint?

[html] view plaincopyprint?

- (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修改如下：

[html] view plaincopyprint?

- (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/