Design dribble like UIs in your apps
Side menus used to be a big deal in the 2010s. Especially those that used to come out by sliding right from the side of the screen. How cool were those?
But times change. Design evolves. And that sliding menu doesn’t always look so cool with our modern graphics, right? I mean, imagine a beautifully designed app with just a regular sliding menu. Ugh. Outdated.
The bad news is, sometimes we still need a menu for our users’ navigation. So can we make it fit our app without it looking like it was published a decade ago? I think yes! And if you like the look of my side menu, read on to implement my code with your app to see how it looks, and let me know your feedback!
First off, we will need to set an array of options that we want to include in our side menu. Each option should have a title that the user will see and a correspondent segue to perform upon selection:
This is where they will appear at the end of the tutorial:
Set the view’s background color to your desired color and add a Table View inside of it. This is where our menu options will appear, therefore, you should align it to the left side of the screen and make its width abound half the size of the screen to make sure it is completely visible when the main view moves to the right.
Add a Table View Cell inside your Table View.
Connect the Table View to your view controller and name it
Create a class named
tableViewCell with type
UITableViewCell and add any element you may need for your menu. I will only use a label to display the name of the option.
Assign the class to your Table View Cell.
Just under the Table View Cell’s Identifier, there is a Selection option. It is automatically set to ‘default’. This means that the background of your Cell will turn white upon selection.
I decided to not use that and to set up my own custom selection animation later, therefore, I will change the selection from ‘default’ to ‘none’ to avoid unwanted automatic animations.
Next up, in your view controller, add this code in the
menuTableView.delegate = self
menuTableView.dataSource = self
menuTableView.backgroundColor = .clear
Now, all we need to do is to set up the Table View, which we can do by adding an extension to our View Controller’s class using the following code:
Build the project and make sure your result looks similar to this:
Now that we have created our side menu, it is time to create our main view. The first thing we will need to do is add a view to the storyboard and make it fit the entire screen. Make sure you also set its top, bottom, leading, and trailing constraints to zero.
Customize your view for your app’s purpose. My view will contain an Image View the size of the background with a plant image and alpha set to 0.15 and dummy images and labels as presentation.
Connect your container view to the view controller and name it
The next step is to add gesture recognisers that we will use to recognise when the user is trying to show or hide the side menu. Open the library and add a Tap Gesture Recogniser inside the container view.
Using the same method, add a Swipe Gesture Recogniser to your container view as well.
Once your view is all set, you’re ready for the animation code!
The first thing we will do is set a boolean value to determine when our menu is showing. For now, we will set it to false, until the user swipes to show the side menu:
var menu = false
We will also set a shortcut to the screen’s bounds to make our code slimmer:
let screen = UIScreen.main.bounds
In order to memorise the initial position of the view, we also need to set a property so we can easily go back to it:
var home = CGAffineTransform()
viewDidLoad()home will correspond to the current position of the container view:
home = self.containerView.transform
We are now ready for the animation. I created two different functions, one called
showMenu() and another called
hideMenu(). I will use
CGAffineTransform() to scale the view and move its x position both by 0.8 in an animation that will last 0.7 seconds, and I will use the
home property to quickly move the view back to its initial position:
Connect the Swipe Gesture Recogniser to the View Controller to create an action. This will be the gesture that will trigger the menu to show.
Second, connect also the Tap Gesture Recogniser to the View Controller to create an action that will close the side menu.
Our last step: our Swipe Gesture Recogniser action should be triggered every time the user swipes right while the
menu property is set to
false, which means that the menu is not already showing. When that happens, our
showMenu() function will perform and our
menu property will be set to true.
Contrarily, when our user taps the view when the menu is showing, our Tap Gesture Recogniser will trigger an action that will perform our
hideMenu() function and set our
menu property back to false.
And we’re all done! Now build your project and test it out:
You can download the full code on GitHub!
Did you enjoy this tutorial? Did it work well with your project? Let me know your feedback in the comments down below!
Want to Connect?Follow me on…