理想的なサイドメニューを追い求めてみた。

まずは完成Verの動画をご覧下さい。

はじめに

サイドメニュー、ドロワーメニュー、ハンバーガーメニューなど、色々な呼称があるこの左からニョキッと出てきてくれるカッコイイ画面遷移方法。たくさんの優秀なライブラリが公開されてはいるのですが、本当は　もうちょっと早く動いて欲しかったり、もうちょっといじって自分だけのカスタムサイドメニューにしたいなと思っていたので、これを機に、ライブラリに頼らず、自前で自分だけのサイドメニューを作ってみました。

Githubにソースコードを貼って置きました。

製作にあたって

一から自分で考えて作れた訳では無く、沢山の優秀な記事を参考に、いいとこ取りで自分なりのサイドメニューを作りました。本当にありがとうございました!!
説明もわかりやすかったので、是非ご覧になって下さい。
参考記事

機能

・「SideMenu」をタップすると画面遷移
・画面端からスワイプで画面遷移
・遷移後、画面の暗い部分をタップすると画面が閉じる
・画面を閉じる時はスワイプの速さを感知して閉じるか開くかを判断する。

本当は実現したかった挙動

画面端からのスワイプで、開度が半分以下の時に、

interactionController.cancel()

を実行し、画面を閉じたかったのですが、画面が閉じられた瞬間に、画面がなぜか瞬間移動してしまう挙動を解決できなかったので、

interactionController.finish()

を

interactionController.completionSpeed = 2.5

で素早く画面遷移させる事でとりあえずの対処しました。

追記(2022/5/27)-画面遷移時の開度に応じて画面を閉じる、開くを自動で選択する機能を追加しました。

interactionController.cancel()

この時の挙動としては

 func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        return CustomAnimatedTransitioning(isPresenting: true)
    }

が呼ばれている状態だったので、結果的にこのメソッドのアニメーション処理完了後に、

if toView.frame.origin.x == 0 {
                transitionContext.completeTransition(completed)
            }else {
                if transitionContext.transitionWasCancelled {
                    toView.removeFromSuperview()
                }

を追記しました。

アニメーション後に画面遷移が完了していない時に(toView.frame.origin.x != 0)画面を消しました。

他にもinteractionController.cancel()時にfunc animateDissmissalTransitionに分岐させる方法など色々考えてみましたが、どれも上手くいかず、上記の方法になりました。

他に綺麗なコードの書き方があれば教えてほしいです。🙇‍♂️

追記(2022/6/2)画面遷移後、画面を閉じる際に、画面外からのスワイプでも画面を閉じる機能を追加しました。

PresentationControllerにUIPanGestureRecognizerを追加

PresentationController

class PresentationController: UIPresentationController {
    
    let blurEffectView: UIVisualEffectView!
    var tapGestureRecognizer: UITapGestureRecognizer = UITapGestureRecognizer()
    //追加
    var panGestureRecognizer: UIPanGestureRecognizer = UIPanGestureRecognizer()
    
    override init(presentedViewController: UIViewController, presenting presentingViewController: UIViewController?) {
        let blurEffect = UIBlurEffect(style: .dark)
        blurEffectView = UIVisualEffectView(effect: blurEffect)
        super.init(presentedViewController: presentedViewController, presenting: presentingViewController)
        tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(dismissController))
        //追加
        panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(dragDismissController))
        blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.blurEffectView.isUserInteractionEnabled = true
        self.blurEffectView.addGestureRecognizer(tapGestureRecognizer)
        self.blurEffectView.addGestureRecognizer(panGestureRecognizer)
    }

メソッドdragDismissControllerを追加

PresentationController

@objc func dragDismissController(sender: UIPanGestureRecognizer) {
        let progress = abs(sender.translation(in: blurEffectView).x / blurEffectView.bounds.size.width)
        
        let translation = sender.translation(in: blurEffectView)
        
        guard translation.x <= 0 else { return }
        presentedView?.frame.origin = CGPoint(x: translation.x, y: 0)
        
        if sender.state == .ended {
            let dragVelocity = sender.velocity(in: blurEffectView)
            if dragVelocity.x <= -500 {
                self.presentedViewController.dismiss(animated: true, completion: nil)
            }else if progress > 0.55 {
                self.presentedViewController.dismiss(animated: true, completion: nil)
            }else {
                UIView.animate(withDuration: 0.3) {
                    self.presentedView?.frame.origin = CGPoint(x: 0, y: 0)
                }
            }
        }
    }

以上で個人的には理想的な画面遷移が出来るようになりました!!

最終的な機能

・画面外からのスワイプで画面遷移
・「SideMenu」ボタンから画面遷移
・遷移後、スワイプで画面を閉じれる
・画面外からでもスワイプで画面を閉じれる、タップでも閉じれる
・それぞれの画面遷移時、開度に応じて画面を開く、閉じるを判断して最適な遷移が出来る
・スワイプの移動量が大きい場合、判断して一瞬で画面遷移する