更好的抽屉效果(ios)

昨天项目基本没啥事了，晚上早早的就回家了，躺在床上无聊地玩着手机（Android的），在清理系统垃圾时被一个“360手机助手”给吸引了，

其实我是被它的那个抽屉效果给吸引了，此时你也许会觉得我out了 ，一个抽屉效果有啥好吸引人的。

以前在项目中我也用到过抽屉，也看过大量的抽屉效果，大部分时间时只有一个view可以滑动的，下面那个view是不动的，就像是拉出或推出一个view的效果差不多，

但看到这个 360手机助手的抽屉效果时，我觉得原来的那些真没这个好看。在这个程序中，当你左右拖动那个view A时，另外一个view B也会相应的滑动，但滑动的幅度没有你拖动的那个view A大，不知道我表达清楚没有，你可以下载个360手机助手看看。

于是今天就模仿了一下，拖动view A时 两个view都可以滑动，则说明动画时作用两个view的。

下面直接上代码吧，代码很简单，也没具体完善逻辑，只是个简单的效果实现 ，了解抽屉效果的很容易就看懂的

1.工程结构图

2.主要的代码

//
//  Drawer.h
//  SlideDrawer
//
//  Created by PSH_Chen_Tao on 10/12/13.
//  Copyright (c) 2013 wolfman. All rights reserved.
//

#import <UIKit/UIKit.h>

//表明当前状态的枚举常量
typedef enum{
    DrawerStatusLeft,
    DrawerStatusRight
}DrawerStatus;

@interface Drawer : UIView

//初始化方法
-(id)initWithParent:(UIViewController *)parentViewController firstContent:(UIViewController *)firstContentViewController  secondContent:(UIViewController *)secondContentViewController;

@end

//
//  Drawer.m
//  SlideDrawer
//
//  Created by PSH_Chen_Tao on 10/12/13.
//  Copyright (c) 2013 wolfman. All rights reserved.
//

#import "Drawer.h"
#define kDistance 50
//#define firstContentMoveDistance 100
@implementation Drawer{
    UIViewController *parent;
    
    //控制第一个内容view的controller
    UIViewController *firstContent;
    //控制第二个内容view的controller
    UIViewController *secondContent;
    
    
    // 左滑时 firstContent的 view的center
    CGPoint firstLeft;
    // 右滑时 firstContent的 view的center
    CGPoint firstRight;
    
    // 左滑时 secondContent的 view的center
    CGPoint secondLeft;
    // 右滑时 secondContent的 view的center
    CGPoint secondRight;
    
    // 目前的状态
    DrawerStatus status;
    
    // firstContent  的 center
    CGPoint firstContentCenter;
    
    
    //移动比列,这个是关键，本程序是类似360手机助手一样的效果，两边的view都是
    //可同时移动的，在此就需要一个很好的匹配，移动时两个view的间距不能增大或减小
    float moveScale;
}


-(id)initWithParent:(UIViewController *)parentViewController firstContent:(UIViewController *)firstContentViewController  secondContent:(UIViewController *)secondContentViewController{
    parent = parentViewController;
    firstContent = firstContentViewController;
    secondContent = secondContentViewController;
    // 为了便于效果查看
    firstContent.view.backgroundColor = [UIColor redColor];
    secondContent.view.backgroundColor = [UIColor greenColor];
    
    //设置frame
    self = [super initWithFrame:CGRectMake(0, 0, parent.view.frame.size.width, parent.view.frame.size.height)];
    if (self) {
        firstContent.view.frame = CGRectMake(0, 0, self.frame.size.width, parent.view.frame.size.height);
        [self addSubview:firstContent.view];
        secondContent.view.frame = CGRectMake(0, 0, parent.view.frame.size.width, parent.view.frame.size.height);
        [self addSubview:secondContent.view];
        
        // 下面算firstContent 和 secondContent的左右中心点时是要遵循一定关系的，
        //firstContent  和 secondContent 的可移动距离之和必须等于 parent的宽度
        firstLeft = CGPointMake(self.frame.size.width/2 - kDistance, self.frame.size.height/2);
        firstRight = self.center;
        
        secondLeft = self.center;
        secondRight = CGPointMake(self.frame.size.width+secondContent.view.frame.size.width/2-kDistance, self.frame.size.height/2);
        
        firstContent.view.center = firstRight;
        secondContent.view.center = secondRight;
        status = DrawerStatusRight;
        
        // 加入手势
        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
        tap.numberOfTapsRequired = 1;
        tap.enabled = YES;
        [secondContent.view addGestureRecognizer:tap];
        
        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePan:)];
        pan.enabled = YES;
        [secondContent.view addGestureRecognizer:pan];
        
        //设置第一个view 的起始center
        firstContentCenter = firstContent.view.center;
        
        //这个是关键，为什么要这样算，为了防止两个content view之间的间距发生改变,
        //所以firstContent  和 secondContent 的可移动距离之和必须等于 parent的宽度
        moveScale = (float)kDistance/(float)(self.frame.size.width - kDistance);
    }
    
    return  self;
}


