How to build Slide Out Menu in Swift?

When you’re asked to build Slide Out, the first thing that you think is to bridge SWRevealViewController in your project, but hold on.

Have you ever thought how to build Slide Out Menu from scratch before?

In this article we’ll learn how to build Slide-Out to use it in your app, so Let’s dive into the code.

First off Make sure you removed Main from Main Interface like that.

Then jump to AppDelegate, in didFinishLaunchingWithOptions, you need to to use the window parameter to show what we’ll be written in ViewController.

Then go to ViewController file, change ViewController super class to UICollectionViewController, and we need to set view, and collectionView to white color.

Let’s create imageView that we’ll use when clicking on to show Slide Out.

Then create handleSlideOut function to move collectionView from left to the right side when clicking on the imageView by adjusting x frame.

And then add Constraints to profilemageView.

Afterthat call this function in ViewDidLoad

Now we need to create SlideOutView class that inherits from NSObject, and create new function called showSlideOut.

In this function, we’ll add animation to collectionView by first Create a variable called blackView, and Add backgroundColor, and alpha to appear when clicking on the profileImageView.

Back to ViewController file to create slideOutView as a closure.

By this closure, you can use it as a reference to call showSlideOut function, and add it in handleSlideOut function.

Now you can show blackView animation when clicking on profileImageView.

So, It’s time to create slideOutViewer to show it on the left side.
Go back to SlideOutView class, and create slideOutViewer closure, and set backgroundColor to white.

So jump to showSlideOut function, and add slideOutViewer reference, Use frame to put the slideOutViewer off-screen at the beginning, and then use animation with Setting x frame’s origin to zero to show the slideOutViewer after that.

When you run your app, you’ll see Slide Out when clicking on the image.

But, How you can hide the slide Out?

The answer is when clicking on the blackView, It should hide the Slide Out.

So, How you can make it?

We need to go back to the showSlideOut function, and Add UITapGestureRecognizer to the blackView.

Now, Let’s create this function.

In this function, we’ll hide the slideOutViewer by bringing the x frame’s origin to -250, and hide blackView by setting alpha to zero in the animate function.

After hiding the slideOutViewer, Now It’s time to get the collectionView back to its place by going to ViewController file, Create dismissView function, and Set collectionView’s x and y frame to zero.

Now to make a connection between two views, you need first create a reference of the ViewController in the SlideOutView class, Let’s name it homeViewController.

Use this reference to call dismissView function that we created it in ViewController file, and add it in DismissSlideOut function.

Go back to ViewController file, and in slideOutView closure, Add this line to give all information about ViewController file to the homeViewController reference that we created before.

That’s it.

Now it’s your turn to build your own one.

Take a look at a project.