简体   繁体   中英

How to create a Slide in Menu in Swift 5

I saw many tutorials how to create an Slide in Menu but they don´t work. The tutorials are too old.

Can someone please tell me how to create a menu that slides in from the bottom of the view? In the following link you can see a example image.

Slide in menu from bottom

Here is some code where I tried to do it:

var showAlertViewBtn: UIButton = {
   let button = UIButton()
    button.setTitle("Show", for: .normal)
    button.backgroundColor = .blue
    button.translatesAutoresizingMaskIntoConstraints = false
    button.addTarget(self, action: #selector(showAlertView), for: .touchUpOutside)
    return button
}()

var customAlertView: UIView = {
    let view = UIView()
    view.backgroundColor = .white
    view.translatesAutoresizingMaskIntoConstraints = false
    return view
}()


var customAlertTextLabel: UILabel = {
       let label = UILabel()
       label.font = UIFont(name: "Ubuntu-Bold", size: 16)
       label.text = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur"
       label.textColor = .black
    label.numberOfLines = 0
       label.translatesAutoresizingMaskIntoConstraints = false
       return label
   }()


var customAlertBtn: UIButton = {
   let button = UIButton()
    button.setTitle("Cancel", for: .normal)
    button.backgroundColor = .blue
    button.translatesAutoresizingMaskIntoConstraints = false
    button.addTarget(self, action: #selector(customAlertBtnTapped), for: .touchUpOutside)
    return button
}()

    var customAlertViewBottomConstraint: NSLayoutConstraint!

@objc func customAlertBtnTapped() {
      print("customAlertBtnTapped tapped")

      self.customAlertViewBottomConstraint.constant = 400
  }

@objc func showAlertView() {
    UIView.animate(withDuration: 2.0) {
        self.customAlertViewBottomConstraint.constant = 0
    }
}

override func viewDidLoad() {
       super.viewDidLoad()
       setUpAlertView()
   }


func setUpAlertView() {

    view.addSubview(showAlertViewBtn)
    showAlertViewBtn.heightAnchor.constraint(equalToConstant: 50).isActive = true
    showAlertViewBtn.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    showAlertViewBtn.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    showAlertViewBtn.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true



       view.addSubview(customAlertView)
       //customAlertView.frame = CGRect(x: 0, y: UIScreen.main.bounds.height, width: UIScreen.main.bounds.width, height: 400)
       customAlertView.heightAnchor.constraint(equalToConstant: 400).isActive = true
       customAlertView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
       customAlertView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
       customAlertViewBottomConstraint = view.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 400)
       customAlertViewBottomConstraint.isActive = true

       customAlertView.addSubview(customAlertTextLabel)
       customAlertView.addSubview(customAlertBtn)
       customAlertTextLabel.leftAnchor.constraint(equalTo: customAlertView.leftAnchor).isActive = true
       customAlertTextLabel.rightAnchor.constraint(equalTo: customAlertView.rightAnchor).isActive = true
       customAlertTextLabel.bottomAnchor.constraint(equalTo: customAlertBtn.topAnchor, constant: -20).isActive = true


       customAlertBtn.leftAnchor.constraint(equalTo: customAlertView.leftAnchor).isActive = true
       customAlertBtn.rightAnchor.constraint(equalTo: customAlertView.rightAnchor).isActive = true
       customAlertBtn.heightAnchor.constraint(equalToConstant: 50).isActive = true
       customAlertBtn.bottomAnchor.constraint(equalTo: customAlertView.bottomAnchor, constant:  -40).isActive = true

   }

Thats a code snipped which I used for my Slide in Menu.

    func animateMenu(shouldExpand: Bool, completion: ((Bool) -> Void)? = nil) {
        if shouldExpand {
            UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
                self.homeController.view.frame.origin.x = self.xOrigin
                self.blackView.alpha = 1
            }, completion: nil)
        } else {
            self.blackView.alpha = 0
            UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
                self.homeController.view.frame.origin.x = 0
            }, completion: completion)
        }

        animateStatusBar()
    }

    func animateStatusBar() {
        UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 0.8, initialSpringVelocity: 0, options: .curveEaseInOut, animations: {
            self.setNeedsStatusBarAppearanceUpdate()
        }, completion: nil)
    }

Hopefully it will help you

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM