iOS Kingdom — 滑动菜单

左滑菜单是我们在开发 App 应用时常用的一种展示菜单方式，下面我们来看下我们这次要实现的目标。。。

.实现原理

先在你的视图的左边加上一个 subView ，然后再在你的视图上加上左滑手势，当你的菜单向左移动时，你视图上的所有子 view 都跟着动起来。

.实现准备

1、先建立一个 UIView 的分类 UIView+Menu.h
2、实现一个为 View 添加菜单的方法

- (void)addMenu:(UIView *)view;

3、建立一些实例变量来保存我们须要的值

UIView *menu;               // 菜单视图
BOOL isShow;                // 菜单是否已出现 
BOOL isAnimation;           // 动画是否完成 
CGPoint beginPoint;         // 记录第一个触屏点
CGPoint changePoint;        // 记录滑动到的点
CGRect initMenuRect;        // 菜单视图的初始值
SwipeLocation swipeLocation;//滑动方向

4、滑动方向

typedef enum {
    SwipeInit,
    SwipeLeft,
    SwipeRight,
    SwipeUp,
    SwipeDown
}SwipeLocation;

.实现

- (void)addMenu:(UIView *)view{
    menu = view;
    // 将菜单放在 view 的左边
    menu.x = -menu.width;
    self.layer.masksToBounds = YES;
    [self addSubview:menu];
    initMenuRect = menu.frame;
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self addGestureRecognizer:pan];
}

添加 pan: 方法来实现滑动

- (void)pan:(UIPanGestureRecognizer *)gesture{
    CGPoint point = [gesture translationInView:self];
    // 滑动百分比
    CGFloat precent = point.x/self.width;
    switch (gesture.state) {
        case UIGestureRecognizerStateBegan: {
            swipeLocation = SwipeInit;
            beginPoint = point;
            break;
        }
        case UIGestureRecognizerStateChanged: {
            // 记录滑动点
            changePoint = point;
            //  判断滑动方向
            [self judgeDirection];
            if (menu.x < - menu.width || menu.x > 0) {
                // 菜单已收起不能再左滑，已出现不能再右滑
                return;
            }
                    for (UIView *view in [self subviews]) {
                        if (isShow) {
                            // hide
                            if (precent > 0) {
                                return;
                            }
                            if (menu.x > -menu.width) {
                                view.x += menu.width*precent - menu.x;
                            }
                        }else {
                            // show
                            if (precent < 0){
                                return;
                            }
                            if (menu.x < 0) {
                                view.x += (menu.width*precent - (menu.x - initMenuRect.origin.x));
                            }
                        }
                    }
                    break;
                }
        default:{
            // 滑动的百分比大于 0.3 时自动收起或显示菜单
            if (fabs(precent) > 0.3) {
                if (isShow) {
                            if (swipeLocation == SwipeLeft) {
                                isShow = YES;
                                [self hideMenuDuration:0.2];
                            }else {
                                [self leftAnimationDuration:0.2];
                            }
                }else {
                            if (swipeLocation == SwipeRight) {
                                [self leftAnimationDuration:0.2];
                            }else {
                                isShow = YES;
                                [self hideMenuDuration:0.2];
                            }
            }else {
                if (isShow) {
                            [self leftAnimationDuration:0.2];
                }else {
                    isShow = YES;
                    [self hideMenuDuration:0.2];
                }
            }
            break;
    }
}

判断滑动方向

/**
 *  判断滑动手势
 */
- (void)judgeDirection{
    if (showLocation == Left || showLocation == Right) {
        if (changePoint.x - beginPoint.x > 0) {
            swipeLocation = SwipeRight;
        }else {
            swipeLocation = SwipeLeft;
        }
    }else {
        if (changePoint.y - beginPoint.y > 0) {
            swipeLocation = SwipeDown;
        }else {
            swipeLocation = SwipeUp;
        }
    }
}

菜单从左边出现动画

- (void)leftAnimationDuration:(NSTimeInterval)duration{
    isAnimation = YES;
    [UIView animateWithDuration:duration
                          delay:0
                        options:UIViewAnimationOptionCurveEaseIn
                     animations:^{
                         for (UIView *subView in [self subviews]) {
                             subView.x += (0 - menu.x);
                         }
                     } completion:^(BOOL finished) {
                         isShow = finished;
                         isAnimation = !finished;
                     }];
}

隐藏动画

- (void)hideMenuDuration:(NSTimeInterval)duration{
    if (!isShow || isAnimation) {
        return;
    }
    isAnimation = YES;
    for (UIView *view in [self subviews]) {
        [UIView animateWithDuration:duration
                              delay:0
                            options:UIViewAnimationOptionCurveLinear
                         animations:^{
                                     view.x -= (menu.x - initMenuRect.origin.x);
                         } completion:^(BOOL finished) {
                             isShow = !finished;
                             isAnimation = !finished;
                         }];
    }
}

示例代码：http://code.cocoachina.com/view/132928