CODEWITHSUNDEEP
iosswiftcocoa-touchuiview
Ryan Couch
Ryan Couch

Reputation: 7

Slide in Menu for iOS

I'm trying to create a slide in menu that comes in from the left but I've done something and its coming in onto the right instead. I've programmatically done this not used storyboards as most of the time the constraints messes up.

for example heres a screenshot (probably something I've done): Slide Menu - Gone Wrong 

import UIKit

class SideInMenu: NSObject {

    let blackView = UIView()

    let collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        return cv
    }()

    @objc func showSlideMenu() {
        //Show slide in menu Here

        if let window = UIApplication.shared.keyWindow {
            blackView.backgroundColor = UIColor(white: 0, alpha: 0.5)

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

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

            let width: CGFloat = 194
            let x = window.frame.width - width
            collectionView.frame = CGRectMake(x, 0, width, window.frame.height)
            //collectionView.frame = CGRectMake(x, 0, width, window.frame.height)

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

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

                self.collectionView.frame = self.CGRectMake(width, 0, self.collectionView.frame.width, self.collectionView.frame.height)

            }, completion: nil)

        }
    }

    @objc func handleDismiss() {
        UIView.animate(withDuration: 0.5) {
            self.blackView.alpha = 0
            if let window = UIApplication.shared.keyWindow {
                self.collectionView.frame = self.CGRectMake(window.frame.width, 0, self.collectionView.frame.width, self.collectionView.frame.height)
            }
        }

    }

    override init() {
        super.init()
    }

    func CGRectMake(_ x: CGFloat, _ y: CGFloat, _ width: CGFloat, _ height: CGFloat) -> CGRect {return CGRect(x: x, y: y, width: width, height: height)
    }
}

Upvotes: 0

Views: 129

Answers (1)

Daniel Dramond
Daniel Dramond

Reputation: 1598

Always remember that 0, 0 for x and y is always the top left of the screen and if the width and height is 20, 20, it will go from the top left, right 20px across and down 20px. The first thing you have to do inside you viewDidLoad is to set the collectionViews initial frame, which is off screen like this. DON'T FORGET MINUS WIDTH:

self.collectionView.frame = self.CGRectMake(-width, 0, self.collectionView.frame.width, self.collectionView.frame.height)

Animate it in from the left like so:

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

            self.collectionView.frame = self.CGRectMake(0, 0, self.collectionView.frame.width, self.collectionView.frame.height)

        }, completion: nil)

Dismiss with:

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

            self.collectionView.frame = self.CGRectMake(-width, 0, self.collectionView.frame.width, self.collectionView.frame.height)

        }, completion: nil)

Upvotes: 1

Related Questions