漢堡菜單UIPanGestureRecogniser

Question

我正在嘗試以編程方式為我的應用制作漢堡菜單，並且不使用任何插件。 我從基礎開始，所以僅當用戶向右滑動時，嘗試使2個UIView一起工作。 這兩個視圖分別是主視圖和漢堡菜單。

到目前為止，UIViews加載在正確的位置，並且當用戶向右滑動時，側欄也會隨之滑動。 但是，當用戶放開手時，UIView也會向上滑動到固定在屏幕頂部的UIView的中心。 見下圖：

一旦丟失，就無法將其拉低。 我仍然可以左右滑動，但是中心保持在屏幕頂部。

我查看了我的代碼，看不到我在做什么錯？

這是我的代碼：

    class gestureSwipe: UIViewController, UIGestureRecognizerDelegate {

    let screenHeight = UIScreen.main.bounds.height
    let screenWidth = UIScreen.main.bounds.width

    var trayOriginalCenter: CGPoint!
    var sideBarSwipeLeftOffset: CGFloat!
    var siderBarSwipeRight: CGPoint!
    var sideBarSwipeLeft: CGPoint!

    let sideBarUIView: UIView! = {
        let sideBarUIView = UIView()
        sideBarUIView.backgroundColor = UIColor(red:1.0, green:0.0, blue:0.0, alpha:1.0)
        sideBarUIView.translatesAutoresizingMaskIntoConstraints = false
        sideBarUIView.isUserInteractionEnabled = true
        return sideBarUIView
    }()

    let mainView: UIView = {
        let mainView = UIView()
        mainView.backgroundColor = UIColor(red:0.0, green:1.0, blue:0.0, alpha:1.0)
        mainView.translatesAutoresizingMaskIntoConstraints = false
        mainView.isUserInteractionEnabled = true
        return mainView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        let settingsButton = UIBarButtonItem(barButtonSystemItem: .edit, target: self, action: #selector(HandleSettings))
        navigationItem.leftBarButtonItem = settingsButton
        view.backgroundColor = UIColor.white

        view.addSubview(mainView)
        view.addSubview(sideBarUIView)

        let SideBarPanGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(didPan(sender:)))
        let MainViewPanGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(didPan(sender:)))
        mainView.addGestureRecognizer(MainViewPanGestureRecognizer)
        sideBarUIView.addGestureRecognizer(SideBarPanGestureRecognizer)

        sideBarSwipeLeftOffset = 80
        siderBarSwipeRight = sideBarUIView.center
        sideBarSwipeLeft = CGPoint(x: sideBarUIView.center.x + sideBarSwipeLeftOffset, y: sideBarUIView.center.y)

        setupLayout()
    }


    @IBAction func didPan(sender: UIPanGestureRecognizer) {
        let velocity = sender.velocity(in: view)
        let translation = sender.translation(in: view)

        if sender.state == .began {
            trayOriginalCenter = sideBarUIView.center
        } else if sender.state == .changed {
            print("Gesture began")
            sideBarUIView.center = CGPoint(x: trayOriginalCenter.x + translation.x, y: trayOriginalCenter.y)
        } else if sender.state == .ended {
            print("Gesture ended")
            if velocity.x > 0 {
                UIView.animate(withDuration: 0.3) {
                    self.sideBarUIView.center = self.sideBarSwipeLeft
                }
            } else {
                UIView.animate(withDuration: 0.3) {
                    self.sideBarUIView.center = self.siderBarSwipeRight
                }
            }

        }
    }

    @IBAction func HandleSettings(sender : UIButton) {
        print ("Show settings")
    }

    private func setupLayout(){

        // CONSTRAINTS

        mainView.heightAnchor.constraint(equalToConstant: screenHeight).isActive = true
        mainView.widthAnchor.constraint(equalToConstant: screenWidth).isActive = true

        sideBarUIView.heightAnchor.constraint(equalToConstant: screenHeight).isActive = true
        sideBarUIView.widthAnchor.constraint(equalToConstant: screenWidth).isActive = true
        sideBarUIView.rightAnchor.constraint(equalTo: view.leftAnchor, constant: 0).isActive = true
    }

}

Answer 1

所以我找出了問題所在。 在sender.state == .ended中 ，我正在使用self.sideBarUIView.center = self.sideBarSwipeLeft ，它將視圖一直推到屏幕中央。

編輯：

我決定從頭開始制作漢堡菜單。 從此示例中獲取一些想法： https : //github.com/iosapptemplates/drawer-menu-swift

然后我終於去了，並添加了一些不錯的效果，例如，如果菜單的滑動不夠充分，則菜單又被隱藏了。

如果有人需要，這是我的最終代碼。

class hamburgerMenu: UIViewController, UIGestureRecognizerDelegate {

