iOS如何實(shí)現(xiàn)側(cè)滑菜單

這篇文章主要介紹iOS如何實(shí)現(xiàn)側(cè)滑菜單，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

首先簡單說一下我實(shí)現(xiàn)的原理：需要兩個(gè)UIView，一個(gè)是放在中間的CenterView，另一個(gè)是滑動時(shí)左邊顯示出來的LeftView。先把LeftView添加到ViewController中，然后再添加CenterView，這樣CenterView就把LeftView給蓋住了，一開始看到的自然就是CenterView了。因?yàn)榛瑒邮窃贑enterView上進(jìn)行的，因此需要對CenterView添加手勢識別，滑動時(shí)改變CenterView中心點(diǎn)的坐標(biāo)，這樣被覆蓋住的LeftView就顯示出來了。這個(gè)就是實(shí)現(xiàn)的基本原理，下面我進(jìn)行詳細(xì)的分析。

我們先看LeftView，為了和CenterView區(qū)分，我把它的背景設(shè)為紅色，然后中間放了一個(gè)按鈕：

LeftView.h

//
//  LeftView.h
//  SlideView
//
//  Created by hejinlai on 13-8-13.
//  Copyright (c) 2013年 yunzhisheng. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface LeftView : UIView
@end

LeftView.m

//
//  LeftView.m
//  SlideView
//
//  Created by hejinlai on 13-8-13.
//  Copyright (c) 2013年 yunzhisheng. All rights reserved.
//
#import "LeftView.h"
@implementation LeftView
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
                                                                                                                                                                                                                                                                                                                                                                                                            
        self.backgroundColor = [UIColor redColor];
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                                                                                                                                                                                                                                                            
        UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        btn.frame = CGRectMake(0, 0, 100, 50);
        [btn setTitle:@"LeftView" forState:UIControlStateNormal];
        btn.center = CGPointMake(140, 264);
        [btn addTarget:self action:@selector(onClick:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:btn];
                                                                                                                                                                                                                                                                                                                                                                                                            
    }
    return self;
}
- (void)onClick:(UIButton *)button
{
    NSLog(@"LeftView button pressed!");
}
@end

再來看CenterView，首先聲明了屏幕的中心點(diǎn)坐標(biāo)和一個(gè)手勢識別：

#import <UIKit/UIKit.h>
@interface CenterView : UIView
{
    UIPanGestureRecognizer *panGestureRecognizer;
    float centerX;
    float centerY;
}
@end

在CenterView初始化的時(shí)候，計(jì)算屏幕中心點(diǎn)坐標(biāo)，設(shè)置背景為綠色，添加左上角按鈕和手勢識別

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
                                                                                                                                                                                                                                                                                                                     
        CGRect screen = [[UIScreen mainScreen] bounds];
        centerX = screen.size.width / 2;
        centerY = screen.size.height / 2;
                                                                                                                                                                                                                                                                                                                     
        self.backgroundColor = [UIColor greenColor];
                                                                                                                                                                                                                                                                                                                     
        // 左上角按鈕
        UIButton *leftUpBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        leftUpBtn.frame = CGRectMake(10, 10, 40, 40);
        [leftUpBtn addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:leftUpBtn];
                                                                                                                                                                                                                                                                                                                     
        panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
        [self addGestureRecognizer:panGestureRecognizer];
    }
    return self;
}

CenterView最終位置實(shí)際上有兩個(gè)：第一個(gè)位置是充滿整個(gè)屏幕，此時(shí)它的中心點(diǎn)就是屏幕的中心，把LeftView整個(gè)遮?。坏诙€(gè)位置是中心點(diǎn)在右邊，而左邊只露出一小部分在屏幕中，這樣底部的LeftView就可以顯示出來。

我把CenterView最右邊的中心點(diǎn)橫坐標(biāo)的位置設(shè)為420，相當(dāng)于CenterView左邊露出了60大小在屏幕中。還有一個(gè)問題是，滑動停止時(shí)，CenterView回到第一個(gè)位置還是第二個(gè)位置？這里我設(shè)置了一個(gè)邊界值280，如果中心點(diǎn)橫坐標(biāo)小于280就回到第一個(gè)位置，大于280就回到第二個(gè)位置，下面是這兩個(gè)常量的定義：

#define MAX_CENTER_X 420
#define BOUND_X 280

當(dāng)然這兩個(gè)值可以根據(jù)自己的需要進(jìn)行調(diào)整。

CenterView左上角按鈕點(diǎn)擊時(shí)，需要在兩個(gè)位置之間進(jìn)行切換，即如果此時(shí)是第一個(gè)位置要回到第二個(gè)位置，第二個(gè)位置要回到第一個(gè)位置：

- (void)buttonPressed:(UIButton *)button
{
    [UIView animateWithDuration:0.2 animations:^(void){
                                                                                                                 
        if (self.center.x == centerX) {
            self.center = CGPointMake(MAX_CENTER_X, centerY);
        }else if (self.center.x == MAX_CENTER_X){
            self.center = CGPointMake(centerX, centerY);
        }
                                                                                                                 
    }];
                                                                                                             
}

為了看起來比較平滑，加入了動畫效果。

接下來我們看下滑動時(shí)處理的邏輯。首先是計(jì)算出滑動后的中心點(diǎn)橫坐標(biāo)：

CGPoint translation = [recognizer translationInView:self];
    float x = self.center.x + translation.x;

由于CenterView是不能移到左邊的，即CenterView中心點(diǎn)橫坐標(biāo)最小值為centerX，當(dāng)中心點(diǎn)坐標(biāo)小于這個(gè)值時(shí)，需要重置：

if (x < centerX) {
        x = centerX;
    }
    self.center = CGPointMake(x, centerY);

當(dāng)滑動結(jié)束的時(shí)候，需要判斷此時(shí)中心點(diǎn)左邊落到那個(gè)區(qū)域，如果小于邊界值，則回到第一個(gè)位置，大于邊界值則回到第二個(gè)位置，為了看起來比較平滑，加入了動畫效果：

if (recognizer.state == UIGestureRecognizerStateEnded) {
                                           
        [UIView animateWithDuration:0.2 animations:^(void){
                                               
            if (x > BOUND_X) {
                self.center = CGPointMake(MAX_CENTER_X, centerY);
            }else{
                self.center = CGPointMake(centerX, centerY);
            }
                                               
        }];
                                           
                                           
    }
                                       
    [recognizer setTranslation:CGPointZero inView:self];

最后在ViewController加入這兩個(gè)UIVIew，注意先添加LeftView，然后再添加CenterView：

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
                                  
    CGRect screen = [[UIScreen mainScreen] bounds];
    CGFloat width = screen.size.width;
    CGFloat height = screen.size.height;
                                  
    leftView = [[LeftView alloc] init];
    leftView.frame = CGRectMake(0, 0, width, height);
    [self.view addSubview:leftView];
                                  
    centerView = [[CenterView alloc] init];
    centerView.frame = CGRectMake(0, 0, width, height);
    [self.view addSubview:centerView];
}

運(yùn)行結(jié)果：

以上是“iOS如何實(shí)現(xiàn)側(cè)滑菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！