iOS手势处理

iOS手势处理

iOS手势有着如下几种:

• UITapGestureRecognizer  
• UIPinchGestureRecognizer
• UIRotationGestureRecognizer
• UISwipeGestureRecognizer
• UIPanGestureRecognizer
• UILongPressGestureRecognizer

上面的手势对应的操作是： 

• Tap          （点一下）
• Pinch        （二指往內或往外拨动，平时经常用到的缩放）  矩阵变换
  
• Rotation    （旋转）                                                  矩阵变换
  
• Swipe       （滑动，快速移动）
• Pan          （拖移，慢速移动）                                     矩阵变换
  
• LongPress （长按）

 

注意:以下示例均把手势封装进一个View当中

UITapGestureRecognizer - 点击手势

GestureView.h + GestureView.m

#import <UIKit/UIKit.h>

@interface GestureView : UIView

@end

#import "GestureView.h"

@interface GestureView ()
@property (nonatomic, strong) UITapGestureRecognizer *tapGesture;
@property (nonatomic, strong) CALayer                *colorLayer;
@end

@implementation GestureView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // 初始化手势,给手势指定响应事件的对象
        _tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                              action:@selector(gestureEvent:)];
        _colorLayer = [CALayer layer];
        _colorLayer.frame = self.bounds;
        
        [self.layer addSublayer:_colorLayer];
        
        // 将手势与区域绑定
        [self addGestureRecognizer:_tapGesture];
    }
    return self;
}

- (void)gestureEvent:(UIGestureRecognizer *)sender {
    _colorLayer.backgroundColor = [UIColor colorWithRed:arc4random() % 255 / 255.f
                                                  green:arc4random() % 255 / 255.f
                                                   blue:arc4random() % 255 / 255.f
                                                  alpha:1.0f].CGColor;
}

@end

- (void)addGestureRecognizer:(UIGestureRecognizer *)gestureRecognizer

Attaching a gesture recognizer to a view defines the scope of the represented gesture, causing it to receive touches hit-tested to that view and all of its subviews. The view establishes a strong reference to the gesture recognizer.

将手势识别器附着在一个view上,实际上定义了一个手势接收的区域,会将接收到的触摸事件传递给这个view以及这个view的所有的subviews.这个view会对这个手势识别器强引用.

可以总结两点:

1. 手势会传递给这个view中所有的subviews

2. view会强引用手势识别器

使用如下:

点击手势有两个参数可以设置:

numberOfTapsRequired         点击几次触发事件(默认是1)

numberOfTouchesRequired    需要几个手指点击(默认是1)

 

UIPinchGestureRecognizer - 缩放

GestureView.h + GestureView.m

#import <UIKit/UIKit.h>

@interface GestureView : UIView

@end

#import "GestureView.h"

@interface GestureView ()
@property (nonatomic, strong) UIPinchGestureRecognizer *pinchGesture;
@end

@implementation GestureView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        // 初始化手势,给手势指定响应事件的对象
        _pinchGesture = \
            [[UIPinchGestureRecognizer alloc] initWithTarget:self
                                                      action:@selector(gestureEvent:)];
        
        // 将手势与区域绑定
        [self addGestureRecognizer:_pinchGesture];
    }
    return self;
}

- (void)gestureEvent:(UIPinchGestureRecognizer *)sender
{
    //
    self.transform = CGAffineTransformScale(self.transform, sender.scale, sender.scale);
    sender.scale = 1;
}

@end

缩放手势会用到矩阵变换.

 

UIRotationGestureRecognizer - 旋转

GestureView.h + GestureView.m

#import <UIKit/UIKit.h>

@interface GestureView : UIView

@end

#import "GestureView.h"

@interface GestureView ()
@property (nonatomic, strong) UIRotationGestureRecognizer *rotationGesture;
@end

@implementation GestureView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        // 初始化手势,给手势指定响应事件的对象
        _rotationGesture = \
            [[UIRotationGestureRecognizer alloc] initWithTarget:self
                                                         action:@selector(gestureEvent:)];
        
        // 将手势与区域绑定
        [self addGestureRecognizer:_rotationGesture];
    }
    return self;
}

- (void)gestureEvent:(UIRotationGestureRecognizer *)sender
{
    // 此处用到了矩阵变换
    self.transform = CGAffineTransformRotate(self.transform, sender.rotation);
    sender.rotation = 0;
}

 

