在Swift程序中实现手势识别的方法

在这次IOS应用开发教程中,我们打算实现手势识别。正如你所知道的,IOS支持大量的手势操作,它们能提供了很好的应用控制和出色用户体验。
让我们开始吧!

首先需要在Xcode中创建一个新的Single View Application:

然后点击Next,弹出的窗口要求你填写项目设置。在第一栏 (“Product name”) 中填入项目名称后,点击Next.

确保语言选择的是 “Swift”.

设计界面

点击 “Main.storyboard” 文件,拖出6个 UIViews放到视图中.把视图排列成如图所示的样子.当你排列UIViews时,在每个view下面添加一个UILabel并依图设定文本值。

我们开始写代码吧.

是时候编辑实现文件了 (在我们的案例 “ViewController.swift” ).

为了声明一些我们将会用到的变量,要在 “class ViewController: UIViewController “块中添加如下代码.

代码如下:

class ViewController: UIViewController {
    @IBOutlet var tapView: UIView
    @IBOutlet var swipeView: UIView
    @IBOutlet var longPressView: UIView
    @IBOutlet var pinchView: UIView
    @IBOutlet var rotateView: UIView
    @IBOutlet var panView: UIView
    var lastRotation = CGFloat()
    let tapRec = UITapGestureRecognizer()
    let pinchRec = UIPinchGestureRecognizer()
    let swipeRec = UISwipeGestureRecognizer()
    let longPressRec = UILongPressGestureRecognizer()
    let rotateRec = UIRotationGestureRecognizer()
    let panRec = UIPanGestureRecognizer()
}

在第2 – 7行,我们声明了在之前界面里排列过的 UIViews.

在第8行,我们声明了实现旋转手势要用到的变量(lastRotation).

在第 9 – 14行,我们为每个view声明了一个手势识别对象.

注意: 在 Swift中,我们用let关键字声明常量,这意味着它的值在程序运行时不可改变。关键字var则声明普通变量。

当声明完应用需要的主要变量后,在viewDidLoad 方法中添加如下代码.

代码如下:

override func viewDidLoad() {
    super.viewDidLoad()
    tapRec.addTarget(self, action: "tappedView")
    pinchRec.addTarget(self, action: "pinchedView:")
    swipeRec.addTarget(self, action: "swipedView")
    longPressRec.addTarget(self, action: "longPressedView")
    rotateRec.addTarget(self, action: "rotatedView:")
    panRec.addTarget(self, action: "draggedView:")
    tapView.addGestureRecognizer(tapRec)
    swipeView.addGestureRecognizer(swipeRec)
    pinchView.addGestureRecognizer(pinchRec)
    longPressView.addGestureRecognizer(longPressRec)
    rotateView.addGestureRecognizer(rotateRec)
    panView.addGestureRecognizer(panRec)
    rotateView.userInteractionEnabled = true
    rotateView.multipleTouchEnabled = true
    pinchView.userInteractionEnabled = true
    pinchView.multipleTouchEnabled = true
    tapView.userInteractionEnabled = true
    swipeView.userInteractionEnabled = true
    longPressView.userInteractionEnabled = true
    panView.userInteractionEnabled = true
}

第 3 – 8行,为每个视图设定手势识别的目标。所谓的目标,就是每个view中的手势完成后要调用的方法。

第 9 -14行,把手势识别添加到视图中.

第15 – 22行,把每个视图的 userInteractionEnabled 属性设为ture,并把拥有需要多点触控(rotateView and pinchView)的手势所在的视图的multipleTouchEnabled 属性设为true.

现在,我们编写每个手势识别器要调用的方法 (第3 – 8行设置的目标方法 ).

添加如下代码:

代码如下:

func tappedView(){
    let tapAlert = UIAlertController(title: "Tapped", message: "You just tapped the tap view", preferredStyle: UIAlertControllerStyle.Alert)
    tapAlert.addAction(UIAlertAction(title: "OK", style: .Destructive, handler: nil))
    self.presentViewController(tapAlert, animated: true, completion: nil)
}
 
