Kodeco Forums

How to Create Your Own Slide-Out Navigation Panel in Swift

Learn the implementation details of the very popular slide-out navigation panel you've seen in apps such as Facebook and Path.


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/2234-how-to-create-your-own-slide-out-navigation-panel-in-swift

Pardon my ignorance:)

What is the purpose of the UINavigationController in the context of this example? Why does the CenterNavigationController need to be wrapped in a UINavigationController?

Will this work with Swift 2 and Xcode 7?

How can I do if i want to initialize the slidemenu on a view that is not the first?
Because i have a login, then have a menu, and according to the userĀ“s choice of menu so i want to appear the slide menu.

Thank you, good job with this tutorial

Just at the beggining of this tutorial, you find this sentences:
var centerNavigationController: UINavigationController!
var centerViewController: CenterViewController!
Here you have a bug!!! it should be: var centerViewController: UINavigationController!

Thank you for this tutorial @frosty. It was enjoyable and I could follow along with not too much difficulty. I was wondering, would it be a similar approach if I wanted the slide out navigation panels to slide out on top of the center view controller instead of having them be revealed below?

Thank you so much! Great Tutorial!

Hey Frosty, great write-up, your code was very helpful ! I had one question though, the views inside the container view are getting cut off at the bottom when the status bar is active (i.e. during a phone call). Do you know how to solve this issue?

Thanks

1 Like

I tried to compile the project with XCode 7.3.1 and failed. There are many errors.

These errors are very simple. You can fix on the fly :wink:

Thank you so much for the walk through. I was able to get everything working. I want to change it to function a little different and was wondering if you could help me out. Instead of having the centerviewcontroller move I want the right menu to move in and out over the centerviewcontroller. After a little guessing I go it to mostly work but there is a small glitch in that the first time I push the button the right panel fills the whole screen and then moves to the right. After that I can make it move in and out from the right. Sorry for the long explanation. Thanks for any help and assistance.

Hi,

Is there a possibility of adding dynamic viewcontrollers to left and right view. What I mean is that
let left and right viewcontrollers be place holders and I can assign accordingly based on my needs.

In case anyone else has this problem it is because the center navigation is not anchored to the Container View. In order to anchor the center navigation to the Container View insert these line of code into your ViewDidLoad.

    centerNavigationController.view.translatesAutoresizingMaskIntoConstraints = false
    centerNavigationController.view.leftAnchor.constraintEqualToAnchor(view.leftAnchor).active = true
    centerNavigationController.view.rightAnchor.constraintEqualToAnchor(view.rightAnchor).active = true
    centerNavigationController.view.bottomAnchor.constraintEqualToAnchor(bottomLayoutGuide.topAnchor).active = true
    centerNavigationController.view.topAnchor.constraintEqualToAnchor(topLayoutGuide.topAnchor).active = true

Hi @frosty, I incorporated this example once this suits my needs, and it works. I had one problem though, Iā€™ve noticed that when I create a UIWindow in AppDelegate for the ContainerViewController, I lost a TabViewController that I had before. This TabViewController controlled two other ViewControllerā€™s of mine. Let me show you some pics:
1.

2.

Notice that my TabBar, that was the main control of my windows disappear, I believe that this happens because ContainerViewController doesnā€™t have a TabBar, but I spent some time working on this first TabBar and didnā€™t want to create another one. Other detail is that the Views have TabBar, the side Menu I created doesnā€™t.

Waiting kindly for answers!

I think the Side Panels are never released because thereā€™re some missing calls to willMoveToParentViewController and removedFromParentViewController

I believe the code should be the following for the left panel:

func animateLeftPanel(shouldExpand: Bool) {
if (shouldExpand) {
currentState = .LeftPanelExpanded

    animateCenterPanelXPosition(CGRectGetWidth(centerNavigationController.view.frame) - centerPanelExpandedOffset)
} else {
    animateCenterPanelXPosition(0) { finished in
        self.currentState = .BothCollapsed
        
        self.leftViewController?.willMoveToParentViewController(nil)
        self.leftViewController!.view.removeFromSuperview()
        self.leftViewController?.removeFromParentViewController()
        self.leftViewController = nil;
    }
}

}

I get error in AppDelegate. It says ā€œMissing argument label ā€˜coder:ā€™ in callā€ . I took the screenshot. Is there any body to help me? Thank you guys in advance!

Hello, I followed your tutorial up Me and my shadow, I will not result if necessary. I used to exercise your SlideOutNavigatioStarter me. I have a concern in the code on the functions of the storyboard, see messages below. you have an idea of the problem. thank you in advance

Excellent tutorial which updates quickly to Swift 3 with a couple of syntax changes. Tricky challenge Iā€™ve found with this is handling rotations when a slideout is visible. Fix might be to make the overlap of menu and main page be a % rather than a fixed amount. Quick fix in the meantime could be to lock rotation when slideouts are visible. Just a couple of suggestions. Thanks again for sharing the code.

For those folk who cannot avoid using the hamburger menu, it would be great to see an update or rewrite of this! :]

Working a treat on iOS 10 with Xcode 8 & Swift 3 with minimal changes. Up and running in a couple of hours. Thank you!

If you want to handle resizing the menu on transitions you can enhance the animateLeftPanel method:
func animateLeftPanel(shouldExpand: Bool, size: CGSize? = nil)

then set (and use) a constant to the width you need in the shouldExpand fork:
if (shouldExpand) {
let viewWidth = size == nil ? centerNavigationController.view.frame.width : size!.width
currentState = .LeftPanelExpanded
animateCenterPanelXPosition(targetPosition: viewWidth - centerPanelExpandedOffset)
} else {

and, finally override viewWillTransition in your ContainerViewController:
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
if currentState == .LeftPanelExpanded { animateLeftPanel(shouldExpand: true, size: size) }
}

(I only implemented the left menu (kitties) in my run through of the tutorial, so you will have to make other enhancements to get this to work for the right menu for the doggies)

HTH someoneā€¦ (maybe @011010100010100)