[Swift]「ジェスチャー」

ジェスチャーの基本概念について解説します。タップロングプレスの実装方法と応用例、さらにスワイプピンチの基本動作と実践的な使い方にも焦点を当てます。また、UIButtonUIViewでのタップジェスチャーの具体的な実装方法も紹介します。初心者の方でもわかりやすく、手軽にタッチジェスチャーを実践できるようになっています

目次

ジェスチャーとは?

ジェスチャーとは、ユーザーのタッチ操作に応じてアプリが反応するインタラクションのことです。

つまり、ユーザーが画面をタップしたり、スワイプしたり、指をピンチしたりする動作に対して、アプリが対応するという仕組みです。

ジェスチャー使用方法
タップ
画面を短くタップする
UIButtonUIViewにタップジェスチャーを追加
ボタンをタップしてアクションを実行させる
ロングプレス
画面を長くタップする
UILongPressGestureRecognizerを使用
ロングプレスでメニュー表示やコンテンツの削除を行う
スワイプ
画面を指で滑らせる
UISwipeGestureRecognizerを使用
右スワイプで次の画面に遷移する
ピンチ
2本の指で拡大縮小する
UIPinchGestureRecognizerを使用
地図のズームイン・ズームアウトや画像の拡大縮小
タップ、ロングプレス、スワイプ、ピンチジェスチャーの対比表

タップの使い方

タップは、指を画面に触れることで発生します。例えば、ボタンをタップすると、特定のアクションがトリガーされるようなシンプルな実装があります。

【タップのコード事例】
// ボタンをタップした時のアクション
@IBAction func buttonTapped(_ sender: UIButton) {
    print("ボタンがタップされました!")
}

ロングプレスの使い方

ロングプレス指を一定時間画面に触れ続けることで発生します。ロングプレスを利用すると、メニューやアクションシートなどの表示に応用することができます。