    let screenHeight = UIScreen.main.bounds.height
    let screenWidth = UIScreen.main.bounds.width
    var sideBarOriginalCenter: CGPoint!

    var mainView: UIView! = {
        let mainView = UIView()
        mainView.backgroundColor = UIColor(red:0.0, green:1.0, blue:0.0, alpha:1.0)
        mainView.translatesAutoresizingMaskIntoConstraints = false
        return mainView
    }()
    var overlayView: UIView! = {
        let viewBlack = UIView()
        viewBlack.backgroundColor = UIColor(red:0.0, green:0.0, blue:0.0, alpha:1.0)
        viewBlack.translatesAutoresizingMaskIntoConstraints = false
        return viewBlack
    }()
    var sideBarUIView: UIView! = {
        let sideBarUIView = UIView()
        sideBarUIView.backgroundColor = UIColor(red:1.0, green:0.0, blue:0.0, alpha:1.0)
        sideBarUIView.translatesAutoresizingMaskIntoConstraints = false
        return sideBarUIView
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        let settingsButton = UIBarButtonItem(barButtonSystemItem: .search, target: self, action: #selector(HandleSettings))
        navigationItem.leftBarButtonItem = settingsButton
        view.backgroundColor = UIColor.white

        view.addSubview(mainView)
        view.addSubview(overlayView)
        view.addSubview(sideBarUIView)

        overlayView.alpha = 0

        let swipeLeftGesture = UIPanGestureRecognizer(target: self, action: #selector(didPan(sender:)))
        mainView.addGestureRecognizer(swipeLeftGesture)

        let tapGesture = UITapGestureRecognizer(target: self, action: #selector(didTapOverlay))
        mainView.addGestureRecognizer(tapGesture)

        setupLayout()

    }

    @IBAction func didPan(sender: UIPanGestureRecognizer) {
        let translation = sender.translation(in: view)

        if sender.state == .began {
            sideBarOriginalCenter = sideBarUIView.center
        } else if sender.state == .changed {
            sideBarUIView.center = CGPoint(x: sideBarOriginalCenter.x + translation.x, y: sideBarUIView.center.y)
        } else if sender.state == .ended {
            let negHalfScreenWidth = ((self.screenWidth/2) * -1) / 2 // This should make -187.5 on iphoneX

            if sideBarUIView.center.x > negHalfScreenWidth {
                UIView.animate(withDuration: 0.3) {

                    if self.sideBarUIView.center.x > negHalfScreenWidth {
                        let leftSideOfScreen = self.screenWidth - self.screenWidth
                        self.sideBarUIView.center = CGPoint(x: leftSideOfScreen ,y: self.sideBarUIView.center.y)
                    }
                }
            } else {
                UIView.animate(withDuration: 0.3) {
                    let leftSideOfScreen = (self.screenWidth / 2) * -1
                    self.sideBarUIView.center = CGPoint(x: leftSideOfScreen ,y: self.sideBarUIView.center.y)
                }
            }
        }
    }

    @IBAction fileprivate func didTapOverlay() {
        UIView.animate(withDuration: 0.3, animations: {
            let leftSideOfScreen = (self.screenWidth / 2) * -1
            self.sideBarUIView.center = CGPoint(x: leftSideOfScreen ,y: self.sideBarUIView.center.y)
        }) { (success) in
        }
    }

    @IBAction func HandleSettings(sender : UIButton) {
        if (sideBarUIView.center.x == 0) {
            UIView.animate(withDuration: 0.3, animations: {
                let leftSideOfScreen = (self.screenWidth / 2) * -1
                self.sideBarUIView.center = CGPoint(x: leftSideOfScreen ,y: self.sideBarUIView.center.y)
            })
        } else if (sideBarUIView.center.x < -0.1) {
            UIView.animate(withDuration: 0.3, animations: {
                let leftSideOfScreen = self.screenWidth - self.screenWidth
                self.sideBarUIView.center = CGPoint(x: leftSideOfScreen ,y: self.sideBarUIView.center.y)
            })
        }
    }

    private func setupLayout(){
        mainView.heightAnchor.constraint(equalToConstant: screenHeight).isActive = true
        mainView.widthAnchor.constraint(equalToConstant: screenWidth).isActive = true

        sideBarUIView.rightAnchor.constraint(equalTo: view.leftAnchor, constant: 20).isActive = true
        sideBarUIView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        sideBarUIView.heightAnchor.constraint(equalToConstant: screenHeight).isActive = true
        sideBarUIView.widthAnchor.constraint(equalToConstant: screenWidth).isActive = true

        overlayView.heightAnchor.constraint(equalToConstant: screenHeight).isActive = true
        overlayView.widthAnchor.constraint(equalToConstant: screenWidth).isActive = true
    }

}