使用Swift在iOS应用程序中使用手势识别器
yangliu 2018-04-23
如果您曾经使用过iOS设备，那么无论您是否了解它，都会多次使用手势识别功能。从双击或缩放以放大图片，向左或向右滑动以更改Snapchat和Instagram上的场景，所有这些操作均由手势识别器完成。在本次分享中，我们将在iOS中探索一些手势识别器，让您了解它们是什么以及如何使用它们。
我是iOS开发人员，打算深入了解这个行业的朋友，可以关注我或私信给我 。
iOS学习交流群：638302184，群里有系统学习教程和学习路线以及详细的规划，希望帮助开发者少走弯路。
在开始之前，我们来创建一个新的Single View Application Xcode项目。
我会命名应用程序'Gesturify'。你可以任意命名。为了本次分享的目的，您可以在组织名称和组织标识符字段中添加任何内容。
确保语言设置为Swift。
点击"下一步"，然后继续并在任何地方保存应用程序。我将把它保存在我的桌面上。
现在我们准备好了！
点击Main.storyboard。这是我们将非常简单的用户界面放置的地方。在右下角，点击'Object Library'图标。我们需要一个图像视图。
单击并将图像视图拖到视图控制器上。将它放在视图控制器的中间并拖动它的边缘直到它们碰到视图控制器的边缘。
现在，我们想要添加一个实际的图像到我们的图像视图。为此，我们需要将图像添加到我们的资产目录。你可以使用任何你想要的图像。
接下来，返回到Main.storyboard并单击图像视图。单击属性检查器，然后单击图像字段上的下拉图标，然后选择您添加的照片的名称。
你的照片应自动显示在图像视图中。要启用图像视图以响应触摸和手势，请启用交互。
接下来，我们添加一些手势识别器到我们的应用程序。转到对象库并搜索手势。你会看到有相当多的手势识别器。
因此，请继续，拖动Tap Gesture Recognizer并将其放在Image View上。它应该出现在"文档大纲"的"退出"下。（关于如何隐藏/显示文档轮廓，请在下一张后查看图片。）对于滑动手势识别器，旋转手势识别器和捏手势识别器，请执行同样的操作。
如果您使用CMD + R构建并运行您的应用程序，那么您将拥有一张坐在其中间的图片的应用程序。如果你问我，很无聊。键入CMD +。（点）停止应用程序运行。
点击Assistant Editor图标显示ViewController.swift文件。您可以隐藏文档大纲以提供更多空间。
现在是时候将我们的图像视图和手势识别器连接到代码。通过按住控制键并单击并从图像视图拖动到上面的代码来完成此操作viewDidLoad()。将其命名为图像并单击连接。
点击手势识别器
对于手势识别器，事情有点不同。首先，我们要将Tap Gesture识别器连接到我们的代码。
从文档大纲，按住控制，单击，从敲击手势识别器拖动到代码，只需之下或之上IBOutlet中的图片浏览。将它命名为tapGesture。点击连接。
你应该有这样的东西：
通过这样做，您创建了两个直接链接到UI元素的变量。对于我们的姿态来说，这还不够。我们需要行为。
要做到这一点，控制+再次从Tap Gesture Recognizer中拖拽（连接到代码后名称已更改）。这一次，请不要点击"连接"。我们想做一个IBAction，而不是一个插座。将"连接"更改为操作。点击'连接'，你应该在ViewController.swift中有一个新的IBAction函数。
我们想要做的事情，前进，是通过双击增加1.5倍的图像尺寸，并通过再次双击重新恢复到正常尺寸。
首先，我们要确保我们的Tap Gesture Recognizer响应需要两次敲击（默认值为1）。为此，请转到ViewDidLoad并输入以下代码行：tapGesture.numberOfTapsRequired = 2
接下来，我们将创建两个函数来处理双击图片的缩放。继续并复制以下两个函数，并将它们粘贴到viewDidLoad下。您可以删除该didReceiveMemoryWarning功能 - 我们不需要它。
func scaleImageUp() {
image.frame = CGRect(x: 0,
y: view.bounds.size.height / 2 - (image.frame.size.height * 1.5) / 2,
width: image.frame.size.width * 1.5,
height: image.frame.size.height * 1.5)
}
func normalizeImage() {
let imageHeight = image.frame.size.height / 1.5
let imageWidth = image.frame.size.width / 1.5
image.frame = CGRect(x: 0,
y: view.bounds.size.height / 2 - imageHeight / 2,
width: imageWidth,
height: imageHeight)
}
根据苹果公司的文件，CGRect是
包含矩形的位置和尺寸的结构。
图像视图具有框架属性，这是图像的框架。我们可以使用CGRect通过改变它的x和y位置及其宽度和高度来改变图像的大小。改变宽度，高度和x属性非常简单。唯一可能看起来很复杂的是y属性的设置方式。
在normalizeImage，我们要确保图像正好位于视图的中间。我们把整个视图的高度view.bounds.size.height（比如说是100）分成两部分（这给了我们50）。
如果图片的高度为50，我们从50开始，这意味着它只占用视图的下半部分。我们不希望这样。我们想要的是让它坐在中间，所以它在上面和下面留下了一个空间。我们通过从视图高度的一半（50 - 25）减去图像高度的一半来实现此目的。现在，我们的形象从25开始。
类似的事情是在做scaleImageUp。唯一的区别是我们必须考虑到我们的图像现在是其高度1.5倍的事实。由于我们将通过双击来扩大或缩小，因此我们需要一种方法来了解何时放大或缩小，或者每次双击时我们都会放大。为此，请在IBAction上方创建一个新变量：var imageZoomed = false
将以下代码复制并粘贴到IBAction函数中：
if (!imageZoomed) {
scaleImageUp()
imageZoomed = true
} else {
normalizeImage()
imageZoomed = false
}
处理缩放的另一种方法是使用图像的transform属性。该属性允许您通过操纵其大小，位置和旋转来变换图像。使用变换，我们的功能变为：
func scaleImageUp() {
image.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
imageZoomed = true
}
func normalizeImage() {
image.transform = CGAffineTransform.identity
imageZoomed = false
}
CGAffineTransform.identity 是默认的转换并将图像重置为其原始位置。
运行应用程序。您应该可以双击来放大或标准化图像。
捏手势识别器
现在是时候添加一些捏手势识别器魔术。
使用捏手势识别器与您的手势识别器做一个IBAction。将其命名为pinchImage。这次，请确保'Type'已设置为UIPinchGestureRecognizer，然后再单击'connect'。将以下代码复制并粘贴到新创建的IBAction中：
if let imageView = sender.view {
imageView.transform = imageView.transform.scaledBy(x: sender.scale, y: sender.scale)
sender.scale = 1
}
在这里，您通过定位捏手势识别器的视图来访问图像（请记住，我们将它放在图像上），并根据手指的移动使用imageView的transform属性来缩放它。
假设图像的大小为20 - 决定如何增加或减少图像的大小，我们将目标缩小手势的缩放属性。
默认值是1。如果您开始用手指捏合并开始分离它们，则缩放比例会增加。让我们说到1.2，我们的图像现在是20 * 1.2（24）。如果你从24开始并且规模为1.5，那么你有24 * 1.5（36）。每次捏时，图片的大小都在不断增加。
如果您将手指放大并开始将其拉近，则会发生相反的情况。如果你从20开始，你会得到类似20 * 0.9（18）等等的东西。由于默认值是1，所以每次夹点停止时我们重置它，所以我们不会连续减少或增加图像。您可以通过将1更改为1.2或0.9来进行测试。一旦你开始，你不会停下来。疯！
如果您在模拟器中运行应用程序，可以通过按住alt /选项，单击图像并向上或向下移动来使用捏合手势。
旋转手势识别器。
创建一个IBAction，就像您为Pinch Gesture Recognizer创建一个IBAction一样。不要忘记这次从旋转手势识别器拖动。 命名IBAction rotateImage。
将以下内容复制并粘贴到IBAction函数的主体中：
if let imageView = sender.view {
imageView.transform = imageView.transform.rotated(by: sender.rotation)
sender.rotation = 0
}
对此的解释与Pinch手势识别器相似。默认旋转角度为0.它在旋转图片时会不断变化（顺时针方向为+（正向），逆时针方向为 - （负向））。因为我们不希望图片在每次旋转时都保持旋转，所以我们将旋转重置为默认值。
使用替代手势的方式使用替代/选项。
滑动手势识别器
我们现在想要做的是通过向左滑动来使图像向右和向后滑动到右边。您添加的每个滑动手势识别器都可以使用属性检查器中的指示进行配置。
通过滑动手势识别器制作IBAction。命名它swipeRight。 您可以将此手势识别器重命名为"正确滑动手势识别器"以区分它。通过点击并点击"输入"来实现。
因为每个滑动手势识别器都有一个方向，所以我们必须添加另一个方向，因为我们还需要能够向左滑动。从对象库中，将滑动手势识别器拖放到图像上。从属性检查器中，将其滑动方向从右侧更改为左侧。你也可以重命名这个。创建一个IBAction并命名它swipeLeft。让我们转移东西。
将以下代码放入swipeRight：
image.transform = CGAffineTransform(translationX: 30, y: 0)
swipeLeft：
image.transform = CGAffineTransform(translationX: 0, y: 0)
向左向右滑动，向右滑动30点，向左滑动30点。
好的，我可以同时旋转和捏合吗？
用我们现在所拥有的，一次只能有一个手势发生。即使你想同时捏和旋转，你也不能。为了做到这一点，我们必须重写UIGestureRecognizerDelegate协议中的一个函数。
在ViewController课堂申报的时候，你有class ViewController: UIViewController {- 用它来代替它class ViewController: UIViewController, UIGestureRecognizerDelegate {。要查看此协议，请按住CMD并点击它。
我们正在实现的功能是这样的：
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
将其复制并粘贴到课程的正文中。接下来就是将每个手势识别器的代表插座连接到视图控制器。通过按住Ctrl键，单击并从手势识别器拖到View Controller以此方式执行此操作：
点击代表。
您现在应该可以执行多个手势。
结论
我希望这足以让你在iOS应用程序中使用手势识别器感到舒适。手势是iOS应用程序非常重要的组成部分，您应该可以
在自己的应用程序中实现它们。本教程并非详尽无遗 - 只是为了介绍该主题。还有一些其他内容没有涉及：例如，您
可以实现自己的自定义手势识别器。
您可能还想知道为什么在放大或缩小照片后无法滚动显示或滚动照片。这可以使用滚动视图来完成。我将在下一篇教程
中介绍滚动视图。敬请关注。在此之前，不要走开！
