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/