美文网首页学Swift挣美金iosios开源项目
学Swift挣美元UI篇之11 Gesture recogniz

学Swift挣美元UI篇之11 Gesture recogniz

作者: iCloudEnd | 来源:发表于2019-04-09 09:32 被阅读24次

    之前的文章主要介绍swift的语法,本篇将带领大家从UI层面学习iOS开发

    学Swift挣美元UI篇之Gesture recognizers 手势识别器

    手势识别器比触摸操作更为强大。手势识别器能够以更贴近人类操作屏幕内容。iOS基础框架的好处让我们无需编程或理解定义手势识别算法的复杂基础代码, 就可以在自己的应用里面检测和响应各种复杂的预定义手势。

    由于我们采用了苹果提供的标准的手势识别器(gesture recognizers),因此我们可以和微信、淘宝、京东等app拥有相同的体验。

    手势识别器

    实战

    下面,我们通过创建一个简单的图像查看器应用程序来探索手势的可能性。在此应用中, 您将平移、缩放和旋转图像, 或点击以查看下一张图像。

    代码下载

    请大家先下载一下初始代码
    https://github.com/wangdazhi/ImageViewer

    01 将文件拖拽入项目

    Image Views是用于现实存在项目中的图片控件。

    在我们项目中,可以看到一个images文件夹,直接将这个文件拖拽入项目中。具体操作可以参考下面视频:

    视频教程:如何将文件拖拽入项目

    02 添加Pan gesture recognizer

    (1) 从Object Library中拖拽Pan Gesture Recognizer到storeboard,然后拖着到image view上:参考视频
    视频教程之添加Pan Gesture Recognize

    (2)在平移手势识别器的 "属性检查器" 中, 将最大触点调整为2。您将创建一个响应平移手势的操作。


    Jietu20190409-100633@2x.jpg

    下面(3)至(6)的具体操作请看视频
    视频教程之手势3至7添加action

    (3)打开Assistant Editor


    Jietu20190409-100822@2x.jpg

    (4)按住control键,将pan gesture recognizer拖拽到view controller源码的viewDidLoad方法下面
    (5)修改action的名称为“handlePan”
    (6)修改Type为“UIPanGestuerRecognizer”
    (7)添加imageview 的outlet。handlePan函数可以响应用户移动手势,其中包含开始、更改、结束或是失败。
    视频教程之手势07添加iamgeview的outlet

    (8)声明一个坐标转换器translation

    let translation = sender.translation(in: self.view)
    
    Jietu20190409-103702@2x.jpg

    (9)可以将此 x, y 坐标添加到图像视图的当前位置以移动图像。使用 view 的中心属性设置图像视图的当前位置:

     imageView.center = CGPoint(
        x:imageView.center.x + translation.x,
        y:imageView.center.y + translation.y
      )
    
    Jietu20190409-104121@2x.jpg

    (10)重置手势识别器

    sender.setTranslation(CGPoint.zero, in: self.view)
    
    Jietu20190409-104638@2x.jpg

    (11)给imageview设置一张图片


    Jietu20190409-104901@2x.jpg

    相关文章

      网友评论

        本文标题:学Swift挣美元UI篇之11 Gesture recogniz

        本文链接:https://www.haomeiwen.com/subject/bouviqtx.html