看到一篇确实不错的博客，国外翻译过来的，翻译的也不错，分享出来:
创新互联主要从事成都网站建设、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务黔西,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
本文将介绍如何创建类似Facebook和Path iOS程序中的滑出式导航面板。
向右滑动
滑出式设计模式可以让开发者在程序中添加常用的导航功能，而又不会浪费屏幕上宝贵的空间。用户可以在任意时间滑出导航面板，并且还可以看到当前屏幕上显示的内容。
现在，互联网上已经有一些库已经内置滑出式设计模式，比如John-Lluch开发的SWRevealViewController。如果你在寻找更加快捷和简单的方法，那么使用SWRevealViewController库可能是一个很不错的方法。
不过，如果你是一名DIY类型的程序员(像我)，那么你可能希望自己理解这功能是如何实现的。
在本文中，你会看到该功能的实现并不复杂。通过少即是多的方法，并忽略掉复杂大的且不是必须的代码，就可以轻松的在程序中集成滑出式导航面板技术。
下面，就开始学习如何做滑出式导航面板——附带手势滑出的功能！
开始
那么这里创建的滑出式导航面板的功能具体是什么呢？
iOS设计师和开发者Ken Yarmosh的解释比较恰当：“滑出式导航面板拥有一个面板，这个面板从主画面的左边或者右边滑出来，然后在面板中显示一个垂直的、独立的滚动视图（Scroll view），把该视图当作程序的主导航。”
注意: Ken在这里的文章中详细的解释了滑出式导航面板的设计模式，并介绍了该模式带来的好处：新的iOS设计模式:滑出式导航面板。
首先下载本文的启动工程。这是一个ZIP文件，只需要将其保存到本地，并解压一下就可以得到工程。
接着在Xcode中打开这个工程，并看看工程的组织结构：
工程被分为3个主要的文件夹：
- Assets: 包含所有的图片文件和其它非代码资源（例如attribution文件）。
- Views: 包含本文涉及到的所有xib文件。
- Classes: 包含Objective-C代码文件
不要担心Assets中有许多文件，其实你并不需要修改这些内容，所有需要用到的资源文件都添加进来了。
在Views文件夹中有4个主要的view controller。下面是相关简介：
- MainViewController: 这是主要的一个画面！这个文件需要添加到你自己的工程中（需要一些小的改动）。
- CenterViewController: 这是正中间的面板。该view controller可以替换为你自己的view controller（记住按钮的action也实现了）
- LeftPanelViewController: 左边的面板。该view controller可以替换为你自己的view controller。
- RightPanelViewController: 右边的面板。该view controller可以替换为你自己的view controller
现在打开AppDelegate.m文件。虽然你不需要对这个文件做任何改变，但是你应该知道MainViewContorller是左，中和右view controller的容器。这个controller的初始化在19行代码中：
- self.viewController=[[MainViewController alloc] initWithNibName:@"MainViewController" bundle:nil];
现在，你已经对工程的结构熟悉了， 下面我们就正在的开始啦——从正中间的面板开始。
找到中心
本小节中，我将在MainViewConroller中放置一个CenterViewController，将CenterViewController当做MainViewConroller的子view controller。
注意：本小节会用到iOS 5中的新增的一个概念：View Controller Containment。如果你还不熟悉这个概念，可以看看iOS 5 by Tutorials中的第22章“UIViewController Containment”。
打开MainViewController.m文件，并将下面的import语句添加到文件的顶部：
- #import "CenterViewController.h"
接着，添加一个常量定义：
- #define CENTER_TAG1
接着在@interface中添加下面这个属性，以方便控制center view。
- @property(nonatomic, strong)CenterViewController*centerViewController;
找到setupView并在里面添加如下代码块：
- self.centerViewController=[[CenterViewController alloc] initWithNibName:@"CenterViewController" bundle:nil];
- self.centerViewController.view.tag= CENTER_TAG;
- self.centerViewController.delegate=self;
- [self.view addSubview:self.centerViewController.view];
- [self addChildViewController:_centerViewController];
- [_centerViewController didMoveToParentViewController:self];
上面的代码分配了一个新的CenterViewController并将其赋值给centerViewController属性。然后将这个view controller view的tag设置为CENTER_TAG。
接着将delegate设置为MainViewController。也就意味着你需要对MainViewController进行修改，以遵循CenterViewControllerDelegate协议——只需要将文件顶部@interface代码行替换为如下即可：
- @interfaceMainViewController()
最后，在setupView方法的代码中，使用addSubview:方法将centerViewController的view添加到MainViewController的view中，另外还调用了addChildViewContoller:将_centerViewController添加为MainViewController的子view controller。最后调用了didMoveToParentViewController:方法。
现在就编译并运行程序的话，可以看到类似如下的画面：
在画面顶部的按钮可以让你切换到小猫（kitties）和小狗（puppies）。有什么更好的理由需要在这里创建一个滑出式的导航面板呢？在这里要想看到不同的小动物，那就开始滑动吧。首先从左边开始！
靠向左边
现在已经添加好了center panel，不过要添加left view controller需要一些不同的操作。
回到MainViewController.m文件中，并将下面的import语句添加到文件顶部：
- #import "LeftPanelViewController.h"
然后再定义一个常量：
- #define LEFT_PANEL_TAG2
接着在@interface中添加一些属性，这跟center view类似：
- @property(nonatomic, strong)LeftPanelViewController*leftPanelViewController;
- @property(nonatomic, assign) BOOL showingLeftPanel;
现在找到getLeftView方法，删除掉已有的代码并添加如下代码：
- // init view if it doesn't already exist
- if(_leftPanelViewController==nil)
- {
- // this is where you define the view for the left panel
- self.leftPanelViewController=[[LeftPanelViewController alloc] initWithNibName:@"LeftPanelViewController" bundle:nil];
- self.leftPanelViewController.view.tag= LEFT_PANEL_TAG;
- self.leftPanelViewController.delegate= _centerViewController;
- [self.view addSubview:self.leftPanelViewController.view];
- [self addChildViewController:_leftPanelViewController];
- [_leftPanelViewController didMoveToParentViewController:self];
- _leftPanelViewController.view.frame=CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height);
- }
- self.showingLeftPanel= YES;
- // set up view shadows
- [self showCenterViewWithShadow:YES withOffset:-2];
- UIView*view=self.leftPanelViewController.view;
- return view;
上面的代码首先检查一下看看leftPanelViewController属性是否为nil，如果是nil的话，就分配并初始化一个LeftPanelViewController给leftPanelViewController属性。
接着是赋值一个tag和delegate——用于图片的选择，以及将新创建的view添加到main view中。
然后将showingLeftPanel属性设置为YES，并添加了一些视觉上的处理，在下一节中将介绍相关内容。
最后将view返回给调用者。为什么要这样操作——在后面小节中你将看到为什么。
下面，我们来处理一下阴影。
不要忘记阴影效果
在上面刚刚添加的代码中，你已经看到调用了showCenterViewWithShow:withOffset:方法。该方法使用QuartzCore框架创建并添加一个阴影效果。
为了访问该框架的提供的许多精彩功能，将下面的import语句添加到MainViewController.m文件顶部：
- #import <QuartzCore/QuartzCore.h>
同样，在文件顶部定义一个常量，代表圆角。这样，如果你想要修改圆角的话，只需要在一个地方修改即可。
- #define CORNER_RADIUS4
现在找到showCenterViewWithShadow:withOffset: 方法，并将下面的代码块添加进去:
- if(value)
- {
- [_centerViewController.view.layer setCornerRadius:CORNER_RADIUS];
- [_centerViewController.view.layer setShadowColor:[UIColor blackColor].CGColor];
- [_centerViewController.view.layer setShadowOpacity:0.8];
- [_centerViewController.view.layer setShadowOffset:CGSizeMake(offset, offset)];
- }
- else
- {
- [_centerViewController.view.layer setCornerRadius:0.0f];
- [_centerViewController.view.layer setShadowOffset:CGSizeMake(offset, offset)];
- }
上面的代码中，如果传递过进来的value是非零，就会给center view设置一个圆角和一个阴影。否则就将圆角设置为非圆形。
如果现在运行程序的话，还看不到效果，因为上面的代码还没有用到。
现在回到左边
现在已经获得了滑动导航面板所需的一些材料了，接着继续完成left view controller。一旦完成之后，右边如何移动你也会清楚了。
本文中，为了将注意力几种在重要的地方，我已经把IB文件中涉及到的IBAction和IBOutlet连接好了。不过，为了实现你自己的DIY滑出式导航面板，你需要知道这些IB中的按钮是如何配置的。
看看下面这个张关于截图CenterViewController.xib文件的截图，注意其中的连接：
如上图中的kitties按钮，已经连接到一个名为leftButton的IBOutlet上了，并且这个按钮的Touch Up Inside事件连接到了一个名为btnMovePanelRight:的IBAction上。这个按钮控制着center panel的滑动，以显示出左边的panel。
btnMovePanelRight:现在还是空的，下面我们就来看看如何实现：
打开CenterViewController.m文件，并将下面的代码块添加到btnMovePanelRight:方法中：
- UIButton*button= sender;
- switch(button.tag){
- case0:{
- [_delegate movePanelToOriginalPosition];
- break;
- }
- case1:{
- [_delegate movePanelRight];
- break;
- }
- default:
- break;
- }
上面的代码使用了一个switch语句，通过判断leftButton的tag属性来确定center panel是需要移动到右边，还是需要将其移动到原来的正中间位置。这里的leftButton是通过sender参数传递过来的。button的tag设置为0表示center panel已经移动到右边了，如果设置为1的话，表示center panel已经在原来的正中间位置。
如果你看一下CenterViewController.xib文件，会看到我已经将leftButton的tag默认值设置为1。
看到上面的代码中调用了delegate方法吗？如果你还记得的话，之前在配置CenterViewController示例时，已经将它的delegate设置为MainViewController。因此这里的调用就涉及到了MainViewController中的相关方法。
在实现这些delegate方法之前，首先看看CenterViewController.h文件中协议CenterViewControllerDelegate的定义：
如下图所示，协议中定义了两个optional协议方法，以及一个required协议方法，分别是：movePanelLeft, movePanelRight 和 movePanelToOriginalPosition。
因为CenterViewController的delegate是MainViewController，所以我们在MainViewController中添加这些delegate方法。
打开MainViewController.m文件，并添加如下两个常量定义：
- #define SLIDE_TIMING.25
- #define PANEL_WIDTH60
接着找到movePanelRight方法，并将如下代码块添加到里面：
- UIView*childView=[self getLeftView];
- [self.view sendSubviewToBack:childView];
- [UIView animateWithDuration:SLIDE_TIMING delay:0 options:UIViewAnimationOptionBeginFromCurrentState
- animations:^{
- _centerViewController.view.frame=CGRectMake(self.view.frame.size.width- PANEL_WIDTH,0,self.view.frame.size.width,self.view.frame.size.height);
- }
- completion:^(BOOL finished){
- if(finished){
- _centerViewController.leftButton.tag=0;
- }
- }];
注意：这个方法是由CenterViewController中的btnMovePanelRight:调用的。更多如何实现delegate相关的信息，请参考：苹果开发者文档。
上面的代码就是奇迹发生的地方！:]
首先调用getLeftView方法，该方法返回一个view，然后将view推到背后，接着是进入动画处理过程：使用一个animateWithDuration:animations:completion: 块。在动画中使用到的SLIDE_TIMING和PANEL_WIDTH值可以随意调整。其中SLIDE_TIMING是控制动画的速度，而PANEL_WIDTH是控制动画过后，center view留在屏幕中的宽度。
另外，记住海的把leftButton的tag属性设置为0。如果你还记得的话，这个tag属性用来跟踪记录center view的当前位置。
现在编译并运行一下程序，看看效果如何。
当程序启动后，点击kitties按钮，center panel应该会滑动到右边，并显示出left panel。此时，屏幕上显示的效果如下图所示：
注意观察center view左边缘的圆角和阴影——这两个效果是执行showCenterViewWithShadow:withOffset:（之前添加的方法）方法得到的结果。
再点击一下kitties按钮——什么事情都没有发生。这是因为还没有实现movePanelToOriginalPosition方法。
回到MainViewController.m文件，并将下面的代码块添加到movePanelToOriginalPosition方法中：
- [UIView animateWithDuration:SLIDE_TIMING delay:0 options:UIViewAnimationOptionBeginFromCurrentState
- animations:^{
- _centerViewController.view.frame=CGRectMake(0,0,self.view.frame.size.width,self.view.frame.size.height);
- }
- completion:^(BOOL finished){
- if(finished){
- [self resetMainView];
- }
- }];
同样，在上面的代码中使用了一个animateWithDuration:animations:completion: 块来处理动画。不过这次是将center view的位置以动画的方式设置为最初的位置。
当动画完成的时候，调用了resetMainView方法。目前该方法还没有具体的实现。在该方法中需要重置一下view，下面我们来实现一下吧！
找到resetMainView方法，并将下面的代码添加到方法中：
- // remove left view and reset variables, if needed
- if(_leftPanelViewController!=nil)
- {
- [self.leftPanelViewController.view removeFromSuperview];
- self.leftPanelViewController=nil;
- _centerViewController.leftButton.tag=1;
- self.showingLeftPanel= NO;
- }
- // remove view shadows
- [self showCenterViewWithShadow:NO withOffset:0];
上的代码将left panel从view中移除，并将kitties按钮重置为1（表示center view目前是在最初的位置），另外还移除了center view的圆角和阴影效果。
编译并运行程序，当点击kitties按钮后，再次点击kitties按钮，center view会回到最初的位置，如下图所示：
本文转载 : http://beyondvincent.com/category/ios/raywenderlich/