func swipedView(){
    let tapAlert = UIAlertController(title: "Swiped", message: "You just swiped the swipe view", preferredStyle: UIAlertControllerStyle.Alert)
    tapAlert.addAction(UIAlertAction(title: "OK", style: .Destructive, handler: nil))
    self.presentViewController(tapAlert, animated: true, completion: nil)
}
 
func longPressedView(){
    let tapAlert = UIAlertController(title: "Long Pressed", message: "You just long pressed the long press view", preferredStyle: UIAlertControllerStyle.Alert)
    tapAlert.addAction(UIAlertAction(title: "OK", style: .Destructive, handler: nil))
    self.presentViewController(tapAlert, animated: true, completion: nil)
}

这三种方法都很好地完成同一件事.每次在手势在相应的视图中完成后,每种方法都弹出一个对话框.

所以 tappedView() 方法在用户滑动视图时弹出一个对话框,swipedView() 方法在用户触摸滑动 swipe视图时弹出对话框,而longPressedView() 方法则在用户长按long press view时弹出对话框.

另两种手势 (rotate and pinch ) 的代码稍微有点复杂.

为旋转手势添加如下代码:

代码如下:

func rotatedView(sender:UIRotationGestureRecognizer){
    var lastRotation = CGFloat()
    self.view.bringSubviewToFront(rotateView)
    if(sender.state == UIGestureRecognizerState.Ended){
    lastRotation = 0.0;
    }
    rotation = 0.0 - (lastRotation - sender.rotation)
    var point = rotateRec.locationInView(rotateView)
    var currentTrans = sender.view.transform
    var newTrans = CGAffineTransformRotate(currentTrans, rotation)
    sender.view.transform = newTrans
    lastRotation = sender.rotation
}

这个方法包含 sender:UIRotationGestureRecognizer 参数. sender 参数( UIRotationGestureRecognizer 类型) 含有这个方法(在这个案例中是rotateRec)调用的手势识别器的值.

第2行声明了 lastRotation.

第3行我们把 rotateView放到前面.

接下来,在 if语句中,我们检查手势是否完成,如果没有完成,我们就将视图旋转。

第 8 – 10行,我们计算rotate view的旋转程度,第10行,我们设置rotate view的旋转程度。

On line 12 we set the lastRotation 作为旋转手势识别器的当前旋转.

现在我们添加pinch 手势的代码:

代码如下:

func pinchedView(sender:UIPinchGestureRecognizer){
    self.view.bringSubviewToFront(pinchView)
    sender.view.transform = CGAffineTransformScale(sender.view.transform, sender.scale, sender.scale)
    sender.scale = 1.0
}

在之前方法的第1行中,我们把pinch视图放到了顶端。然后设置每个pinch视图的transform,并把pinchRec的scale设为1.

然后是实现 pan (drag) 手势. 添加如下代码:

代码如下:

func draggedView(sender:UIPanGestureRecognizer){
    self.view.bringSubviewToFront(sender.view)
    var translation = sender.translationInView(self.view)
    sender.view.center = CGPointMake(sender.view.center.x + translation.x, sender.view.center.y + translation.y)
    sender.setTranslation(CGPointZero, inView: self.view)
}

第2行,我们把 drag视图放到顶端 (和前面的方法一样).

然后我们声明变量translation,并用 sender.translationInView(self.view)的值给它赋值。 完成后,把sender.view object (panRec) 的center属性设为计算出来的新center  ( 通过CGPointMake(sender.view.center.x + translation.x, sender.view.center.y + translation.y) 计算) 并把translation 设为 sender (panRec).

现在,代码部分算是完成了!

回到界面设计.

现在我们回到 “Main.storyboard” 文件. 选择视图控制器并把声明的每个UIView连接到相应的视图,如下图所示.

