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

下面修改代码：

1. InitialSlidingViewController.m

1. #import "InitialSlidingViewController.h"
2. #import "ToDoViewController.h"
3. @interface InitialSlidingViewController ()
4. @end
5. @implementation InitialSlidingViewController
6. - (void)viewDidLoad
7. {
8. [super viewDidLoad];
9. self.topViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"ToDoView"];
10. }
11. @end

ToDoViewController.m：中修改如下：

1. - (void)viewWillAppear:(BOOL)animated
2. {
3. [super viewWillAppear:animated];
4. // Add a shadow to the top view so it looks like it is on top of the others
5. self.view.layer.shadowOpacity = 0.75f;
6. self.view.layer.shadowRadius = 10.0f;
7. self.view.layer.shadowColor = [[UIColor blackColor] CGColor];
8. // Tell it which view should be created under left
9. if (![self.slidingViewController.underLeftViewController isKindOfClass:[MenuViewController class]]) {
10. self.slidingViewController.underLeftViewController = [self.storyboard instantiateViewControllerWithIdentifier:@"MenuView"];
11. }
12. // Add the pan gesture to allow sliding
13. [self.view addGestureRecognizer:self.slidingViewController.panGesture];
14. }

MenuViewController修改如下：

1. - (void)viewDidLoad
2. {
3. [super viewDidLoad];
4. [self.slidingViewController setAnchorRightRevealAmount:240.0f];
5. self.slidingViewController.underLeftWidthLayout = ECFullWidth;
6. }

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

运行一下效果大体如下：

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

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

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

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