iOS開發之主界面的左右滑動

前言：可能很多iOS開發者在學習之初都會對QQ的主界面的左滑與右滑動感到好奇，今天開始寫我人生中的第一篇博客，即：iOS開發之Slide（主界面側滑側邊欄）。

正文：

            首先，新建類（HomeViewController：命名隨自己）繼承ViewController。

            然后我們需要聲明這些屬性：

//滑動速度系數-建議在0.5-1之間。默認為0.5

@property (nonatomic, assign) CGFloat speedf;

//左側窗控制器

@property (nonatomic, strong) UIViewController *leftVC;

//右側滑框控制器

@property (nonatomic, strong) UIViewController *rightVC;

@property (nonatomic,strong) UIViewController *mainVC;

//點擊手勢控制器，是否允許點擊視圖恢復視圖位置。默認為yes

@property (nonatomic, strong) UITapGestureRecognizer *sideslipTapGes;

//滑動手勢控制器

@property (nonatomic, strong) UIPanGestureRecognizer *pan;

//側滑窗是否關閉(關閉時顯示為主頁)

@property (nonatomic, assign) BOOL closed;

以及下列方法：

-(instancetype)initWithLeftView:(UIViewController *)leftVC withMainview:(UIViewController *)mainVC withRightVC:(UIViewController *)rightVC;

/**

 @brief 關閉左視圖

 */

- (void)closeLeftView;

-(void)closeZPFLeftView;

/**

 @brief 打開左視圖

 */

- (void)openLeftView;

-(void)showZPFleftView;

-(void)showZPFrightView;

-(void)showZPFmainView;

/**

 *  設置滑動開關是否開啟

 *

 *  @param enabled YES:支持滑動手勢，NO:不支持滑動手勢

 */

- (void)setPanEnabled: (BOOL) enabled;

然后在.m文件中我們進行接下來的操作：

@interface LeftSlideViewController ()<UIGestureRecognizerDelegate>

{

    CGFloat _scalef;  //實時橫向位移

}

@property (nonatomic,strong) UITableView *leftTableview;

@property (nonatomic,assign) CGFloat leftTableviewW;

@property (nonatomic,strong) UIView *contentView;

@property (nonatomic,strong) UIView *rightView;

@end

以及實現我們在.h文件中聲明的方法：

-(instancetype)initWithLeftView:(UIViewController *)leftVC withMainview:(UIViewController *)mainVC withRightVC:(UIViewController *)rightVC {

    if (self = [super init]) {

        self.speedf = vSpeedFloat;

        self.leftVC = leftVC;

        self.mainVC = mainVC;

        self.rightVC = rightVC;

        //滑動手勢

        self.pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(ZPFhandlePan:)];

        [self.mainVC.view addGestureRecognizer:self.pan];

        [self.pan setCancelsTouchesInView:YES];

        self.pan.delegate = self;

        self.leftVC.view.hidden = YES;

        self.rightVC.view.hidden = YES;

        [self.view addSubview:self.leftVC.view];

        [self.view addSubview:self.rightVC.view];

        [self.view addSubview:self.mainVC.view];

    }

    return self;

}

#pragma mark -- ZPF左右側滑

-(void)ZPFhandlePan:(UIPanGestureRecognizer *)rec{

    CGPoint point = [rec translationInView:self.view];

    _scalef = (point.x*_speedf+_scalef);

    //根據視圖位置判斷是左滑還是右邊滑動

    if (rec.view.frame.origin.x>=0) {

        rec.view.center = CGPointMake(rec.view.center.x+_speedf*point.x,rec.view.center.y );

        rec.view.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1-_scalef/1000, 1-_scalef/1000);

        [rec setTranslation:CGPointMake(0, 0) inView:self.view];

        self.leftVC.view.hidden = NO;

        self.rightVC.view.hidden = YES;

    }else {

        rec.view.center = CGPointMake(rec.view.center.x + point.x*_speedf,rec.view.center.y);

        rec.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1+_scalef/1000,1+_scalef/1000);

        [rec setTranslation:CGPointMake(0, 0) inView:self.view];

        self.rightVC.view.hidden = NO;

        self.leftVC.view.hidden = YES;

    }

    //手勢結束后修正位置

    if (rec.state == UIGestureRecognizerStateEnded) {

        if (_scalef>140*_speedf) {

            [self showZPFleftView];

        }else if (_scalef<-140*_speedf){

            [self showZPFrightView];

        }else{

            [self showZPFmainView];

            _scalef = 0;

        }

    }

}

