_________________

本文由破船译自：raywenderlich
转载请注明出处：BeyondVincent的博客
_________________

接着上一篇如何创建一个滑出式导航面板(1)

现在靠向右边

在MainViewController.m文件中，将下面的import语句添加到文件顶部：

#import "RightPanelViewController.h"

然后添加下面的常量定义：

#define RIGHT_PANEL_TAG 3

接着在@interface里面添加如下属性，这样就容易获取到right view和它的当前状态：

@property (nonatomic, strong) RightPanelViewController *rightPanelViewController;  @property (nonatomic, assign) BOOL showingRightPanel;

然后是找到getRightView方法，并移除里面已有的代码，然后添加下面的代码进去：

// init view if it doesn't already exist  if (_rightPanelViewController == nil)  {      // this is where you define the view for the right panel      self.rightPanelViewController = [[RightPanelViewController alloc] initWithNibName:@"RightPanelViewController" bundle:nil];      self.rightPanelViewController.view.tag = RIGHT_PANEL_TAG;      self.rightPanelViewController.delegate = _centerViewController;        [self.view addSubview:self.rightPanelViewController.view];        [self addChildViewController:self.rightPanelViewController];      [_rightPanelViewController didMoveToParentViewController:self];        _rightPanelViewController.view.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);  }    self.showingRightPanel = YES;    // set up view shadows  [self showCenterViewWithShadow:YES withOffset:2];    UIView *view = self.rightPanelViewController.view;  return view;

上面的代码是拷贝getLeftView的，只不过其中的类和属性不同而已。如果对上面的代码有任何疑问，可以回头看看之前的解释。

跟之前的一样，在xib文件中已经连接好了相关的IBAction和IBOutlet。下面是CenterViewController.xib文件的一个截图，显示出了puppies按钮的连接关系：

如上图所示，跟kitties按钮类似，puppies按钮连接到的IBOutlet是rightButton，IBAction是btnMovePanelLeft:。这个按钮控制着center panel的滑动以显示出右边的panel。

下面我们就来让panel移动起来吧。

打开CenterController.m文件，并将下面的代码添加到btnMovePanelLeft:中：

UIButton *button = sender;      switch (button.tag) {      case 0: {          [_delegate movePanelToOriginalPosition];          break;      }        case 1: {          [_delegate movePanelLeft];          break;      }        default:          break;  }

同样，上面的代码与btnMovePanelRight:方法的实现没有什么不同。可以看到delegate的调用方法几乎是一样的。

因为之前已经实现了movePanelToOriginalPostion方法，所以剩下的任务只需要添加movePanelLeft 方法，并修改一下resetMainView以处理right panel即可。

 

将右边显示出来

打开MainViewController.m文件，并将下面的代码添加到movePanelLeft:方法中：

UIView *childView = [self getRightView];  [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.rightButton.tag = 0;                      }                  }];

上面的代码与movePanelRight方法中的基本相同，这里就不再做过多的解释。

接着找到resetMainView方法，并用下面的代码替换已有的内容：

// remove left and right views, and reset variables, if needed  if (_leftPanelViewController != nil)  {      [self.leftPanelViewController.view removeFromSuperview];      self.leftPanelViewController = nil;        _centerViewController.leftButton.tag = 1;      self.showingLeftPanel = NO;  }    if (_rightPanelViewController != nil)  {      [self.rightPanelViewController.view removeFromSuperview];      self.rightPanelViewController = nil;        _centerViewController.rightButton.tag = 1;      self.showingRightPanel = NO;  }    // remove view shadows  [self showCenterViewWithShadow:NO withOffset:0];

上面代码中唯一修改的地方是增加了一个if语句代码块：if(_rightPanelViewController != nil)。该语句判断一下right panel view是否存在，这跟之前检查left panel view一样，并且对_rightPanelViewController做相同的处理！

现在编译并运行程序，点击puppies按钮，将看到如下画面：

看起来不错吧？

在下面一节中，将介绍如何添加手势功能。

来回移动你的手指

在程序中添加手势处理非常简单，不要以为太复杂，很容易就能实现的！

还是在MainViewController.m文件中，找到setupView方法，并在方法的尾部添加如下一行代码：

[self setupGestures];

接着，需要让MainViewController遵循UIGestureRecognizerDelegate协议——将UIGestureRecognizerDelegate添加到文件顶部的@interface中，添加后的代码如下：

@interface MainViewController ()<UIGestureRecognizerDelegate, CenterViewControllerDelegate>

最后，找到setupGestures方法，并将下面的代码块添加进去：

