iOS 手势处理


iOS 手势处理

内容概述

  • 单击手势处理UITapGestureRecognizer
  • 捏合手势处理UIPinchGestureRecognizer
  • 旋转手势处理UIRotationGestureRecognizer
  • 滑动手势处理UISwipeGestureRecognizer
  • 拖动手势处理UIPanGestureRecognizer
  • 长按手势处理UILongPressGestureRecognizer

iOS手势处理是触屏事件的封装,用来处理复杂的触屏事件。例如,图片的缩放、翻页、拖动组件等操作。iOS中的手势处理分为6种类型,分别是单击手势UITapGestureRecognizer、捏合手势UIPinchGestureRecognizer、旋转手势UIRotationGestureRecognizer、滑动手势UISwipeGestureRecognizer、拖动手势UIPanGestureRecognizer和长按手势UILongPressGestureRecognizer。这些类都是UIGestureRecognizer的子类。

每个UIView及其子类都有一个- (void)addGestureRecognizer:(UIGestureRecognizer *)gestureRecognizer方法,调用方法为该视图类添加手势,一个视图类可以添加多个手势。手势被触发时,会调用类似下面的方法来处理手势。

- (void)handleGesture;
- (void)handleGesture:(UIGestureRecognizer *)gestureRecognizer;

1.1 单击手势处理UITapGestureRecognizer

点击手势是最常用的手势,用于按下或选择一个控件或条目(类似于普通的鼠标点击),下面通过一个实例来演示,如何为一个视图添加点击手势并处理它。实现步骤如下所示。

  1. 创建一个项目。
  2. 在.h头文件中添加UITapGestureRecognizer、UILabel和int类型的count属性,为UILabel添加点击手势,根据当前计数器count值,来更改UILabel背景。
#import <UIKit/UIKit.h>

@interface AmakerViewController : UIViewController

@property(nonatomic,strong)UITapGestureRecognizer *tap;

@property(nonatomic,strong)UILabel *label;

@property(nonatomic)int count;

@end
  1. 在viewDidLoad,方法中实例化UITapGestureRecognizer和UILabel,并为当前view添加点击手势,并指定触发方法。
- (void)viewDidLoad

{

    [super viewDidLoad];

    self.label = [[UILabel alloc]initWithFrame:CGRectMake(20, 20, 100, 100)];

    self.label.text = @" Hello World!";

    self.label.backgroundColor = [UIColor redColor];

    [self.view addSubview:self.label];

    self.count = 0;

    self.tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];

    [self.view addGestureRecognizer:self.tap];

}
  1. 在触发方法中获得当前点,并改变UILabel背景。
-(void)tapAction:(UITapGestureRecognizer*)param{

     CGPoint point = [param locationInView:self.view];

    if (CGRectContainsPoint(self.label.frame,point)) {

        self.count++;

        if (self.count%2==0) {

            self.label.backgroundColor = [UIColor redColor];

        }else{

            self.label.backgroundColor = [UIColor blueColor];

        }

        NSLog(@"[%f,%f]",point.x,point.y);

    }

}
  1. 运行程序,结果如下图所示。

图27.1  点击手势运行结果

1.2 捏合手势处理UIPinchGestureRecognizer

捏合手势典型是对屏幕或图片等进行缩放显示,例如,苹果自带的图片管理软件就是很好的例子。下面我们通过一个实例来演示如何通过捏合手势进行图片的缩放。实现步骤如下所示。

  1. 创建一个项目。
  2. 在.h中声明UIPinchGestureRecognizer和UIImageView属性。
#import <UIKit/UIKit.h>

@interface AmakerViewController : UIViewController

// 捏合手势属性

@property(nonatomic,strong) UIPinchGestureRecognizer *pinch;

// 图片视图属性

@property(nonatomic,strong) UIImageView *img;

@end
  1. 在- (void)viewDidLoad方法中实例化捏合手势实例和图片实例,并将图片添加到当前视图,并为当前视图添加捏合手势。
- (void)viewDidLoad