-(void)handleTap:(UITapGestureRecognizer *)tap{
    // 当secondController完全出现在屏幕中时，则只有点击左上角时才有用
    // 呵呵，没啥好写的，就是简单地控制下点击范围
    if (status == DrawerStatusLeft) {
        
        CGPoint p = [tap locationInView:secondContent.view];
        if (p.x > kDistance || p.y > 50) {
            return;
        }
    }
    
    [UIView animateWithDuration:0.3 delay:0.01 options:UIViewAnimationOptionCurveLinear animations:^{
        if (status == DrawerStatusRight) {
            secondContent.view.center = secondLeft;

            firstContent.view.center = firstLeft;
            status = DrawerStatusLeft;
        }else{
            secondContent.view.center = secondRight;
            firstContent.view.center = firstRight;
            status = DrawerStatusRight;
        }
    } completion:nil];
    
}


-(void)handlePan:(UIPanGestureRecognizer *)pan{
    
    CGPoint point = [pan translationInView:self];
    
    if (secondContent.view.center.x + point.x < secondLeft.x) {
        
        secondContent.view.center = secondLeft;
        firstContent.view.center = firstLeft;
        
    }else if (secondContent.view.center.x + point.x > secondRight.x){
        
        secondContent.view.center = secondRight;

        firstContent.view.center = firstRight;
        
    }else{
        secondContent.view.center = CGPointMake(secondContent.view.center.x + point.x, secondContent.view.center.y);
        //firstContent的移动距离必须按照比例计算
        firstContent.view.center  =  CGPointMake(firstContent.view.center.x + point.x*moveScale, firstContent.view.center.y);
    }
    
    [pan setTranslation:CGPointMake(0, 0) inView:self];
    if (pan.state == UIGestureRecognizerStateEnded) {
        [UIView animateWithDuration:0.3 delay:0.01 options:UIViewAnimationOptionCurveLinear animations:^{
            if (secondContent.view.center.x < secondRight.x*4/5) {
                
                secondContent.view.center = secondLeft;

                firstContent.view.center = firstLeft;
                status = DrawerStatusLeft;
            }else{
                
                secondContent.view.center = secondRight;
                firstContent.view.center = firstRight;

                status = DrawerStatusRight;
            }
        } completion:nil];
    }
}

@end

上面两段是主要的代码了，下面是使用的地方

//
//  ViewController.m
//  SlideDrawer
//
//  Created by PSH_Chen_Tao on 10/12/13.
//  Copyright (c) 2013 wolfman. All rights reserved.
//

#import "ViewController.h"

#import "FirstViewController.h"
#import "SecondViewController.h"
#import "Drawer.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    FirstViewController *fisrt = [[FirstViewController alloc]initWithNibName:@"FirstViewController" bundle:nil];
    
    SecondViewController *second = [[SecondViewController alloc]initWithNibName:@"SecondViewController" bundle:nil];
    
    Drawer *drawer = [[Drawer alloc]initWithParent:self firstContent:fisrt secondContent:second];
    [self.view addSubview:drawer];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

 

 

呵呵，可以看看效果，是不是感觉好点。。