Horizontal Slide-in Menu

Question

I'm quite new to iOS/Swift development and I'm trying to implement a horizontal slide-in menu (for user settings).

I've managed to make it work, the problem I'm facing is, the menu is sliding from right-to-left but it should go the other way around i.e. from left-to-right. I've tried to play with positive and negative values, but I still get a bit puzzled about how those CG properties work (axis x,y, etc).

Here's my code, responsible for showing the Menu:

     private func showSettingsMenu(){
        if let window = UIApplication.shared.keyWindow {

        blackView.backgroundColor = UIColor(white: 0, alpha: 0.7)

        blackView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleDismiss)))

        window.addSubview(blackView)
        window.addSubview(collectionView)

        blackView.frame = window.frame
        blackView.alpha = 0

        let collectionWidth: CGFloat = window.frame.width * 0.75
        let x = window.frame.width - collectionWidth

        collectionView.frame = CGRect(x: window.frame.width, y: 0, width: collectionWidth, height: window.frame.height)

        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {

            self.blackView.alpha = 1
            self.collectionView.frame = CGRect(x: x, y: 0, width: self.collectionView.frame.width, height: self.collectionView.frame.height)

        }, completion: nil)
    }
}

score 1 · Accepted Answer · edited Mar 28 '18 at 22:11

The problem is that you are setting initial x position to the screen width and the final to 1/4 from it so it slide from right to left:

let collectionWidth: CGFloat = window.frame.width * 0.75

collectionView.frame = CGRect(x: -1 * collectionWidth , y: 0, width: collectionWidth, height: window.frame.height)

UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {

   self.blackView.alpha = 1

   self.collectionView.frame = CGRect(x: 0, y: 0, width: self.collectionView.frame.width, height: self.collectionView.frame.height)

}, completion: nil)

Edit change line

 collectionView.frame = CGRect(x: window.frame.width, y: 0, width: collectionWidth, height: window.frame.height)

To

collectionView.frame = CGRect(x: -1 * collectionWidth , y: 0, width: collectionWidth, height: window.frame.height)

/// inside animation change line

 self.collectionView.frame = CGRect(x: x, y: 0, width: self.collectionView.frame.width, height: self.collectionView.frame.height)

to

 self.collectionView.frame = CGRect(x: 0, y: 0, width: self.collectionView.frame.width, height: self.collectionView.frame.height)

answer contains fix change x here collectionView.frame = CGRect(x: -1 * collectionWidth , y: 0, width: collectionWidth, height: window.frame.height) in the line before UIView.animate — Shehata Gamal, Feb 12 '18 at 13:41

Horizontal Slide-in Menu

1 Answers1