{

    [super viewDidLoad];

    // 实例化捏合手势

    self.pinch = [[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(pinchAction:)];

    // 实例化UIImageView

    self.img = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"test.jpg"]];

    // 将UIImageView添加到当前View

    [self.view addSubview:self.img];

    // 添加捏合手势

    [self.view addGestureRecognizer:self.pinch];

}
  1. 在捏合触发事件中,获得当前缩放比例,根据当前缩放比例对图片进行缩放。
-(void)pinchAction:(UIPinchGestureRecognizer*)param{

    // 获得当前捏合缩放比例

    float scale = param.scale;

    // 根据捏合缩放比例,对图片进行缩放

    self.img.transform= CGAffineTransformMakeScale(scale, scale);

}
  1. 程序运行结果如下图所示。

图27.2  捏合手势运行结果

1.3 旋转手势处理UIRotationGestureRecognizer

旋转手势可以获得当前的旋转角度,通过该角度可以对当前组件进行旋转,例如,旋转图片等。下面的实例演示了如何通过旋转手势对图片进行旋转操作。实现步骤如下所示:

  1. 创建一个项目。
  2. 在.h文件中添加UIRotationGestureRecognizer属性和UIImageView属性。
@interface AmakerViewController : UIViewController

// 旋转手势属性

@property(nonatomic,strong)UIRotationGestureRecognizer *rotation;

// 图片属性

@property(nonatomic,strong)UIImageView *img;

@end
  1. 在viewDidLoad方法中实例化UIRotationGestureRecognizer和UIImageView,将UIImageView添加到当前View,并为View添加旋转手势。
- (void)viewDidLoad

{

    [super viewDidLoad];

    // 实例化旋转手势

    self.rotation = [[UIRotationGestureRecognizer alloc]initWithTarget:self action:@selector(rotationAction:)];

    // 实例化UIImageView

    self.img = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"test2.jpg"]];

    // 为视图添加旋转手势

    [self.view addGestureRecognizer:self.rotation];

    // 将图片添加到当前视图

    [self.view addSubview:self.img];

}
  1. 实现旋转手势触发的事件方法,获得当前旋转角度,对图片进行旋转。
-(void)rotationAction:(UIRotationGestureRecognizer*)param{

    // 获得旋转角度

    float r = param.rotation;

    // 对图片进行旋转

    self.img.transform =CGAffineTransformMakeRotation(r);

}
  1. 程序运行结果如下图所示。

图27.3  旋转手势运行结果

1.4 滑动手势处理UISwipeGestureRecognizer

滑动手势应用比较广泛,例如,电子书的翻页功能,页面控制UIPageControl和UIImageView实现图片的滑动切换等操作。下面我们就来实现一个页面控制UIPageControl和UIImageView的图片切换程序。程序实现步骤如下:

  1. 创建一个项目,并在项目中添加3张图片。
  2. 在界面上添加UIPageControl和UIImageView组件,并创建相应属性建立连接。
@interface AmakerFirstViewController : UIViewController

// 图片视图属性

@property (strong, nonatomic) IBOutlet UIImageView *image;

// 页面控制视图属性

@property (strong, nonatomic) IBOutlet UIPageControl *pageControl;

// 滑动手势属性

@property(nonatomic,strong)UISwipeGestureRecognizer *swipe;

@end
  1. 在- (void)viewDidLoad方法中实例化两个滑动手势,并分别指定左右滑动方向,添加到当前视图。
- (void)viewDidLoad

{

    [super viewDidLoad];

    // 实例化滑动手势,并指定触发方法

    self.swipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];

    // 指定滑动方向为向左

    self.swipe.direction= UISwipeGestureRecognizerDirectionLeft;

    // 为视图添加滑动手势

    [self.view addGestureRecognizer:self.swipe];

    // 重新实例化滑动手势,并指定触发方法

    self.swipe = [[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipe:)];

    // 滑动方向向右

    self.swipe.direction= UISwipeGestureRecognizerDirectionRight;

    // 为视图添加滑动手势

    [self.view addGestureRecognizer:self.swipe];

}
  1. 在滑动触发方法中,判断滑动方向,增减当前page数,根据page数改变图片,从而达到改变图片的效果。
