iPad应用中手势识别的实现与应用

### iPad 应用中手势识别的实现与应用 #### 1. 引言 iPad 的一大重要卖点是其具备多点输入检测功能的屏幕。这种多点触控输入方式，让用户与应用之间的交互变得自然流畅。例如，移动 Safari 网络浏览器就凭借多点触控技术，成为智能手机上最易用的浏览器之一。iPad 能够识别各种多点触控序列，也就是手势，并针对每种手势执行相应的操作。接下来，我们将深入探讨如何在应用中识别这些手势，并实现一些能增强用户与应用交互的酷炫功能。 #### 2. 手势识别器概述 iPhone SDK 3.2 引入了一组名为手势识别器的新类。这些手势识别器让我们能够轻松检测用户执行的各种手势。例如，用户用两根手指捏合屏幕，以此表达放大或缩小图像的意图。借助手势识别器，我们无需编写复杂的代码来检测手指的移动，就能轻松识别 iPad 支持的各种手势。 iPhone SDK 3.2 支持以下六种手势识别器： | 手势识别器 | 功能 | | --- | --- | | UITapGestureRecognizer | 检测视图上的点击操作 | | UIPinchGestureRecognizer | 检测视图的捏合操作（放大或缩小） | | UIPanGestureRecognizer | 检测视图的平移或拖动操作 | | UISwipeGestureRecognizer | 检测视图的滑动操作 | | UIRotationGestureRecognizer | 检测视图的旋转操作 | | UILongPressGestureRecognizer | 检测视图上的长按操作（即“触摸并按住”） | 这六种手势识别器都继承自 UIGestureRecognizer 基类。下面，我们将逐步构建一个应用，先实现对视图点击的检测，再逐步扩展到其他手势的检测。 #### 3. 点击手势的识别要使用手势识别器，我们只需创建相应手势识别器的实例，进行必要的配置，然后将其连接到一个事件处理程序，当手势被识别时，该事件处理程序将执行所需的操作。以下是检测 iPad 屏幕点击的具体步骤： **操作步骤**： 1. 使用 Xcode 创建一个新的基于视图的应用项目，并将其命名为 Gestures。 2. 将名为 architecture.jpg 的图像拖放到 Xcode 项目的 Resources 文件夹中。当出现“添加”对话框时，勾选“如果需要，将项目复制到目标组的文件夹中”选项，确保图像被复制到项目中。 3. 双击 Resources 文件夹中的 GesturesViewController.xib 文件，在 Interface Builder 中进行编辑。 4. 从库中添加一个 ImageView 到视图窗口。 5. 选择 ImageView，查看其属性检查器窗口（工具 -> 属性检查器），并设置以下属性： - Image：architecture.jpg - Mode：Aspect Fit - 勾选“User Interaction Enabled”选项 - 勾选“Multiple Touch”选项 6. 在 Interface Builder 中保存文件。 7. 返回 Xcode，编辑 GesturesViewController.h 文件，添加以下代码： ```objc #import <UIKit/UIKit.h> @interface GesturesViewController : UIViewController { IBOutlet UIImageView *imageView; } @property (nonatomic, retain) UIImageView *imageView; @end ``` 8. 在 Interface Builder 中，通过按住 Control 键点击并拖动“File’s Owner”项到 ImageView，选择 imageView，将 imageView 输出口连接到 ImageView。 9. 在 Xcode 中，编辑 GesturesViewController.m 文件，添加以下代码： ```objc #import “GesturesViewController.h” @implementation GesturesViewController @synthesize imageView; - (void)viewDidLoad { //---tap gesture--- UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)]; tapGesture.numberOfTapsRequired = 2; [imageView addGestureRecognizer:tapGesture]; [tapGesture release]; [super viewDidLoad]; } //---handle tap gesture--- -(IBAction) handleTapGesture:(UIGestureRecognizer *) sender { if (sender.view.contentMode == UIViewContentModeScaleAspectFit) sender.view.contentMode = UIViewContentModeCenter; else sender.view.contentMode = UIViewContentModeScaleAspectFit; } - (void)dealloc { [imageView release]; [super dealloc]; } ``` 10. 按下 Command - R 在 iPhone 模拟器中测试应用。 11. 在 iPhone 模拟器中，当你双击图像（在真实设备上为双击操作）时，图像会放大；再次双击，图像会恢复到原始大小。 **原理分析**：为了检测视图上的点击操作，我们首先创建了一个 UITapGestureRecognizer 类的实例： ```objc UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)]; ``` 这里，我们将当前视图控制器（self）设置为手势识别器的目标，意味着当手势被检测到时，所有相关消息将由当前视图控制器处理。`action:` 参数指定了一个选择器，用于标识处理识别手势的方法名。为了识别双击操作，我们将 `numberOfTapsRequired` 属性设置为 2： ```objc tapGesture.numberOfTapsRequired = 2; ``` 然后，将手势识别器附加到视图（这里是 imageView）上，通过调用 `addGestureRecognizer:` 方法： ```objc [imageView addGestureRecognizer:tapGesture]; ``` 最后，释放 tapGesture 识别器对象： ```objc [tapGesture release]; ``` 当应用检测到双击操作时，`handleTapGesture:` 方法将被调用： ```objc //---handle tap gesture--- -(IBAction) handleTapGesture:(UIGestureRecognizer *) sender { if (sender.view.contentMode == UIViewContentModeScaleAspectFit) sender.view.contentMode = UIViewContentModeCenter; else sender.view.contentMode = UIViewContentModeScaleAspectFit; } ``` 在 `handleTapGesture:` 方法中，我们可以通过 `sender.view` 对象引用识别手势的视图（这里是 imageView）。这个方法很实用，因为可能有多个视图连接到同一个手势处理程序，`sender.view` 会自动引用识别到手势的视图。在这个手势处理程序中，我们在 UIViewContentModeScaleAspectFit 和 UIViewContentModeCenter 模式之间切换图像的显示模式。 #### 4. 离散手势和连续手势手势主要分为两种类型：离散手势和连续手势。离散手势在被识别时，会向目标发送一条消息。例如，当你双击视图且手势被检测到时，处理该手势的目标方法只会被调用一次。而连续手势则会在手势结束之前，不断向目标发送多条消息。比如捏合手势，当你将手指放在屏幕上并对视图进行捏合操作时，目标方法会被反复调用，直到你将手指从屏幕上移开。其中，UITapGestureRecognizer、UISwipeGestureRecognizer 和 UILongPressGestureRecognizer 属于离散手势识别器；UIPinchGestureRecognizer、UIPanGestureRecognizer 和 UIRotationGestureRecognizer 属于连续手势识别器。 #### 5. 捏合手势的识别捏合手势在 iPad（以及 iPhone 和 iPod touch）上非常流行。在捏合手势中，你将两根手指放在屏幕上，然后将它们分开或靠拢，以此来表示放大或缩小视图的意图。以下是在应用中识别捏合手势以改变 ImageView 大小的具体步骤： **操作步骤**： 1. 使用之前创建的项目，编辑 GesturesViewController.m 文件，添加以下代码： ```objc #import “GesturesViewController.h” @implementation GesturesViewController @synthesize imageView; CGFloat lastScaleFactor = 1; - (void)viewDidLoad { //---tap gesture--- UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)]; tapGesture.numberOfTapsRequired = 2; [imageView addGestureRecognizer:tapGesture]; [tapGesture release]; //---pinch gesture--- UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)]; [imageView addGestureRecognizer:pinchGesture]; [pinchGesture release]; [super viewDidLoad]; } //---handle pinch gesture--- -(IBAction) handlePinchGesture:(UIGestureRecognizer *) sender { CGFloat factor = [(UIPinchGestureRecognizer *) sender scale]; if (factor > 1) { //---zooming in--- sender.view.transform = CGAffineTransformMakeScale( lastScaleFactor + (factor-1), lastScaleFactor + (factor-1)); } else { //---zooming out--- sender.view.transform = CGAffineTransformMakeScale( lastScaleFactor * factor, lastScaleFactor * factor); } if (sender.state == UIGestureRecognizerStateEnded){ if (factor > 1) { lastScaleFactor += (factor-1); } else { lastScaleFactor *= factor; } } } ``` 2. 按下 Command - R 在 iPhone 模拟器中测试应用。 3. 按下 Option 键，你可以模拟两根手指在屏幕上的触摸操作。此时，模拟器上会出现两个半透明的白色圆点。点击并拖动鼠标将它们分开，你会发现图像的大小会随着鼠标的移动而改变。 **原理分析**：和 UITapGestureRecognizer 一样，我们首先创建一个 UIPinchGestureRecognizer 的实例，并将其连接到一个手势处理程序： ```objc //---pinch gesture--- UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)]; [imageView addGestureRecognizer:pinchGesture]; [pinchGesture release]; ``` 当捏合手势被识别时，`handlePinchGesture:` 方法会被调用。由于捏合手势是连续手势，只要手指在屏幕上，`handlePinchGesture:` 方法就会被反复调用。为了判断这是“放大”还是“缩小”手势，我们检查 UIPinchGestureRecognizer 对象的 `scale` 属性： ```objc CGFloat factor = [(UIPinchGestureRecognizer *) sender scale]; ``` 如果手指分开，`scale` 的值为 1 或更大；如果手指靠拢，`scale` 的值小于 1。每次执行捏合手势时，应用需要记住缩放因子，以便下次执行手势时，能根据图像的最后绘制大小进行缩放。这一操作在捏合手势结束（手指从屏幕上移开）时完成。我们检查 `sender.state` 来判断手势是否结束，然后保存最后的缩放因子： ```objc if (sender.state == UIGestureRecognizerStateEnded){ if (factor > 1) { lastScaleFactor += (factor-1); } else { lastScaleFactor *= factor; } } ``` 最后，我们使用 `CGAffineTransformMakeScale()` 方法来改变 ImageView 的大小： ```objc if (factor > 1) { //---zooming in--- sender.view.transform = CGAffineTransformMakeScale( lastScaleFactor + (factor-1), lastScaleFactor + (factor-1)); } else { //---zooming out--- sender.view.transform = CGAffineTransformMakeScale( lastScaleFactor * factor, lastScaleFactor * factor); } ``` #### 6. 旋转手势的识别 iPhone SDK 3.2 还支持旋转手势。在旋转手势中，你将两根手指放在屏幕上，并以圆周方式旋转它们。以下是使用 UIRotationGestureRecognizer 类旋转 ImageView 的具体步骤： **操作步骤**： 1. 使用之前创建的项目，编辑 GesturesViewController.m 文件，添加以下代码： ```objc #import “GesturesViewController.h” @implementation GesturesViewController @synthesize imageView; CGFloat lastScaleFactor = 1; CGFloat netRotation; - (void)viewDidLoad { //---tap gesture--- UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)]; tapGesture.numberOfTapsRequired = 2; [self.imageView addGestureRecognizer:tapGesture]; [tapGesture release]; //---pinch gesture--- UIPinchGestureRecognizer *pinchGesture = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handlePinchGesture:)]; [imageView addGestureRecognizer:pinchGesture]; [pinchGesture release]; //---rotate gesture--- UIRotationGestureRecognizer *rotat ```