【ロングプレスのコード事例】
// ロングプレスジェスチャーの追加と対応するアクション
let longPressGesture = 
    UILongPressGestureRecognizer(
    target: self, 
    action: #selector(handleLongPress(_:)))

myView.addGestureRecognizer(longPressGesture)

@objc func handleLongPress(_ gesture: UILongPressGestureRecognizer) {
    if gesture.state == .began {
        print("ロングプレスが開始されました!")
    }
}

スワイプの使い方

スワイプは、指を画面上で滑らせることで発生します。スワイプの方向によって、画面遷移や特定のアクションを実行するなどの操作が行えます。

【スワイプのコード事例】
// スワイプジェスチャーの追加と対応するアクション
let swipeGesture = 
    UISwipeGestureRecognizer(
    target: self, 
    action: #selector(handleSwipe(_:)))

myView.addGestureRecognizer(swipeGesture)

@objc func handleSwipe(_ gesture: UISwipeGestureRecognizer) {
    if gesture.direction == .right {
        print("右にスワイプされました!")
    } else if gesture.direction == .left {
        print("左にスワイプされました!")
    }
}

ピンチの使い方

ピンチ2本の指を使って画面を拡大縮小するジェスチャーです。これを利用して、地図のズームイン・ズームアウトや画像の拡大縮小などが実現できます。

【ピンチのコード事例】
// ピンチジェスチャーの追加と対応するアクション
let pinchGesture = 
    UIPinchGestureRecognizer(
    target: self, 
    action: #selector(handlePinch(_:)))

myImageView.addGestureRecognizer(pinchGesture)

@objc func handlePinch(_ gesture: UIPinchGestureRecognizer) {
    if gesture.state == .changed {
        let scale = gesture.scale
        myImageView.transform = CGAffineTransform(scaleX: scale, y: scale)
    }
}

UIButtonとUIViewでのタップジェスチャーの実装方法

UIButtonUIViewタップジェスチャーを追加することで、特定の要素をタップした際にアクションを実行させることができます。

  • UIButtonは、ボタンとして機能する要素であり、タップされた際に特定のコードブロックを実行させることができます。
  • UIViewは、汎用的なビュー要素であり、ユーザーのタップに応じてカスタムアクションを実行することができます。

UIButtonのコード事例

//STEP1:
let myButton = UIButton(frame: CGRect(x: 100, y: 100, width: 200, height: 50))

//STEP2:
myButton.setTitle("タップしてください", for: .normal)

//STEP3:
myButton.addTarget(self, 
    action: #selector(buttonTapped(_:)), 
    for: .touchUpInside)

//STEP4:
self.view.addSubview(myButton)

//STEP5:
@objc func buttonTapped(_ sender: UIButton) {
    print("ボタンがタップされました!")
}
STEP
let myButton = UIButton(
  • UIButtonのインスタンスを生成しています。
  • CGRect(x: 100, y: 100, width: 200, height: 50)は、ボタンの位置とサイズを指定しています。
  • xとyはビュー内の位置を表し、widthとheightはボタンの幅と高さを表しています。
STEP
myButton.setTitle("
  • ボタンに表示されるテキストを設定しています。
  • ここでは、「タップしてください」というテキストがボタンに表示されます。
  • .normalは通常の状態でのテキストを指定しています。
STEP
myButton.addTarget(self,
  • addTarget(_:action:for:)メソッドを使用して、ボタンがタップされた時に実行されるアクションを追加しています。
  • selfは、このコードが記述されているViewControllerを指します。
  • #selector(buttonTapped(_:))は、タップ時に呼び出すメソッドを指定しています。
  • .touchUpInsideは、ボタンがタップされた際のイベントの種類を指定しています。
STEP
self.view.addSubview(myButton)
  • 生成したボタンをViewControllerのビューに追加しています。
  • これにより、画面にボタンが表示されます。
STEP
@objc func buttonTapped(
  • ボタンがタップされた時に実行されるメソッドbuttonTapped(_:)が定義されています。
  • @objcは、Objective-Cのセレクタを使用できるようにするためのアノテーションです。
  • このメソッドでは、ボタンがタップされたことを示すメッセージ「ボタンがタップされました!」をコンソールに出力しています。

UIViewのコード事例

// STEP1:
let myView = UIView(frame: 
    CGRect(x: 100, y: 200, width: 200, height: 100))

// STEP2:
myView.backgroundColor = UIColor.blue

// STEP3:
let tapGesture = 
    UITapGestureRecognizer(target: self, 
    action: #selector(viewTapped(_:)))

// STEP4:
myView.addGestureRecognizer(tapGesture)

// STEP5:
self.view.addSubview(myView)

// ビューがタップされた時の処理
@objc func viewTapped(_ gesture: UITapGestureRecognizer) {
    print("ビューがタップされました!")
}
STEP
let myView = UIView(
  • UIViewのインスタンスを生成しています。
  • CGRect(x: 100, y: 200, width: 200, height: 100)は、ビューの位置とサイズを指定しています。
  • xとyはビュー内の位置を表し、widthとheightはビューの幅と高さを表しています。
STEP
myView.backgroundColor = UIColor.blue
  • ビューの背景色を設定しています。
  • ここでは、ビューの背景色を青色に設定しています。
STEP
let tapGesture = UITapGestureRecognizer(
  • タップジェスチャーのインスタンスを生成しています。
  • UITapGestureRecognizerは、タップジェスチャーを扱うクラスで、指定されたターゲットとアクションを呼び出すことができます。
  • targetには、タップ時に呼び出されるメソッドの対象となるオブジェクトを指定しています。
  • actionには、タップ時に呼び出されるメソッドを指定しています。
STEP
myView.addGestureRecognizer(tapGesture)
  • タップジェスチャーをビューに追加しています。
  • これにより、ビューがタップされた際に指定したアクションが実行されるようになります。
STEP
self.view.addSubview(myView)
  • 生成したビューをViewControllerのビューに追加しています。
  • これにより、画面にビューが表示されます。
STEP
@objc func viewTapped(
  • ビューがタップされた時に実行されるメソッドviewTapped(_:)が定義されています。
  • @objcは、Objective-Cのセレクタを使用できるようにするためのアノテーションです。
  • このメソッドでは、ビューがタップされたことを示すメッセージ「ビューがタップされました!」をコンソールに出力しています。

Xcodeに実装しよう:UIViewのタップジェスチャー

ここでは、以下のコードをXcodeに記載して、実際に動かしてみます。

画像をタップすると、大阪城(大阪)→清水寺(京都)→大阪城(大阪)のように、交互に画像が切り替わります。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    
    @IBOutlet weak var myLabel: UILabel!
    var isOsaka = true
    
    override func viewDidLoad() {
        super.viewDidLoad()
       
        imageView.isUserInteractionEnabled = true
        
        let gestureRecognizer = UITapGestureRecognizer(
            target: self, action: #selector(changePic))
        
        imageView.addGestureRecognizer(gestureRecognizer)
    }
    
    @objc func changePic() {
        
        if isOsaka == true {
            imageView.image = UIImage(named: "kyoto")
            myLabel.text = "Osaka"
            isOsaka = false
        } else {
            imageView.image = UIImage(named: "osaka")
            myLabel.text = "Kyoto"
            isOsaka = true
        }
    }
}
  • @IBOutlet weak var imageView: UIImageView!
    Storyboardで定義したImageViewを接続するためのOutletです。
    weak修飾子をつけているため、参照は弱参照となり、メモリ管理が行いやすくなります。
  • @IBOutlet weak var myLabel: UILabel!
    Storyboardで定義したLabelを接続するためのOutletです。同様にweak修飾子を使っています。
  • var isOsaka = true
    Boolean型の変数isOsakaを定義しています。初期値はtrueです。
  • imageView.isUserInteractionEnabled = true

ImageViewがユーザーのタッチに反応するようにisUserInteractionEnabledtrueに設定しています。

  1. let gestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(changePic))
    UITapGestureRecognizerのインスタンスを生成しています。
    targetには、ジェスチャーが検出された際に呼び出されるメソッドの対象を指定しています。
  2. imageView.addGestureRecognizer(gestureRecognizer)
    ImageViewに先程作成したタップジェスチャーを追加しています。
  3. @objc func changePic() { ... }
    changePicというメソッドを定義しています。
    このメソッドは@objc属性がついているため、Objective-Cのセレクタとして使用できるようになります。
    このメソッドでは、ImageViewとLabelの内容を切り替える処理を行っています。
    条件に応じて、画像とテキストを切り替えています。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次