iOSプログラミング with Swift 2

2016.07.13: created by

Swiftで Tap Gesture を扱う

ジェスチャを扱うプログラムを考えます。 ここでは最も簡単なタップを扱うプログラムを作成してみます。

  1. Xcode を起動して "Create a new Xcode project" で "Single View Application" として新しいプロジェクトを開きます。 ここではプロジェクト名を SwiftGestureTap としています。



  2. Main.storyboard 上の ViewController 上に ImageViewを配置します。



    3. ImageViewはデフォルトではジェスチャを認識しないように設定されていますので、 ジェスチャを認識するように変更します。




  3. さらに、配置した ImageView の上に Tap Gesture Recognizer を配置します。 ViewControllerの上部に Tap Gesture Recognizer のアイコン が表示されたら正しく追加されています。



  4. Storyboard上の ViewController 上の ImageView を、 ViewController.swift 中に IBOutlet で myImage変数にconnectします。






  5. Storyboard上の Tap Gesture Recognizerを、 ViewController.swift 中に Action で tapImageView関数にconnectします。 関数の引数の型である Type: の値を UITapGestureRecognizer にすることを忘れないように注意しましょう。









  6. ViewController.swift を変更します。

    7. プログラムの中で、posがImageViewの中でのタップ位置、 gposが画面全体の中でのタップ位置となります。

    タップした場所(ImageViewの位置pos)に、10x10の赤い4角形を書くようにします。

    ViewController.swiftに追加するコード(赤字部分)
    import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myImageView: UIImageView!
    @IBAction func tapImageView(sender: UITapGestureRecognizer) {
        let gpos = sender.locationInView(self.view)
        let pos = sender.locationInView(myImageView)
        print("gpos = \(gpos)")
        print("pos = \(pos)")
        myImageView.image = makeUIImage(myImageView.image, pos)
    }
    
    func makeUIImage(image: UIImage?, _ pos:CGPoint) -> UIImage {
        let sz:CGSize = myImageView.frame.size
        UIGraphicsBeginImageContext(sz)
        let context: CGContextRef = UIGraphicsGetCurrentContext()!
        if image != nil {
            image!.drawInRect(CGRectMake(0,0,image!.size.width,image!.size.height))
        }
        CGContextSetLineWidth(context, 4.0)
        CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0)
        CGContextAddRect(context, CGRectMake(pos.x-5,pos.y-5,10,10))
        CGContextStrokePath(context)
        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return img
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}
  7. プログラムを実行します。

    8. ImageViewの上をタップすると、タップした場所を中心に10x10の赤い枠が表示されます。




  8. サンプルのプロジェクトはこちら。(Xcode 7.3.1版)

http://karel.tsuda.ac.jp