更好的抽屉效果(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(, , parent.view.frame.size.width, parent.view.frame.size.height)];
     if (self) {
         firstContent.view.frame = CGRectMake(, , self.frame.size.width, parent.view.frame.size.height);
         [self addSubview:firstContent.view];
         secondContent.view.frame = CGRectMake(, , 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/ - kDistance, self.frame.size.height/);
         firstRight = self.center;

         secondLeft = self.center;
         secondRight = CGPointMake(self.frame.size.width+secondContent.view.frame.size.width/-kDistance, self.frame.size.height/);

         firstContent.view.center = firstRight;
         secondContent.view.center = secondRight;
         status = DrawerStatusRight;

         // 加入手势
         UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleTap:)];
         tap.numberOfTapsRequired = ;
         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 > ) {
             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(, ) inView:self];
     if (pan.state == UIGestureRecognizerStateEnded) {
         [UIView animateWithDuration:0.3 delay:0.01 options:UIViewAnimationOptionCurveLinear animations:^{
             if (secondContent.view.center.x < secondRight.x*/) {

                 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

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