Slide Menu (Hamburger Menu) iOS Swift - ios

Question

I need create slide menu with transition from right to left, I have succeeded to create it but when I press icon of menu show me slide menu without animation!! and I can’t hide it with press outside of slide menu!!
How can I create animation with transition from right to left??
How can I set hide when press outside of slide menu??
SlideInMenu Class:
import UIKit
class SlideInMenu: NSObject, UIViewControllerAnimatedTransitioning {
var isPresenting = false
let dimmingView = UIView()
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 3
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard let toVC = transitionContext.viewController(forKey: .to),
let fromVC = transitionContext.viewController(forKey: .from) else { return }
let containerView = transitionContext.containerView
let finalWidth = toVC.view.bounds.width * 0.8375
let finalHeight = toVC.view.bounds.height
if (isPresenting) {
dimmingView.backgroundColor = UIColor(red: 32/255, green: 70/255, blue: 86/255, alpha: 0.8)
containerView.addSubview(dimmingView)
dimmingView.frame = containerView.bounds
containerView.addSubview(toVC.view)
toVC.view.frame = CGRect(x: -(finalWidth - toVC.view.bounds.width), y: 0, width: finalWidth, height: finalHeight)
}
let transform = {
self.dimmingView.alpha = 0.9
toVC.view.transform = CGAffineTransform(translationX: finalWidth - toVC.view.bounds.width, y: 0)
}
let identiy = {
self.dimmingView.alpha = 0.9
fromVC.view.transform = .identity
}
let duration = transitionDuration(using: transitionContext)
let isCancelled = transitionContext.transitionWasCancelled
UIView.animate(withDuration: duration, animations: {
self.isPresenting ? transform () : identiy()
}) { (_) in
transitionContext.completeTransition(!isCancelled)
}
}
}
ViewController Class:
import UIKit
class ViewController: UIViewController {
let transition = SlideInMenu()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
#IBAction func tapBtnMenu(_ sender: Any) {
guard let menuVC = storyboard?.instantiateViewController(withIdentifier: "MenuViewController") else { return }
menuVC.modalPresentationStyle = .overCurrentContext
menuVC.transitioningDelegate = self
present(menuVC, animated: true)
}
}
extension ViewController: UIViewControllerTransitioningDelegate {
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
transition.isPresenting = true
return transition
}
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
transition.isPresenting = false
return transition
}
}

Answer 1