#pragma mark -- 單擊手勢

-(void)handleZPFTap:(UITapGestureRecognizer *)tap {

    if (tap.state == UIGestureRecognizerStateEnded) {

        [UIView beginAnimations:nil context:nil];

        tap.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1.0,1.0);

        tap.view.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2,[UIScreen mainScreen].bounds.size.height/2);

        [UIView commitAnimations];

        _scalef = 0;

    }

}

#pragma mark -- 修改視圖位置

//恢復位置

-(void)showZPFmainView {

    [UIView beginAnimations:nil context:nil];

    self.mainVC.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1.0,1.0);

    self.mainVC.view.center = CGPointMake([UIScreen mainScreen].bounds.size.width/2,[UIScreen mainScreen].bounds.size.height/2);

    [UIView commitAnimations];

}

//顯示左視圖

-(void)showZPFleftView {

    [UIView beginAnimations:nil context:nil];

    self.mainVC.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,0.8,0.8);

    self.mainVC.view.center = CGPointMake(340,[UIScreen mainScreen].bounds.size.height/2);

    self.rightVC.view.hidden = YES;

    self.leftVC.view.hidden = NO;

    [UIView commitAnimations];

}

//顯示右視圖

-(void)showZPFrightView {

    [UIView beginAnimations:nil context:nil];

    self.mainVC.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,0.8,0.8);

    self.mainVC.view.center = CGPointMake(self.view.frame.size.width*0.4,[UIScreen mainScreen].bounds.size.height/2);

    self.rightVC.view.hidden = NO;

    self.leftVC.view.hidden = YES;

    [UIView commitAnimations];

}

#pragma mark -- 隱藏左視圖

-(void)closeZPFLeftView {

    [UIView beginAnimations:nil context:nil];

    self.mainVC.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,1.0,1.0);

    self.mainVC.view.center = CGPointMake(kScreenWidth / 2, kScreenHeight / 2);

    self.closed = YES;

    self.leftTableview.center = CGPointMake(kLeftCenterX, kScreenHeight * 0.5);

    self.leftTableview.transform = CGAffineTransformScale(CGAffineTransformIdentity,kLeftScale,kLeftScale);

    self.contentView.alpha = kLeftAlpha;

    [UIView commitAnimations];

    [self removeSingleTap];

}

#pragma mark -- 為了界面美觀，可以選擇隱藏或者顯示狀態欄

-(BOOL)prefersStatusBarHidden {

    return NO;//返回NO表示要顯示，返回YES即不顯示

}

至此我們已建好我們所需的左右滑動的框架。   注：（如需修改左右滑動的距離，只需修改

    self.mainVC.view.transform = CGAffineTransformScale(CGAffineTransformIdentity,0.8,0.8);

    self.mainVC.view.center = CGPointMake(340,[UIScreen mainScreen].bounds.size.height/2);

）

接下來在我們的appdelegate.m文件中進行如下操作：

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    self.window.backgroundColor = [UIColor whiteColor];

    [self.window makeKeyAndVisible];

    ViewController *cc = [[ViewController alloc] init];

     self.mainNavigation = [[UINavigationController alloc] initWithRootViewController:cc];

    RightViewController *asdas = [[RightViewController alloc] init];

    asdas.view.backgroundColor = [UIColor whiteColor];

    LeftViewController *left = [[LeftViewController alloc] init];

    left.view.backgroundColor = [UIColor whiteColor];

    self.leftSlideVC = [[LeftSlideViewController alloc] initWithLeftView:left withMainview:self.mainNavigation withRightVC:asdas];

    [[UINavigationBar appearance] setBarTintColor:[UIColor redColor]];

    [[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];

    self.window.rootViewController = self.leftSlideVC;

    // Override point for customization after application launch.

    return YES;

（可能代碼比較亂，畢竟幫別人加急寫出來的，望大家見諒）。

然后在我們的ViewController中需要觸發左右的地方進行如下操作即可：

    AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];

    if (isLeft == NO) {

        [app.leftSlideVC showZPFleftView];

        isLeft = YES;

    }else{

        [app.leftSlideVC closeZPFLeftView];

        isLeft = NO;

    }

注：isLeft用來判斷左按鈕是否按下。

好了，cmd+r   盡情的享用我們的左右滑動。