新建抽屉类
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
