iOS学习笔记-069.手势识别03——抽屉控件实现

手势识别03—抽屉控件实现

一、预览

实现一个左右可以滑动的抽屉控件效果，如下图：

二、简单分析

实现上面的这个控件效果
1.能够拖动，说明我们可以使用，拖拽手势
2.界面有三个部分组成，左边的控件、中间的控件、右边的控件
3.这个三个界面中，我们拖拽都在中间这个控件上，所有我们可以给中间的控件添加拖拽手势
4.添加界面会发现，中间的控件会占满界面，说明需要给控制器的view添加一个敲击手势

通过以上的分析，我们可以发现，这个抽屉控件，主要有5个部分组成：

1. 左边的控件(UIView)
2. 中间的控件(UIView)
3. 右边的控件(UIView)
4. 中间控件的拖拽手势(UIPanGestureRecognizer)
5. 控制器view的敲击手势(UITapGestureRecognizer)

ok~~~

三、创建基本布局

基本布局由左中右三个控件组成

-(void)createLayout{    //创建leftView    UIView * leftV = [[UIView alloc]initWithFrame:self.view.bounds];    leftV.backgroundColor = [UIColor blueColor];    [self.view addSubview:leftV];    self.leftView = leftV;    //创建rightView    UIView * rightV = [[UIView alloc]initWithFrame:self.view.bounds];    rightV.backgroundColor = [UIColor redColor];    [self.view addSubview:rightV];    self.rightView = rightV;    //创建mainView    UIView * mainV = [[UIView alloc]initWithFrame:self.view.bounds];    mainV.backgroundColor = [UIColor greenColor];    [self.view addSubview:mainV];    self.mainView = mainV;}

四、添加手势

布局创建好了以后，我们添加手势，主要添加两个手势：

1. 中间控件的拖拽手势(UIPanGestureRecognizer)
2. 控制器view的敲击手势(UITapGestureRecognizer)

-(void)addGesture{    //给mainView添加拖动手势    UIPanGestureRecognizer * pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGesture:)];    [self.mainView addGestureRecognizer:pan];    //给控制器的view添加点击手势，一点击，就回到主界面上来    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapGesture)];    [self.view addGestureRecognizer:tap];}

五、界面拖拽时的处理

5.1 左边和中间控件滑动分析

滑动的时候，如上面的图显示，图1为正常状态，此时中间的view占满屏幕，我们滑动进行分析，分析的终止点是 拖拽手势结束

向右滑动的分析

1. 图1–>图2–>图1 ： 从正常状态向右滑动，最终停留在 图2 这种状态(中间view的x(图3中的x)没有超过屏幕宽度的一半)，这种情况，我们需要让它自动变为正在状态，即 图1
2. 图1–>图3–>图4 ： 从正常状态向右滑动，最终停留在 图3这种状态(中间view的x(图3中的x)超过了屏幕宽度的一半)，这种情况，我们需要让它自动变为右边状态，即 图4
3. 图4向右–>图4 ：右边状态向右滑动，我们恢复到 右边状态 图4

通过上面的分析，我们得出结论：
向右滑动结束，我们只需要判断，中间控件的 x 是否超过屏幕的一半，超过了图4状态，没超过图1状态

向左滑动的分析
1. 图4–>图3–>图4
2. 图4–>图2–>图1

向左滑动，我们的判断依据还是中间view的x值(距离左边的值)。

综合上述： 左、中控件的滑动，我们只需要判断 x值(中间控件距离左边的距离)大于屏幕的一边，大于图4，小于图1

---

5.2 右边和中间控件滑动分析

向左滑动的分析

1. 图5–>图6–>图5
2. 图5–>图7–>图8
3. 图8向左–>图8

向左滑动的时候：我们可以通过 中间view的最大x值(图6中的maxX)是否超过屏幕的一半来判断，没超过图8状态，超过图5状态

向右滑动的分析

1. 图8–>图7–>图8
2. 图8–>图6–>图5

向左滑动时候得出的结论同上。

综合上述：右、中控件滑动的时候，我们只需要判断maxX值(图6中的maxX)是否超过屏幕的一半来判断，没超过图8状态，超过图5状态

5.3 三个控件的滑动的分析

通过上面的分析，我们可以做如下的判断（拖拽结束时）：

1. 判断x值，是否超过屏幕的一半，超过了图4状态，没超过走第2步骤
2. 判断maxX值，是否超过屏幕的一半，没超过图8状态，超过走第3步骤
3. 恢复原来的状态

#define targetR 275#define targetL -275-(void)panGesture:(UIPanGestureRecognizer*)pan{    //获取到偏移量量    CGPoint panP =[pan translationInView:self.mainView];    //为什么不使用transform,是因为我们还要去修改高度,使用transform,只能修改,x,y    //self.mainV.transform = CGAffineTransformTranslate(self.mainV.transform, transP.x, 0);    self.mainView.frame = [self frameWithOffsetX:panP.x];    //判断拖动方向    if (self.mainView.frame.origin.x>0) {//右        self.rightView.hidden = YES;    } else if(self.mainView.frame.origin.x<0){//左        self.rightView.hidden = NO;    }    //自动点位计算    //拖动结束以后做判断    //1.x值大于一半的屏幕宽度，说明在右侧    //2.maxX值小于一半的屏幕宽度，说明在左侧    CGFloat target = 0;    if(pan.state == UIGestureRecognizerStateEnded){        if(self.mainView.frame.origin.x > 0.5*screenW){//右侧            target = targetR;        }else if(CGRectGetMaxX(self.mainView.frame) < 0.5*screenW){            //获取最大的x值，判断，当前是小于屏幕的一半            target = targetL;        }        //计算view的frame        CGFloat offSet = target - self.mainView.frame.origin.x;        [UIView animateWithDuration:0.1 animations:^{            self.mainView.frame = [self frameWithOffsetX:offSet];        }];    }    [pan setTranslation:CGPointZero inView:self.mainView];}#define maxY 100//根据偏移量计算MainV的frame- (CGRect)frameWithOffsetX:(CGFloat)offsetX {    CGRect frame = self.mainView.frame;    //x值的计算    frame.origin.x += offsetX;    //y值得计算    //最大值是 maxY ，就是拖动的view的x值等于屏幕的宽度的时候就是这个值    //拖动最小的时候，就是0    //所以可以知道 y 的变化为： y = x * maxY/screenW    CGFloat y = fabs( frame.origin.x * maxY / screenW );    frame.origin.y = y;    //计算高度，其实高度就是 屏幕的高度减去两倍计算的y值    frame.size.height = [UIScreen mainScreen].bounds.size.height - 2*frame.origin.y;    return frame;}

六、敲击手势处理

点击屏幕，我们恢复到正常状态图1

-(void)tapGesture{    //mainView复位    [UIView animateWithDuration:0.1 animations:^{        self.mainView.frame = self.view.bounds;    }];}

七、代码示例

////  DragViewController.m//  03_UIView62_抽屉效果////  Created by 杞文明 on 17/4/2.//  Copyright © 2017年 杞文明. All rights reserved.//#import "DragViewController.h"#define screenW [UIScreen mainScreen].bounds.size.width@interface DragViewController ()@property(weak,nonatomic)UIView* leftView;@property(weak,nonatomic)UIView* rightView;@property(weak,nonatomic)UIView* mainView;@end@implementation DragViewController- (void)viewDidLoad {    [super viewDidLoad];    //创建布局    [self createLayout];    //添加手势    [self addGesture];}-(void)createLayout{    //创建leftView    UIView * leftV = [[UIView alloc]initWithFrame:self.view.bounds];    leftV.backgroundColor = [UIColor blueColor];    [self.view addSubview:leftV];    self.leftView = leftV;    //创建rightView    UIView * rightV = [[UIView alloc]initWithFrame:self.view.bounds];    rightV.backgroundColor = [UIColor redColor];    [self.view addSubview:rightV];    self.rightView = rightV;    //创建mainView    UIView * mainV = [[UIView alloc]initWithFrame:self.view.bounds];    mainV.backgroundColor = [UIColor greenColor];    [self.view addSubview:mainV];    self.mainView = mainV;}-(void)addGesture{    //给mainView添加拖动手势    UIPanGestureRecognizer * pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panGesture:)];    [self.mainView addGestureRecognizer:pan];    //给控制器的view添加点击手势，一点击，就回到主界面上来    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapGesture)];    [self.view addGestureRecognizer:tap];}-(void)tapGesture{    //mainView复位    [UIView animateWithDuration:0.1 animations:^{        self.mainView.frame = self.view.bounds;    }];}#define targetR 275#define targetL -275-(void)panGesture:(UIPanGestureRecognizer*)pan{    //获取到偏移量量    CGPoint panP =[pan translationInView:self.mainView];    //为什么不使用transform,是因为我们还要去修改高度,使用transform,只能修改,x,y    //self.mainV.transform = CGAffineTransformTranslate(self.mainV.transform, transP.x, 0);    self.mainView.frame = [self frameWithOffsetX:panP.x];    //判断拖动方向    if (self.mainView.frame.origin.x>0) {//右        self.rightView.hidden = YES;    } else if(self.mainView.frame.origin.x<0){//左        self.rightView.hidden = NO;    }    //自动点位计算    //拖动结束以后做判断    //1.x值大于一半的屏幕宽度，说明在右侧    //2.maxX值小于一半的屏幕宽度，说明在左侧    CGFloat target = 0;    if(pan.state == UIGestureRecognizerStateEnded){        if(self.mainView.frame.origin.x > 0.5*screenW){//右侧            target = targetR;        }else if(CGRectGetMaxX(self.mainView.frame) < 0.5*screenW){            //获取最大的x值，判断，当前是小于屏幕的一半            target = targetL;        }        //计算view的frame        CGFloat offSet = target - self.mainView.frame.origin.x;        [UIView animateWithDuration:0.1 animations:^{            self.mainView.frame = [self frameWithOffsetX:offSet];        }];    }    [pan setTranslation:CGPointZero inView:self.mainView];}#define maxY 100//根据偏移量计算MainV的frame- (CGRect)frameWithOffsetX:(CGFloat)offsetX {    CGRect frame = self.mainView.frame;    //x值的计算    frame.origin.x += offsetX;    //y值得计算    //最大值是 maxY ，就是拖动的view的x值等于屏幕的宽度的时候就是这个值    //拖动最小的时候，就是0    //所以可以知道 y 的变化为： y = x * maxY/screenW    CGFloat y = fabs( frame.origin.x * maxY / screenW );    frame.origin.y = y;    //计算高度，其实高度就是 屏幕的高度减去两倍计算的y值    frame.size.height = [UIScreen mainScreen].bounds.size.height - 2*frame.origin.y;    return frame;}@end