现在很多应用中都使用到了抽屉效果,在这里我简单的实现了下
抽屉效果.gif
- 在这里我做的是三个界面的切换
- 实现思路:1.通过在一个控制器中添加三个View来实现的
- 2.在最上面的控制器添加滑动手势,幷控制第二张图片的显示和隐藏
- 3.在控制器的view上添加点按手势,进行复位操作
代码如下 :
在XHGDrawerViewController.h中
#import <UIKit/UIKit.h>
@interface XHGDrawerViewController : UIViewController
/** 中间的View */
@property (nonatomic ,weak, readonly) UIView *mainV;
/** left的View */
@property (nonatomic ,weak,readonly) UIView *leftV;
/** right的View */
@property (nonatomic ,weak, readonly) UIView *rightV;
/** 中间视图距离上下的距离 */
@property (nonatomic ,assign) CGFloat maxY;
/** 中间视图向右的偏移距离 */
@property (nonatomic ,assign) CGFloat offsetRight;
/** 中间视图向左的偏移距离 这里为负数 */
@property (nonatomic ,assign) CGFloat offsetLeft;
@end
在这里提供了三个视图的view和设置偏移位置接口
在XHGDrawerViewController.m中
#import "XHGDrawerViewController.h"
#define screenW [UIScreen mainScreen].bounds.size.width
#define screenH [UIScreen mainScreen].bounds.size.height
@interface XHGDrawerViewController ()
@end
@implementation XHGDrawerViewController
#pragma mark -- setter方法
//距离上下位置
- (void)setMaxY:(CGFloat)maxY{
_maxY = maxY;
}
//向右偏移
- (void)setOffsetRight:(CGFloat)offsetRight{
_offsetRight = offsetRight;
}
//向左偏移
- (void)setOffsetLeft:(CGFloat)offsetLeft{
_offsetLeft = offsetLeft;
}
- (void)viewDidLoad {
[super viewDidLoad];
//赋值初始值
self.maxY = 0;
self.offsetLeft = -(screenW * 0.7);
self.offsetRight = screenW * 0.7;
//添加View
[self setUpView];
//添加手势
[self setupGesture];
}
#pragma mark -- 手势操作
- (void)setupGesture{
//添加手势
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
[self.mainV addGestureRecognizer:pan];
//给控制器的View添加点按手势
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapGes)];
[self.view addGestureRecognizer:tap];
}
//点按
-(void)tapGes{
//做复位操作.
[UIView animateWithDuration:0.25 animations:^{
self.mainV.frame = self.view.bounds;
}];
}
//当手指拖动的时候调用
- (void)pan:(UIPanGestureRecognizer *)pan{
//让mainV跟着手指移动而移动.
//获取手指的偏移量
CGPoint transP = [pan translationInView:self.mainV];
//直接修改Frame
self.mainV.frame = [self frameWithoffsetX:transP.x];
//判断当前mainV的x
//如果x大于0,显示左边的内容
//如果小于0显示右边的内容
if(self.mainV.frame.origin.x > 0){
//让右边隐藏
self.rightV.hidden = YES;
} else if(self.mainV.frame.origin.x < 0){
//显示右边的内容
self.rightV.hidden = NO;
}
CGFloat target = 0;
//判断手势的状态,当手指离开View时,让它做定位
if(pan.state == UIGestureRecognizerStateEnded){
//当mainV的x大于屏幕宽度的一半时,自动定位右边.
if (self.mainV.frame.origin.x > screenW * 0.5) {
target = self.offsetRight;
}else if(CGRectGetMaxX(self.mainV.frame) < screenW * 0.5){
//当MaiV它的最大的X小于屏幕宽度的一半时,自动定位左边
target = self.offsetLeft;
}
CGFloat offsetX = target - self.mainV.frame.origin.x;
[UIView animateWithDuration:0.25 animations:^{
self.mainV.frame = [self frameWithoffsetX:offsetX];
}];
}
//复位
[pan setTranslation:CGPointZero inView:self.mainV];
}
//根据一个偏移量计算mainV的frame.
- (CGRect)frameWithoffsetX:(CGFloat)offsetX{
CGRect frame = self.mainV.frame;
frame.origin.x += offsetX;
//求y值(结果有可能为负, 所以在这个地方取个绝对值)
frame.origin.y = fabs(frame.origin.x * self.maxY / screenW );
//求高度
frame.size.height = screenH - 2 * frame.origin.y;
return frame;
}
#pragma mark -- 添加View
- (void)setUpView{
//1.添加左边的View
UIView *leftV = [[UIView alloc] initWithFrame:self.view.bounds];
leftV.backgroundColor = [UIColor blueColor];
_leftV = leftV;
[self.view addSubview:leftV];
//2.添加右边的View
UIView *rightV = [[UIView alloc] initWithFrame:self.view.bounds];
rightV.backgroundColor = [UIColor greenColor];
_rightV = rightV;
[self.view addSubview:rightV];
//3.添加中间的View.
UIView *mainV = [[UIView alloc] initWithFrame:self.view.bounds];
mainV.backgroundColor = [UIColor redColor];
_mainV = mainV;
[self.view addSubview:mainV];
}
@end
使用时可以选择直接继承自XHGDrawerViewController或者创建幷添加到要使用的控制器来实现
- 如这里在ViewController.m中的实现
- (void)viewDidLoad {
[super viewDidLoad];
//添加抽屉控制器到当前控制器
XHGDrawerViewController *drawer = [[XHGDrawerViewController alloc] init];
[self addChildViewController:drawer];
[self.view addSubview:drawer.view];
//包装中间的控制器为导航控制器 幷添加
UIViewController *control = [[UINavigationController alloc] initWithRootViewController:[[XHGTableViewController alloc] init]];
[drawer.mainV addSubview:control.view];
[drawer addChildViewController:control];
drawer.maxY = 100;
}
githubDemo地址XHGDrawerDemo