完工

现在你可以在模拟器或你的设备上运行该应用并测试手势。
后记

我希望这篇教程对你有所帮助。你可以在下载完整源代码

(0)

相关推荐

  • Swift NavigationBar隐藏后的右滑手势效果

    需求 我们在开发中经常遇见这样的需求,就是A视图没有导航,pushB视图后导航栏.然后要求可以使用iOS的系统侧滑返回功能.类似如下的功能: 问题 在处理这个需求的时候,我们一般会遇到两个问题: 右滑返回手势 ios开发中,使用push视图,系统是有默认的侧滑返回上个视图的功能.但是当我们自定义导航栏时,这个手势的事件就没有再触发,此时只要我们重新将代理设置为controller即可. 代码示例: 在BaseViewController中添加如下的代码 //开启 push视图 右滑手势() fi

  • 使用Swift代码实现iOS手势解锁、指纹解锁实例详解

    一.手势密码 1. 1.1.用UIButton组成手势的节点. 1.2.当手指接触屏幕时,调用重写的 touchesBegan:withEvent方法(在touchesBegan里调用setNeedsDisplay,这样就会自动调用drawRect方法). 1.3.当手指在屏幕上滑动时,调用重写的touchesEnded:withEvent方法. 这两个方法执行的操作是一样的:通过locationInView获取 触摸的坐标,然后用 CGRectContainsPoint 判断手指是否经过UIB

  • Swift在控件中添加点击手势的方法

    今天有同行问我,如何在tableview的headerview中添加点击方法,今天就来简简单单说明一下,在swift中添加点击手势的方法是: 复制代码 代码如下: imagepath.addGestureRecognizer(UITapGestureRecognizer(target: self, action: "imagePathClick:")) 怎么样,看上去是不是比oc简单多了呢,简单解释一下,imagePath是我定义的一个UIImageView,可能有人添加了这个手势之后

  • Swift中实现点击、双击、捏、旋转、拖动、划动、长按手势的类和方法介绍

    1.UITapGestureRecognizer 点击/双击手势 复制代码 代码如下: var tapGesture = UITapGestureRecognizer(target: self, action: "handleTapGesture:")  //设置手势点击数,双击:点2下  tapGesture.numberOfTapsRequired = 2  self.view.addGestureRecognizer(tapGesture) 2.UIPinchGestureRec

  • IOS 开发之swift中手势的实例详解

    IOS 开发之swift中手势的实例详解 手势操作主要包括如下几类 手势 属性 说明 点击 UITapGestureRecognizer numberOfTapsRequired:点击的次数:numberOfTouchesRequired:点击时有手指数量 设置属性 numberOfTapsRequired 可以实现单击,或双击的效果 滑动 UISwipeGestureRecognizer direction:滑动方向 direction 滑动方向分为上Up.下Down.左Left.右Right

  • 在Swift程序中实现手势识别的方法

    在这次IOS应用开发教程中,我们打算实现手势识别.正如你所知道的,IOS支持大量的手势操作,它们能提供了很好的应用控制和出色用户体验. 让我们开始吧! 首先需要在Xcode中创建一个新的Single View Application: 然后点击Next,弹出的窗口要求你填写项目设置.在第一栏 ("Product name") 中填入项目名称后,点击Next. 确保语言选择的是 "Swift". 设计界面 点击 "Main.storyboard"

  • 微信小程序中setInterval的使用方法

    微信小程序中setInterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦.(本来想传gif的来着,后来发现不会传,就传个图片吧,想看的自己下载下来玩呦) 先上图,后上代码了: js: var winWidth = 0 var winHeight = 0 var diameter = 10 var time = 0 Page({ data:{ numX:1, numY:1 }, x

  • uniapp在微信小程序中使用ECharts的方法

    今天使用uniapp集成Echarts,实现地图图表的展示 可以参照mpvue-echarts 参照:https://github.com/F-loat/mpvue-echarts https://ask.dcloud.net.cn/article/36288 进行改进 网上有很多教程,但都说的不是很明白,下面直接上步骤 1.npm install echarts mpvue-echarts 执行该命令后,会在node_modules下生成mpvue-echarts.echarts,然后把mpv

  • 微信小程序中转义字符的处理方法

    在微信小程序开发过程中,有时候会用到常用的一些特殊字符如:'<'.'>'.'&'.'空格'等,微信小程序同样支持对转义字符的处理,下面提供两种方法用来处理微信小程序中转义字符的处理. 1.官方API调用 这种方式,我们直接在wxml布局文件中,直接调用相关特殊符号的转义字符会无效,原因是小程序的text文本控件的decode属性没有打开导致的,看下文档说明: 从文档中,我们可以发现,decode属性默认为false,不会解析我们的特殊字符,我们通过设置decode属性为true,并且调

  • 在微信小程序中使用vant的方法

    在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S --production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令 npm init 初始化 npm install

  • Swift编程中数组的使用方法指南

    Swift 数组用于存储相同类型的值的顺序列表.Swift 要严格检查,它不允许错误地在数组中存放了错误的类型. 如果赋值创建数组到一个变量,它总是可变的,这意味着可以通过添加元素来改变它, 删除或更改其项目,但如果分配一个数组常量到则该数组,则数组是不可被改变的, 也就它的大小和内容不能被改变. 创建数组 可以使用下面的初始化程序语法来创建某种类型的空数组: 复制代码 代码如下: var someArray = [SomeType]() 下面是创建一个给定的大小,并用初始值的数组的语法: 复制

  • 简单讲解Go程序中使用MySQL的方法

    go官方仅提供了database package,database package下有两个包sql,sql/driver.这两个包用来定义操作数据库的接口,这就保证了无论使用哪种数据库,他们的操作方式都是相同的. 但go官方并没有提供连接数据库的driver,如果要操作数据库,还需要第三方的driver 包,幸好,主流的数据库的driver都已经有了:https://code.google.com/p/go-wiki/wiki/SQLDrivers 其中,mysql有两个包,一个是mymysql

  • C++程序中启动线程的方法

    C++11 引入一个全新的线程库,包含启动和管理线程的工具,提供了同步(互斥.锁和原子变量)的方法,我将试图为你介绍这个全新的线程库. 如果你要编译本文中的代码,你至少需要一个支持 C++11 的编译器,我使用的是 GCC 4.6.1,需要使用 -c++0x 或者 -c++11 参数来启用 C++11 的支持. 启动线程 在 C++11 中启动一个线程是非常简单的,你可以使用 std:thread 来创建一个线程实例,创建完会自动启动,只需要给它传递一个要执行函数的指针即可,请看下面这个 Hel

  • 小程序中canvas的drawImage方法参数使用详解

    最近在开发小程序,海报生成的过程中,要在carvas中不断去添加图片,对小程序的drawImage参数不是很明确,这次解惑. 示例代码 有三个版本的写法: drawImage(imageResource, dx, dy) drawImage(imageResource, dx, dy, dWidth, dHeight) drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 从 1.9.0 起支持 co

  • 在小程序中使用canvas的方法示例

    一直没有怎么使用过canvas,小程序也是之前看过一个视频而已,想要找个例子结合一下两者.所以一个小小的保存图片作为朋友圈相册封面的demo就这么出现了,在这里主要记录一下自己遇到的一些问题以及解决的办法. 截图: 效果图/制作页面/颜色选择 主要是以下几个问题: 1.颜色选择器 2.页面通信 3.组件间通信 4.canvas(生成图片.预览/保存.文字换行) 1.颜色选择器 从小程序的文档中没有找到相应的颜色选择组件,昨天(18.3.13)小程序插件功能上线了,小伙伴们也可以选择插件.写这个d

随机推荐