-(void)swipe:(UISwipeGestureRecognizer*)param{

    int d = param.direction;

    // 判断当前点在图片中

    CGPoint point = [param locationInView:self.view];

    // 判断手势是否在图片中

    if (CGRectContainsPoint(self.image.frame, point)){

        // 判断方向

        switch (d) {

            case UISwipeGestureRecognizerDirectionRight:

                if (self.pageControl.currentPage>0) {

                    self.pageControl.currentPage--;

                }

                break;

            case UISwipeGestureRecognizerDirectionLeft:

                if (self.pageControl.currentPage<self.pageControl.numberOfPages-1) {

                    self.pageControl.currentPage++;

                }

                break;

            default:

                break;

        }

    // 根据当前页面,更改图片

    switch (self.pageControl.currentPage) {

        case 0:

            self.image.image = [UIImage imageNamed:@"test1.jpg"] ;

            break;

        case 1:

            self.image.image = [UIImage imageNamed:@"test2.jpg"] ;

            break;

        case 2:

            self.image.image = [UIImage imageNamed:@"test3.jpg"] ;

            break;

        default:

            break;

    }

    }

}
  1. 程序运行结果如下图所示。

图27.4  滑动手势运行结果

1.5 拖动手势处理UIPanGestureRecognizer

拖动手势可以实现控件的拖拽效果,可以使用拖动手势来改变控件的center属性,从而改变当前空间的位置,下面的程序用来实现通过拖动手势实现按钮位置移动。实现步骤如下所示。

  1. 创建项目,并在界面上添加按钮,并添加按钮属性,添加拖动手势属性。
@interface AmakerDragViewController : UIViewController

// 按钮属性

@property (strong, nonatomic) IBOutlet UIButton *myBtn;

// 拖动手势

@property(nonatomic,strong)UIPanGestureRecognizer *pan;

@end
  1. 在viewDidLoad方法中实例化拖动手势,并添加到当前视图。
- (void)viewDidLoad

{

    [super viewDidLoad];

    // 实例化拖动手势,并指定手势触发调用方法

    self.pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(panAction:)];

    // 为当前视图添加拖动手势

    [self.view addGestureRecognizer:self.pan];

}
  1. 实现拖动手势触发方法,将当前触屏点设置为按钮的center属性。
-(void)panAction:(UIPanGestureRecognizer*)param{

    // 获得当前触屏点

    CGPoint point = [param locationInView:self.view];

    NSLog(@"[%f,%f]",point.x,point.y);

    // 判断当前触屏点是否在按钮上

    if (CGRectContainsPoint(self.myBtn.frame, point)) {

        // 将按钮center属性设置为当前点

        self.myBtn.center = point;

    }

}
  1. 程序运行结果如下图所示。

图27.5  拖动手势运行结果

1.6 长按手势处理UILongPressGestureRecognizer

长按手势和点击手势类似,当用户长时间按在某个控件上时将触发该手势,下面的项目演示了,当用户长按UILabel标签后,触发长按手势,从而更改UILabel的背景。程序实现步骤如下所示:

  1. 创建项目在界面中添加UILabel.
  2. 在.h中创建UILabel属性和UILongPressGestureRecognizer属性。
@interface LongPressViewController : UIViewController

// 长按手势属性

@property(nonatomic,strong)UILongPressGestureRecognizer *longPress;

// UILabel属性

@property (strong, nonatomic) IBOutlet UILabel *myLabel;

@end
  1. 在viewDidLoad中实例化UILongPressGestureRecognizer,并为View添加长按事件,并指定触发事件。
- (void)viewDidLoad

{

    [super viewDidLoad];

    // 实例化UILongPressGestureRecognizer,并指定触发事件方法

    self.longPress = [[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(lp:)];

    // 为view添加长按手势

    [self.view addGestureRecognizer:self.longPress];

}
  1. 在触发的事件方法中,改变UILabel的背景。
-(void)lp:(UILongPressGestureRecognizer*)param{

    NSLog(@"UILongPressGestureRecognizer........");

    // 改变UILabel背景

    self.myLabel.backgroundColor = [UIColor redColor];

}
  1. 程序运行结果如下所示。

图27.6  长按手势运行结果