iOS Kingdom — 滑動(dòng)菜單

左滑菜單是我們?cè)陂_(kāi)發(fā) App 應(yīng)用時(shí)常用的一種展示菜單方式,下面我們來(lái)看下我們這次要實(shí)現(xiàn)的目標(biāo)。。。


.實(shí)現(xiàn)原理

先在你的視圖的左邊加上一個(gè) subView ,然后再在你的視圖上加上左滑手勢(shì),當(dāng)你的菜單向左移動(dòng)時(shí),你視圖上的所有子 view 都跟著動(dòng)起來(lái)。

.實(shí)現(xiàn)準(zhǔn)備

1、先建立一個(gè) UIView 的分類 UIView+Menu.h
2、實(shí)現(xiàn)一個(gè)為 View 添加菜單的方法

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

3、建立一些實(shí)例變量來(lái)保存我們須要的值

UIView *menu;               // 菜單視圖
BOOL isShow;                // 菜單是否已出現(xiàn) 
BOOL isAnimation;           // 動(dòng)畫(huà)是否完成 
CGPoint beginPoint;         // 記錄第一個(gè)觸屏點(diǎn)
CGPoint changePoint;        // 記錄滑動(dòng)到的點(diǎn)
CGRect initMenuRect;        // 菜單視圖的初始值
SwipeLocation swipeLocation;//滑動(dòng)方向

4、滑動(dòng)方向

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

.實(shí)現(xiàn)

- (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: 方法來(lái)實(shí)現(xiàn)滑動(dòng)

- (void)pan:(UIPanGestureRecognizer *)gesture{
    CGPoint point = [gesture translationInView:self];
    // 滑動(dòng)百分比
    CGFloat precent = point.x/self.width;
    switch (gesture.state) {
        case UIGestureRecognizerStateBegan: {
            swipeLocation = SwipeInit;
            beginPoint = point;
            break;
        }
        case UIGestureRecognizerStateChanged: {
            // 記錄滑動(dòng)點(diǎn)
            changePoint = point;
            //  判斷滑動(dòng)方向
            [self judgeDirection];
            if (menu.x < - menu.width || menu.x > 0) {
                // 菜單已收起不能再左滑,已出現(xiàn)不能再右滑
                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:{
            // 滑動(dòng)的百分比大于 0.3 時(shí)自動(dòng)收起或顯示菜單
            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;
    }
}

判斷滑動(dòng)方向

/**
 *  判斷滑動(dòng)手勢(shì)
 */
- (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;
        }
    }
}

菜單從左邊出現(xiàn)動(dòng)畫(huà)

- (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;
                     }];
}

隱藏動(dòng)畫(huà)

- (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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容