GestureRecognizerを使ってみよう

株式会社デコレーションカンパニー 徳弘佑衣

自己紹介• 株式会社デコレーションカンパニー代表

• ここCoEdoのスタッフです

• オリジナルのiPhoneケースが作れるアプリ「DesigningCase」運営

• iOS開発歴４年

• Swiftは苦手です

DesigningCase紹介

実際の動きを見てください( ✧Д✧)

デザイン　ケース で検索！

今日やること• このアプリの中心になっているタッチで、移動＆拡大・縮小＆回転を紹介します！

サンプルを見てみよう

GestureRecognizerとは？

タッチイベントがいろいろできる！ 例えば・・・ UITapGestureRecognizer タップ時のイベント UIPinchGestureRecognizer ピンチ時のイベント UIRotationGestureRecognizer 回転した時のイベント UISwipeGestureRecognizer スワイプした時のイベント UIPanGestureRecognizer パンした時のイベント UILongPressGestureRecognizer 長押しした際のイベント

実は簡単３ステップ①gestureの箱を作ります

②addGestureRecognizerを追加

③actionを描きましょう

以上♡

①gestureの箱を作りますoverride func viewDidLoad() { super.viewDidLoad() // ピンチ let myPinchGesture = UIPinchGestureRecognizer(target: self, action: "pinchGesture:") // 回転 let myRotate = UIRotationGestureRecognizer(target: self, action: “rotateGesture:") // パン（ドラック） let myPan = UIPanGestureRecognizer(target: self, action: "panGesture:")

}

②addGestureRecognizerを追加

override func viewDidLoad() { super.viewDidLoad()

~省略~ self.image.addGestureRecognizer(myPinchGesture) self.image.addGestureRecognizer(myPan) self.image.addGestureRecognizer(myRotate)

}

*imageは、storyboardで配置したUIImageViewを 関連付けしたもの

③actionを描きましょう ～拡大・縮小と回転～

//ピンチイベント(拡大・縮小) func pinchGesture(sender: UIPinchGestureRecognizer){ //imageviewのsetAffineTransformにscaleを渡す image.layer.setAffineTransform(CGAffineTransformMakeScale(sender.scale,sender.scale)) }

//ローテート（回転） func rotateGesture(sender:UIRotationGestureRecognizer{ //imageviewのsetAffineTransformにrotationを渡す image.layer.setAffineTransform(CGAffineTransformMakeRotation(sender.rotation)) }

③actionを描きましょう ～移動～　　　　　　　

//パン(移動） func panGesture(sender: UIPanGestureRecognizer){ //距離を取得 let p = sender.translationInView(self.view) //移動した距離だけ、UIImageViewのcenterポジションを移動させる let movedPoint = CGPointMake(image.center.x + p.x, image.center.y + p.y) //imageに渡す image.center = movedPoint //translationInViewが返す距離は、ドラッグが始まってからの蓄積値となるため、今回の場合は、蓄積値をゼロにする sender.setTranslation(CGPointZero, inView: self.view);

}

注意UIImageViewのUser　Interaction Enabledにチェックを入れる！

今日のコード

https://github.com/TokuhiroYui/GuruGuru

ありがとうございました∩( ✧Д✧)∩