如何创建一个滑出式导航面板(2)-阿里云开发者社区

接着上一篇如何创建一个滑出式导航面板(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。