简单实现抽屉效果

新建抽屉类

Snip20160420_25.png

在抽屉类的.h文件中

#import <UIKit/UIKit.h>

@interface GZDDrawerViewController : UIViewController

/** 主视图中间的那个视图 */
@property (weak, nonatomic) UIView *mainView;
/** 左边视图 */
@property (weak, nonatomic) UIView *leftView;
/** 右边视图 */
@property (weak, nonatomic) UIView *rightView;

@end

抽屉类的.m文件中

#import "GZDDrawerViewController.h"
/** 最终位置的高度 */
CGFloat const ultimateTop = 80;
/** 最终位置的边距 */
CGFloat const ultimateMargin = 80;
/** 动画持续时间 */
CGFloat const animationDuration = 0.25;
#define screenW [UIScreen mainScreen].bounds.size.width
#define screenH [UIScreen mainScreen].bounds.size.height

@interface GZDDrawerViewController ()

@property (strong, nonatomic) UITapGestureRecognizer *tapp;

@end

@implementation GZDDrawerViewController


- (void)viewDidLoad {
    [super viewDidLoad];
    //方法用来创建三个子视图
    [self setupChildViews];
    //设置手势
    [self setupGestureRecognizer];
}


/** 设置子视图 */
- (void)setupChildViews {
    //创建右边的视图
    UIView *rightView = [[UIView alloc] init];
    rightView.frame = self.view.bounds;
    [self.view addSubview:rightView];
    self.rightView = rightView;
    
    //创建左边的视图
    UIView *leftView = [[UIView alloc] init];
    leftView.frame = self.view.bounds;
    [self.view addSubview:leftView];
    self.leftView = leftView;
    
    //创建主视图
    UIView *mainView = [[UIView alloc] init];
    mainView.frame = self.view.bounds;
    [self.view addSubview:mainView];
    self.mainView  = mainView;
}

- (void)setupGestureRecognizer {
    
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
    [self.view addGestureRecognizer:pan];
    
    UITapGestureRecognizer *mainTap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap)];
    //设置主视图上的点按手势
    self.mainTap = mainTap;
    [self.mainView addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
}

//点按手势,作用为让主视图还原
- (void)tap {
    
        [UIView animateWithDuration:0.25 animations:^{
    
            self.mainView.frame = self.view.bounds;
    
        }];
}
//拖拽手势
- (void)pan:(UIPanGestureRecognizer *)pan {
    
    CGFloat offsetX = [pan translationInView:self.view].x;
    //根据offset计算主视图的frame
    [self setupMainViewFrameWithOffsetX:offsetX];
    [pan setTranslation:CGPointZero inView:self.view];
    
    //frame.origin.x > 0 往右边拖拽
    //frame.origin.x < 0 往左边拖拽
    //根据主视图的frame 设置左边view的显示隐藏
    self.leftView.hidden = self.mainView.frame.origin.x > 0? NO : YES;
    //停止状态时
    if (pan.state == UIGestureRecognizerStateEnded) {

        if (self.mainView.frame.origin.y < ultimateTop * 0.5) { // 没有超过一半
            
            [UIView animateWithDuration:animationDuration animations:^{
                
                self.mainView.frame = self.view.bounds;
                
            }];
            
            
        }else if(self.mainView.frame.origin.y >= ultimateTop * 0.5){//超过一半
//            //宽高比
////            screenW    screenH
////            x?           screenH - 2 * ultimateTop
            CGFloat width =  screenW *(screenH - 2 *ultimateTop) / screenH;
            CGFloat height = screenH - 2 * ultimateTop;
            CGFloat y = ultimateTop;
            CGFloat x = self.mainView.frame.origin.x > 0? (screenW - ultimateMargin ) : ( ultimateMargin - width);
            
            [UIView animateWithDuration:animationDuration animations:^{
                
                self.mainView.frame = CGRectMake(x, y, width, height);
                
            }];
        }
    }
}


- (void)setupMainViewFrameWithOffsetX:(CGFloat)offsetX {
    //当前的frame
    CGRect frame = self.mainView.frame;
    
    frame.origin.x += offsetX;
    
    CGFloat leftWidth = screenW - ultimateMargin;
    
    frame.origin.y  = frame.origin.x > 0 ? frame.origin.x / leftWidth * ultimateTop: -frame.origin.x / leftWidth * ultimateTop;
    frame.size.height = screenH - 2 * frame.origin.y;
    self.mainView.frame = frame;
}
@end

最终实现效果

差不多最终.gif 包装导航控制器后.gif