UISwipeGestureRecognizer - 滑动

GestureView.h + GestureView.m

#import <UIKit/UIKit.h>

@interface GestureView : UIView

@end

#import "GestureView.h"

@interface GestureView ()
@property (nonatomic, strong) UISwipeGestureRecognizer *swipeGesture;
@end

@implementation GestureView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        // 初始化手势,给手势指定响应事件的对象
        _swipeGesture = \
            [[UISwipeGestureRecognizer alloc] initWithTarget:self
                                                      action:@selector(gestureEvent:)];
        _swipeGesture.direction = \
            UISwipeGestureRecognizerDirectionLeft | UISwipeGestureRecognizerDirectionRight;
        
        // 将手势与区域绑定
        [self addGestureRecognizer:_swipeGesture];
    }
    return self;
}

- (void)gestureEvent:(UISwipeGestureRecognizer *)sender
{
    NSLog(@"left or right");
}

@end

 

UIPanGestureRecognizer - 平移

GestureView.h + GestureView.m

#import <UIKit/UIKit.h>

@interface GestureView : UIView

@end

#import "GestureView.h"

@interface GestureView ()
@property (nonatomic, strong) UIPanGestureRecognizer *panGesture;
@end

@implementation GestureView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        // 初始化手势,给手势指定响应事件的对象
        _panGesture = \
            [[UIPanGestureRecognizer alloc] initWithTarget:self
                                                    action:@selector(gestureEvent:)];

        // 将手势与区域绑定
        [self addGestureRecognizer:_panGesture];
    }
    return self;
}

- (void)gestureEvent:(UIPanGestureRecognizer *)sender
{
    // 此处用到了矩阵变换
    CGPoint translation = [sender translationInView:self];
    
    self.center = CGPointMake(self.center.x + translation.x,
                              self.center.y + translation.y);
    
    [sender setTranslation:CGPointZero
                    inView:self];
}

@end

 

UILongPressGestureRecognizer - 长按手势

GestureView.h + GestureView.m

#import <UIKit/UIKit.h>

@interface GestureView : UIView

@end

#import "GestureView.h"

@interface GestureView ()
@property (nonatomic, strong) UILongPressGestureRecognizer *longPressGesture;
@end

@implementation GestureView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        // 初始化手势,给手势指定响应事件的对象
        _longPressGesture = \
            [[UILongPressGestureRecognizer alloc] initWithTarget:self
                                                          action:@selector(gestureEvent:)];
        _longPressGesture.minimumPressDuration = 2.0f;

        // 将手势与区域绑定
        [self addGestureRecognizer:_longPressGesture];
    }
    return self;
}

- (void)gestureEvent:(UILongPressGestureRecognizer *)sender
{
    NSLog(@"触发事件");
}

@end

 

 

问题:如何处理一个view中添加了两个手势,1个是单击的手势,一个是双击的手势呢?

可以使用这个方法requireGestureRecognizerToFail:

#import "GestureView.h"

@interface GestureView ()
@property (nonatomic, strong) UITapGestureRecognizer *tapGesture1;
@property (nonatomic, strong) UITapGestureRecognizer *tapGesture2;
@end

@implementation GestureView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // 单击手势
        _tapGesture1 = \
            [[UITapGestureRecognizer alloc] initWithTarget:self
                                                    action:@selector(gesture1Event:)];
        _tapGesture1.numberOfTapsRequired = 1;
        
        // 双击手势
        _tapGesture2 = \
            [[UITapGestureRecognizer alloc] initWithTarget:self
                                                    action:@selector(gesture2Event:)];
        _tapGesture2.numberOfTapsRequired = 2;

        // 注意: 判断双击手势需要时间,也就是说会有延时
        
        // 有事件触发时,先判断是不是 双击手势,如果不是就执行 单击手势
        [_tapGesture1 requireGestureRecognizerToFail:_tapGesture2];
        
        // 将手势与区域绑定
        [self addGestureRecognizer:_tapGesture1];
        [self addGestureRecognizer:_tapGesture2];
    }
    return self;
}

- (void)gesture1Event:(UIGestureRecognizer *)sender {
    NSLog(@"1");
}

- (void)gesture2Event:(UIGestureRecognizer *)sender {
    NSLog(@"2");
}

@end

实际上,这种方式会有延时感-_-!!!!

 

问题:如何将长按手势和拖拽手势合并在一起呢? 

