CODEWITHSUNDEEP
iosswiftanimationtabbarside-menu
Wahab Khan Jadon
Wahab Khan Jadon

Reputation: 1176

How to open side menu from tabbar

I am trying to achieve some thing like following side menu open from tabbar item click.

enter image description here

I used the following class for Transition Animation ... 

class SlideInTransition: NSObject, UIViewControllerAnimatedTransitioning {

var isPresenting = false
let dimmingView = UIView()

func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
    return 3
}

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {

    guard let toViewController = transitionContext.viewController(forKey: .to),
        let fromViewController = transitionContext.viewController(forKey: .from) else { return }

    let containerView = transitionContext.containerView

    let finalWidth = toViewController.view.bounds.width * 0.3
    let finalHeight = toViewController.view.bounds.height

    if isPresenting {
        // Add dimming view
        dimmingView.backgroundColor = .black
        dimmingView.alpha = 0.0
        containerView.addSubview(dimmingView)
        dimmingView.frame = containerView.bounds
        // Add menu view controller to container
        containerView.addSubview(toViewController.view)

        // Init frame off the screen
        toViewController.view.frame = CGRect(x: -finalWidth, y: 0, width: finalWidth, height: finalHeight)
    }

    // Move on screen
    let transform = {
        self.dimmingView.alpha = 0.5
        toViewController.view.transform = CGAffineTransform(translationX: finalWidth, y: 0)
    }


    // Move back off screen
    let identity = {
        self.dimmingView.alpha = 0.0
        fromViewController.view.transform = .identity
    }

    // Animation of the transition
    let duration = transitionDuration(using: transitionContext)
    let isCancelled = transitionContext.transitionWasCancelled
    UIView.animate(withDuration: duration, animations: {
        self.isPresenting ? transform() : identity()
    }) { (_) in
        transitionContext.completeTransition(!isCancelled)
    }
    }


}

and use it in my code as follow 

  guard let menuViewController = storyboard?.instantiateViewController(withIdentifier: "MenuVC") as? MenuVC else { return }
        menuViewController.modalPresentationStyle = .overCurrentContext
        menuViewController.transitioningDelegate = self as? UIViewControllerTransitioningDelegate
        menuViewController.tabBarItem.image = UIImage(named: "ico_menu")
        menuViewController.tabBarItem.selectedImage = UIImage(named: "ico_menu")

        viewControllers = [orderVC,serverdVC,canceledVC,menuViewController]


extension TabbarVC: UIViewControllerTransitioningDelegate {
    func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        transiton.isPresenting = true
        return transiton
    }

    func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
        transiton.isPresenting = false
        return transiton
    }
}

but animation doe't work at all ... I want to open it like side menu over current context ..

How can i achieve some thing like that ...

Upvotes: 0

Views: 2634

Answers (1)

arvinq
arvinq

Reputation: 701

TabBar is not made to handle animate transition for just a single child View controller. If you apply a custom transition, it will be applied in all of its tabs (child view controllers). Plus last time i checked, airbnb's app doesn't behave like that when opening the user profile. :)

What you can do, though, is have a separate menu button at the top of your navigation view controller or wherever and call the slide in from there: 

    func slideInView() {
        let vcToShow = MenuViewController()
        vcToShow.modalPresentationStyle = .overCurrentContext
        vcToShow.transitioningDelegate = self as? UIViewControllerTransitioningDelegate
        present(vcToShow, animated: true, completion: nil)
    }

Or if you insist on having the menu a part of the tabs, then you can do this.

Hope this helps. :)

Upvotes: 1

Related Questions