SwiftのUIPanGestureRecognizerで移動制限をつける

はじめに

今回はUIPanGestureRecognizerを使って、Viewをドラッグすると動くようにします。その際に、決めた範囲からViewが出ないように制限をつけてみました。

やり方

まずは、UIPanGestureRecognizerを使ってViewがドラッグした位置に動くように実装します。
100×100の背景色赤の正方形をViewに追加し、UIPanGestureRecognizerを設定します。

※今回は分かりやすくするためにy軸方向にしか動かない形で実装します

qiita.swift

class ViewController: UIViewController {
    let squareView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
    override func viewDidLoad() {
        super.viewDidLoad()
        squareView.backgroundColor = UIColor.red
        let panGesture = UIPanGestureRecognizer(
            target: self,
            action: #selector(didPan(_:))
        )
        squareView.addGestureRecognizer(panGesture)
        view.addSubview(squareView)
    }

次に上記コードで指定したdidPan関数を作って、ドラッグ動作に応じてsquareViewが移動するように記述します。

qiita.swift

  @objc
    func didPan(_ recognizer: UIPanGestureRecognizer) {
        let translation = recognizer.translation(in: self.view)
        squareView.frame.origin.y += translation.y
        recognizer.setTranslation(CGPoint.zero, in: self.view)
    }

これでsquareViewをドラッグで縦方向に動かせるようになりました。

次にこのsquareViewが画面の半分より下にいかないように範囲制限をしたいと思います。didPan関数を以下のように変更します。

qiita.swift

@objc
    func didPan(_ recognizer: UIPanGestureRecognizer) {
        let translation = recognizer.translation(in: self.view)
        //ルートビューの高さの半分(画面の高さの半分)の値を取得
        //※フレームの位置は左上が起点になるので、正方形の高さを引いておく
        let halfPostion = view.frame.height / 2 - squareView.frame.height
        //現在のsquareViewの位置を取得
        let currentPostion = squareView.frame.origin.y
        //ドラッグした移動量を足した時予測される位置を取得
        let predictedPosition = currentPostion + translation.y
        
        //予測される位置が、halfPostionの範囲内か、範囲外かで処理を分岐
        if predictedPosition <= halfPostion {
            //予測される位置が、halfPostionの範囲内なら移動量を足す
            squareView.frame.origin.y += translation.y
        } else {
            //予測される位置が、halfPostionの範囲外になるならhalfPostionの位置に指定
            squareView.frame.origin.y = halfPostion
        }
        recognizer.setTranslation(CGPoint.zero, in: self.view)
    }

これで画面の中央から下にViewが移動できなくなりました！
Viewの移動に制限をつける方法は色々あると思いますが、
今回はこのような方法で実装してみました。

最後に

swift初学者のため、誤っている点やもっと良い方法があれば是非コメントで教えていただけたら嬉しいです。
見ていただいてありがとうございます！