UIPanGestureRecognizer *panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(movePanel:)];  [panRecognizer setMinimumNumberOfTouches:1];  [panRecognizer setMaximumNumberOfTouches:1];  [panRecognizer setDelegate:self];    [_centerViewController.view addGestureRecognizer:panRecognizer];

上面的代码定义了一个UIPanGestureRecognizer，并将movePanel:方法赋值给它，当有检测到手势时，就会调用这个方法。（稍后需要实现movePanel:方法。）

接着，配置一下panRecognizer：将触摸的最大数目和最小数目设置为1，另外还设置了一下delegate。最后，将刚刚创建好的panRecognizer添加到_centerViewController.view中。

注意：更多关于UIGestureRecognizer类的信息, 请参考苹果官方文档。

接着，再做一件事情就可以用手势进行滑动了。

现在就来移动View吧

当识别到手势之后会调用movePanel:方法。所以，本文最后一个任务就是来实现一下这个方法。

movePanel:方法使用到两个属性：showPanel 和 preVelocity。在MainViewController.m文件的@interface中添加上这两个属性：

@property (nonatomic, assign) BOOL showPanel;  @property (nonatomic, assign) CGPoint preVelocity;

找到movePanel: 并将下面这段代码添加进去（很多哦！）：

[[[(UITapGestureRecognizer*)sender view] layer] removeAllAnimations];    CGPoint translatedPoint = [(UIPanGestureRecognizer*)sender translationInView:self.view];  CGPoint velocity = [(UIPanGestureRecognizer*)sender velocityInView:[sender view]];    if([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateBegan) {          UIView *childView = nil;            if(velocity.x > 0) {              if (!_showingRightPanel) {                  childView = [self getLeftView];              }          } else {              if (!_showingLeftPanel) {                  childView = [self getRightView];              }            }          // Make sure the view you're working with is front and center.          [self.view sendSubviewToBack:childView];          [[sender view] bringSubviewToFront:[(UIPanGestureRecognizer*)sender view]];  }    if([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateEnded) {            if(velocity.x > 0) {              // NSLog(@"gesture went right");          } else {              // NSLog(@"gesture went left");          }            if (!_showPanel) {              [self movePanelToOriginalPosition];          } else {              if (_showingLeftPanel) {                  [self movePanelRight];              }  else if (_showingRightPanel) {                  [self movePanelLeft];              }          }  }    if([(UIPanGestureRecognizer*)sender state] == UIGestureRecognizerStateChanged) {          if(velocity.x > 0) {              // NSLog(@"gesture went right");          } else {              // NSLog(@"gesture went left");          }            // Are you more than halfway? If so, show the panel when done dragging by setting this value to YES (1).          _showPanel = abs([sender view].center.x - _centerViewController.view.frame.size.width/2) > _centerViewController.view.frame.size.width/2;            // Allow dragging only in x-coordinates by only updating the x-coordinate with translation position.          [sender view].center = CGPointMake([sender view].center.x + translatedPoint.x, [sender view].center.y);          [(UIPanGestureRecognizer*)sender setTranslation:CGPointMake(0,0) inView:self.view];            // If you needed to check for a change in direction, you could use this code to do so.          if(velocity.x*_preVelocity.x + velocity.y*_preVelocity.y > 0) {              // NSLog(@"same direction");          } else {              // NSLog(@"opposite direction");          }            _preVelocity = velocity;  }

上面代码中的注视已经有对功能做了不错的解释。下面是一些需要明白的关键信息：

• 需要处理3个状态：UIGestureRecognizerStateBegan, UIGestureRecognizerStateEnded和 UIGestureRecognizerStateChanged。
• translationInView：返回某个位置在指定view的坐标系中的point，并将这个point赋值给translatedPoint变量, 该变量用来设置view的位置。
• velocityInView: 返回每秒钟手势的移动速率。该变量有助于确定方向的改变。

你可以移动center，left和right view，并结合上面提到的3个状态，就可以确定手势的位置和速率/方向。

例如，如果手势方向是向右的，那么就显示出left panel。如果方向是向左，则显示出right panel。通过查看代码和相关的注释，就可以知道每一种状态都发生了什么。

再次编译并运行程序。现在应该可以把center panel滑动到左边或者右边了，并显示出center panel下面的panel。

 

何去何从

如果你完全按照本文介绍的方法来操作，那么恭喜你，你已经成为一名滑出式导航面板忍者了！

希望本文对你有用！这里是本文涉及到的完整示例工程：completed project file。

之前我提到过，如果你更喜欢已经定义好了的库，而不是DIY，那么请看SWRevealViewController. 看看这里的开发者相关介绍，很容易就能使用它了。