Output:
You can copy paste the below code in see it a in live action.
Explanation:
ViewController:
A button is added to ViewController for the opening of Sidebar
It confirms to the delegate so that it can listen to when the sidebar gets opened and when it gets closed and whether the user has selected any option of not
Sidebar:
This does the heavy lifting of main work.
The balck transparent View is close button and the other part is NavigationViewController
In show method, the close button is set to 60 width and navigation vc view is aligned next to it using constraints. Note that the x position of navigation vc is set to the width of screenwidth.
With the help of UIView.animate, the X position is set to 0 thus it animates from right to left.
on click on any option or clicking on outside of nav vc i.e. close button, the closeSidebar method is called.
closeSidebar again has a UIViw.animate block which is setting X position to screenwidth again thus left to right animation. and when it gets completed it is removed from the view hierarchy.
The ViewController is confirming to SidebarDelegate in this delegate's sidebarDidClose method, you will get to know that side bar has been closed and if the user has selected any option or not.
ViewController:
import UIKit
class ViewController: UIViewController {
public let button: UIButton = {
let v = UIButton()
v.translatesAutoresizingMaskIntoConstraints = false
v.setTitle("Open Menu", for: .normal)
v.setTitleColor(.blue, for: .normal)
v.setTitleColor(UIColor.blue.withAlphaComponent(0.5), for: .highlighted)
return v
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(button)
let constrains = [
button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
]
NSLayoutConstraint.activate(constrains)
button.addTarget(self, action: #selector(didSelect(_:)), for: .touchUpInside)
}
#objc func didSelect(_ sender: UIButton){
SidebarLauncher.init(delegate: self).show()
}
}
extension ViewController: SidebarDelegate{
func sidbarDidOpen() {
}
func sidebarDidClose(with item: NavigationModel?) {
guard let item = item else {return}
switch item.type {
case .home:
print("called home")
case .star:
print("called star")
case .about:
print("called about")
case .facebook:
print("called facebook")
case .instagram:
print("instagram")
}
}
}
SideBar:
import UIKit
protocol SidebarDelegate {
func sidbarDidOpen()
func sidebarDidClose(with item: NavigationModel?)
}
class SidebarLauncher: NSObject{
var view: UIView?
var delegate: SidebarDelegate?
var vc: NavigationViewController?
init(delegate: SidebarDelegate) {
super.init()
self.delegate = delegate
}
public let closeButton: UIButton = {
let v = UIButton()
v.backgroundColor = UIColor.black.withAlphaComponent(0.5)
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
func show(){
let bounds = UIScreen.main.bounds
let v = UIView(frame: CGRect(x: bounds.width, y: 0, width: bounds.width, height: bounds.height))
v.backgroundColor = .clear
let vc = NavigationViewController()
vc.delegate = self
v.addSubview(vc.view)
v.addSubview(closeButton)
vc.view.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
closeButton.topAnchor.constraint(equalTo: v.topAnchor),
closeButton.leadingAnchor.constraint(equalTo: v.leadingAnchor),
closeButton.bottomAnchor.constraint(equalTo: v.bottomAnchor),
closeButton.widthAnchor.constraint(equalToConstant: 60),
vc.view.topAnchor.constraint(equalTo: v.topAnchor),
vc.view.leadingAnchor.constraint(equalTo: closeButton.trailingAnchor),
vc.view.bottomAnchor.constraint(equalTo: v.bottomAnchor),
vc.view.trailingAnchor.constraint(equalTo: v.trailingAnchor, constant: 0)
])
closeButton.addTarget(self, action: #selector(close(_:)), for: .touchUpInside)
self.view = v
self.vc = vc
UIApplication.shared.keyWindow?.addSubview(v)
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: [.curveEaseOut], animations: {
self.view?.frame = CGRect(x: 0, y: 0, width: self.view!.frame.width, height: self.view!.frame.height)
self.view?.backgroundColor = UIColor.black.withAlphaComponent(0.5)
}, completion: {completed in
self.delegate?.sidbarDidOpen()
})
}
#objc func close(_ sender: UIButton){
closeSidebar(option: nil)
}
func closeSidebar(option: NavigationModel?){
UIView.animate(withDuration: 0.5, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: [.curveEaseOut], animations: {
if let view = self.view{
view.frame = CGRect(x: view.frame.width, y: 0, width: view.frame.width, height: view.frame.height)
self.view?.backgroundColor = .clear
}
}, completion: {completed in
self.view?.removeFromSuperview()
self.view = nil
self.vc = nil
self.delegate?.sidebarDidClose(with: option)
})
}
}
extension SidebarLauncher: NavigationDelegate{
func navigation(didSelect: NavigationModel?) {
closeSidebar(option: didSelect)
}
}
For the completeness of the code
NavigationView
import Foundation
import UIKit
class NavigationView: UIView{
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit(){
addSubview(mainView)
mainView.addSubview(collectionView)
setConstraints()
}
func setConstraints() {
let constraints = [
mainView.topAnchor.constraint(equalTo: topAnchor),
mainView.leadingAnchor.constraint(equalTo: leadingAnchor),
mainView.bottomAnchor.constraint(equalTo: bottomAnchor),
mainView.trailingAnchor.constraint(equalTo: trailingAnchor),
collectionView.topAnchor.constraint(equalTo: mainView.topAnchor),
collectionView.leadingAnchor.constraint(equalTo: mainView.leadingAnchor),
collectionView.bottomAnchor.constraint(equalTo: mainView.bottomAnchor),
collectionView.trailingAnchor.constraint(equalTo: mainView.trailingAnchor)
]
NSLayoutConstraint.activate(constraints)
}
public let collectionView: UICollectionView = {
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical
layout.minimumLineSpacing = 0
layout.minimumInteritemSpacing = 0
let v = UICollectionView(frame: .zero, collectionViewLayout: layout)
v.translatesAutoresizingMaskIntoConstraints = false
v.register(NavigationCell.self, forCellWithReuseIdentifier: "NavigationCell")
v.backgroundColor = .clear
return v
}()
public let mainView: UIView = {
let v = UIView()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .blue
return v
}()
}
NavigationViewController plus Navigation Model
import Foundation
import UIKit
protocol NavigationDelegate{
func navigation(didSelect: NavigationModel?)
}
enum NavigationTypes{
case home,star,about,facebook,instagram
}
struct NavigationModel {
let name: String
let type: NavigationTypes
}
class NavigationViewController: UIViewController{
var myView: NavigationView {return view as! NavigationView}
unowned var collectionView: UICollectionView {return myView.collectionView}
var delegate: NavigationDelegate?
var list = [NavigationModel]()
override func loadView() {
view = NavigationView()
}
override func viewDidLoad() {
super.viewDidLoad()
setupList()
collectionView.delegate = self
collectionView.dataSource = self
}
func setupList(){
list.append(NavigationModel(name: "Home", type: .home))
list.append(NavigationModel(name: "Star", type: .star))
list.append(NavigationModel(name: "About", type: .about))
list.append(NavigationModel(name: "Facebook", type: .facebook))
list.append(NavigationModel(name: "Instagram", type: .instagram))
}
}
extension NavigationViewController: UICollectionViewDataSource{
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return list.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "NavigationCell", for: indexPath) as! NavigationCell
let model = list[indexPath.item]
cell.label.text = model.name
return cell
}
}
extension NavigationViewController: UICollectionViewDelegate{
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
delegate?.navigation(didSelect: list[indexPath.item])
}
}
extension NavigationViewController: UICollectionViewDelegateFlowLayout{
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize(width: collectionView.frame.width, height: 45)
}
}
NavigationCell
import Foundation
import UIKit
class NavigationCell: UICollectionViewCell{
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
func commonInit(){
[label,divider].forEach{contentView.addSubview($0)}
setConstraints()
}
func setConstraints() {
let constraints = [
label.centerYAnchor.constraint(equalTo: centerYAnchor),
label.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
divider.leadingAnchor.constraint(equalTo: leadingAnchor),
divider.bottomAnchor.constraint(equalTo: bottomAnchor),
divider.trailingAnchor.constraint(equalTo: trailingAnchor),
divider.heightAnchor.constraint(equalToConstant: 1)
]
NSLayoutConstraint.activate(constraints)
}
public let label: UILabel = {
let v = UILabel()
v.text = "Label Text"
v.textColor = .white
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
public let divider: UIView = {
let v = UIView()
v.translatesAutoresizingMaskIntoConstraints = false
v.backgroundColor = .white
return v
}()
}