我们需要用代理实现,实现以下的方法:

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer  shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer

Asks the delegate if two gesture recognizers should be allowed to recognize gestures simultaneously.

询问这个代理,是否允许两个手势同时触发.

#import "GestureView.h"

@interface GestureView ()<UIGestureRecognizerDelegate>

{
    BOOL  shouldAllowPan;
}

@property (nonatomic, strong) UIPanGestureRecognizer       *panGesture;
@property (nonatomic, strong) UILongPressGestureRecognizer *longPressGesture;
@end

@implementation GestureView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        // 初始化时不允许拖拽
        shouldAllowPan = NO;
        
        _panGesture = \
        [[UIPanGestureRecognizer alloc] initWithTarget:self
                                                action:@selector(panEvent:)];
        [self addGestureRecognizer:_panGesture];
        _panGesture.delegate = self;
        
        _longPressGesture = \
        [[UILongPressGestureRecognizer alloc] initWithTarget:self
                                                      action:@selector(longPressEvent:)];
        _longPressGesture.minimumPressDuration = 1.0f;
        [self addGestureRecognizer:_longPressGesture];
        _longPressGesture.delegate = self;
    }
    return self;
}

- (void)panEvent:(UIPanGestureRecognizer *)sender {
    
    if(shouldAllowPan == YES)
    {
        // 移动的操作
        CGPoint translation = [sender translationInView:self];
        self.center = CGPointMake(self.center.x + translation.x,
                                  self.center.y + translation.y);
        
        [sender setTranslation:CGPointZero
                        inView:self];
    }
    else if(sender.state == UIGestureRecognizerStateEnded || \
            sender.state == UIGestureRecognizerStateFailed || \
            sender.state == UIGestureRecognizerStateCancelled)
    {
        shouldAllowPan = NO;
    }
}

- (void)longPressEvent:(UIGestureRecognizer *)sender
{
    // 长按开始
    if(UIGestureRecognizerStateBegan == sender.state)
    {
        NSLog(@"长按开始");
        self.backgroundColor = [UIColor redColor];
        shouldAllowPan = NO;
    }
    
    // 长按进行中
    if(UIGestureRecognizerStateChanged == sender.state)
    {
        NSLog(@"长按进行中");
        shouldAllowPan = YES;
    }
    
    // 长按结束
    if(UIGestureRecognizerStateEnded == sender.state)
    {
        NSLog(@"长按结束");
        self.backgroundColor = [UIColor blackColor];
        shouldAllowPan = NO;
    }
}

// 是否允许多个手势同时触发
- (BOOL) gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer
shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    // 允许
    return YES;
}

// 是否允许继续跟踪触摸事件
- (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer
{
    // 条件满足的手势会被传递进来(如果是移动手势,)
    if([gestureRecognizer isKindOfClass:[UIPanGestureRecognizer class]] && shouldAllowPan == NO)
    {
        return NO;
    }
    
    return YES;
}


@end

根据手势状态来识别手势触发事件的全称细节是十分重要的.

 

问题:如何让一个view的部分区域响应拖拽事件呢?

比方说,我们只需要下面红色线指定的区域响应拖拽事件:

#import "GestureView.h"

@interface GestureView ()

{

    BOOL  allowPan;

}

@property (nonatomic, strong) UIPanGestureRecognizer       *panGesture;
@end

@implementation GestureView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self)
    {
        // 初始化时不允许拖拽
        allowPan = NO;
        
        _panGesture = \
        [[UIPanGestureRecognizer alloc] initWithTarget:self
                                                action:@selector(panEvent:)];
        [self addGestureRecognizer:_panGesture];
    }
    return self;
}

- (void)panEvent:(UIPanGestureRecognizer *)sender
{
    // 获取到当前手势在当前视图坐标中触摸的点
    CGPoint point = [sender locationInView:self];
    
    // 手势开始时置位(手势事件开始过程中仅仅执行一回)
    if (sender.state == UIGestureRecognizerStateBegan)
    {
        // 设定响应的区域
        if (self.bounds.size.height / 2.f >= point.x && self.bounds.size.width / 2.f >= point.y)
        {
            allowPan = YES;
        }
    }
    
    // 手势持续(手势事件开始过程中执行多回)
    if (sender.state == UIGestureRecognizerStateChanged && allowPan == YES)
    {
        // 移动的操作
        CGPoint translation = [sender translationInView:self];
        self.center = CGPointMake(self.center.x + translation.x,
                                  self.center.y + translation.y);
        
        [sender setTranslation:CGPointZero
                        inView:self];
    }
    
    // 手势结束后置位(手势事件开始过程中仅仅执行一回)
    if (sender.state == UIGestureRecognizerStateEnded)
    {
        allowPan = NO;
    }
}

@end

 要实现那个效果,以下方法是核心方法,配合手势的状态使用:

// 获取到当前手势在当前视图坐标中触摸的点
    CGPoint point = [sender locationInView:self];

 

问题:如何在ViewController中获取到点击的坐标,让一个view跟随触摸点移动呢?

可以使用这几个最原始的处理触摸事件的方法来达到效果.

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event;
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;

#import "RootViewController.h"

@interface RootViewController ()

{
    UIView  *_panPoint;
    CALayer *_redLayer;
}

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 初始化view
    _panPoint = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
    _panPoint.layer.cornerRadius = 25.f;
    _panPoint.layer.masksToBounds = YES;
    [self.view addSubview:_panPoint];
    
    // 初始化一个layer
    _redLayer = [CALayer layer];
    _redLayer.frame = _panPoint.bounds;
    _redLayer.backgroundColor = [UIColor redColor].CGColor;
    _redLayer.opacity = 0.f;
    [_panPoint.layer addSublayer:_redLayer];
}

// 一次完整的触摸事件中,touchesBegan只执行一回
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 获取触摸点坐标
    UITouch *touch = [touches anyObject];
    CGPoint touchPoint = [touch locationInView:self.view];
    
    _panPoint.center = touchPoint;
    _redLayer.opacity = 1.0f;
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 获取触摸点坐标
    UITouch *touch = [touches anyObject];
    CGPoint touchPoint = [touch locationInView:self.view];
    
    _panPoint.center = touchPoint;
}

// 一次完整的触摸事件中,touchesEnded只执行一回
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    // 获取触摸点坐标
    UITouch *touch = [touches anyObject];
    CGPoint touchPoint = [touch locationInView:self.view];
    
    _panPoint.center = touchPoint;
    _redLayer.opacity = 0.0f;
}

@end

也可以直接使用拖拽手势来实现的,不过不完美

#import "RootViewController.h"

@interface RootViewController ()

{
    UIView  *_panPoint;
    CALayer *_redLayer;
}

@end

@implementation RootViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 初始化view
    _panPoint = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
    _panPoint.layer.cornerRadius = 25.f;
    _panPoint.layer.masksToBounds = YES;
    [self.view addSubview:_panPoint];
    
    // 初始化一个layer
    _redLayer = [CALayer layer];
    _redLayer.frame = _panPoint.bounds;
    _redLayer.backgroundColor = [UIColor redColor].CGColor;
    _redLayer.opacity = 0.f;
    [_panPoint.layer addSublayer:_redLayer];
    
    // 定义手势
    UIPanGestureRecognizer *panGesture = \
        [[UIPanGestureRecognizer alloc] initWithTarget:self
                                                action:@selector(panGestureEvent:)];
    [self.view addGestureRecognizer:panGesture];
}

- (void)panGestureEvent:(UIPanGestureRecognizer *)sender
{
    CGPoint touchPoint = [sender locationInView:self.view];
    
    if (sender.state == UIGestureRecognizerStateBegan)
    {
        _panPoint.center = touchPoint;
        _redLayer.opacity = 1.0f;
    }
    else if (sender.state == UIGestureRecognizerStateChanged)
    {
        _panPoint.center = touchPoint;
    }
    else if (sender.state == UIGestureRecognizerStateEnded)
    {
        _panPoint.center = touchPoint;
        _redLayer.opacity = 0.0f;
    }
}

@end

他们两者的对比关系:

 

 

手势处理中核心的地方:

1.  UIGestureRecognizerState非常重要,触发事件时可以直接根据这个状态值来判断事件的发生顺序

2.  处理多手势冲突时,可以使用依赖requireGestureRecognizerToFail:来处理,但效果不好

3.  处理多个手势并发响应的时候,需要实现代理并执行方法,请参考上面的事例

4.  仅仅处理一个view上局部的手势事件,需要用到手势的locationInView:方法,并与UIGestureRecognizerState状态值配合使用

 

 

附录:

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch

这是手势的代理方法,在可以不移除手势的情况下关闭手势的响应,此方法涉及到响应链.