Implement a slide-out menu in a Swift project-take advantage of Swrevealviewcontroller

You can write a side-by-side menu entirely yourself, but now there's a lot of free open source libraries on GitHub, and if you don't have a special requirement, you don't have to create a new wheel.

The third-party library I'm using here is named Swrevealviewcontroller, and the author is John Lluch. This free class library provides a quick and easy way to add a side-slip menu to your App, and it also offers a number of personalized settings. It is written in objective-c, but we can also easily use it in the Swift project. You can learn how to use it in minutes.

First, let's see what our Demo looks like.

As always, we'll create a Demo App to show you how to use Swrevealviewcontroller. The Demo is simple and functionally imperfect, and the main purpose is to guide you through how to implement a slide-off menu.

The side-slip menu We're going to implement is probably like this:

• Users can click the list button in the upper left corner to display the slide-out menu
• Users can also right-slide the content view to display the slide-out menu
• When the side-slip menu is displayed, the user can click the list button again to close it
• The user can also left-swipe the content area to close it

Create a new Xcode project

The main purpose of this article is to explain the implementation of the side-slip menu, so in order to save your time, you can download the Xcode template directly to start learning.

The project has created a Storyboard that contains all the view controllers we need. If you have already downloaded the template, open the Storyboard and look at it first.

To use Swrevealviewcontroller to implement a side-by-side menu, you need a controller to make a container for storing the menu controller and a set of content controllers. I've created a menu controller for you, which is a static list view with three lines of content. There are three content controllers to display news, maps, and photos, respectively. Given that the demo is only for demonstration purposes, the content controller places static content on it. All the icons and picture resources used are included in the project (note: Here you need to thank the Pixeden website for the free icon).

Next start using Swrevealviewcontroller

According to the above, we will use Swrevealviewcontroller to implement the side-slip menu. First, download the class library from GitHub and unzip the zip file. After decompression you can find the Swrevealviewcontroller folder, this folder contains two files. In the project directory, select Sidebarmenu, right-click, select "New Group", named "Swrevealviewcontroller", the above mentioned two files dragged to Swrevealviewcontroller here. After you've just added these two files, Xcode pops up a prompt to configure a header file that connects to the Objective-c code, and with this header file, you can use the Objective-c code as a Swift code. So, click Yes to continue.

Xcode then generates a file named "Sidebarmenu-bridging-header.h", opens the file and copies the following code:

    #import "SWRevealViewController.h"

Configure front (display) and post (menu bar) View Controllers

The Swrevealviewcontroller has built-in support for Storyboard. All you need to do is connect the front and rear controller with the Swrevealviewcontroller with the Segue. The front controller is the main controller used to display the content, and in our Storyboard, the navigation controller is connected to the news controller. The rear controller is the controller used to display the navigation menu, which corresponds to the side-slip menu bar.

To open the Storyboard, first select the empty controller (container) and set its class to Swrevealviewcontroller.

Then, control-Drag the left mouse button from the Swrevealviewcontroller to the menu controller, release the button to regret the display of a select Segue type of menu, here Select "Reveal View Controller set Controller ".

This creates a Segue and selects the Segue to set its identifier to "Sw_rear", so Swrevealviewcontroller knows that it corresponds to the rear controller, which is hidden behind the content view.

Next, use the same method to connect the Swrevealviewcontroller and the navigation controller corresponding to the news controller, and also select the "Reveal View Controller set Controller" option.

Set this Segue identifier to "Sw_front" and tell Swrevealviewcontroller this is the front controller.

Before continuing, run your App and it should be able to display the news view normally. But you can't get the menu bar out by clicking the button or the slide view, because we haven't implemented these features yet.

If the program is working properly, we continue with the following steps. Open Newstableviewcontroller.swift and insert the following code in the Viewdidload method:

if self.revealViewController() != nil {    menuButton.target = self.revealViewController()    menuButton.action = "revealToggle:"    self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())}

Swrevealviewcontroller provides a method called revealViewController（） to get the parent controller Swrevealviewcontroller from any child controller; It also provides a revealToggle: method called to show/hide the menu bar, Finally, we added a gesture.

Now you can either click the button to control the slide-in menu, or you can slide the area of the content view to control the slide-off menu; Run the simulator and try it out.

Add a click event for the slide-out menu

Until now, we have not configured any Segue for the menu bar, so no matter which menu item you click, the APP will never switch to the matching view.

Well, now we open the Storyboard again. First select the Map cell, hold down the Control key-Drag the left mouse button to the corresponding navigation controller of the map controller, and select "Reveal View Controller push controller". The same operation is done for news cells and photo cells, but they correspond to the respective controllers when connected.

Then, in the Mapviewcontroller.swift and photoviewcontroller.swift two files, the corresponding code is also inserted:

if self.revealViewController() != nil {    menuButton.target = self.revealViewController()    menuButton.action = "revealToggle:"    self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())}

Ok! Run up and look at it.

Custom styles

Swrevealviewcontroller provides a number of ways to configure the style of the menu bar.

For example, if you want to change the width of the menu bar, you can update rearViewRevealWidth the value of the property. Try inserting the following code in the Newstableviewcontroller.swift file viewDidLoad method:

self.revealViewController().rearViewRevealWidth = 62

After running the App you will see the result:

More parameter settings, you can go to the file SWRevealViewController.h inside to explore.

Summarize:

In this blog, I took you with Swrevealviewcontroller and showed you how to implement a slide-off menu in Swift Engineering. In fact, this is just one of many ways to implement a side-by-side menu, you can also try to start writing from an empty project, use a custom animation to do it, or find other open source libraries to implement, such as Enswiftsidemenu.

Finally, you can download the final code from here.

Translated from

Creating a Sidebar Menu Using Swrevealviewcontroller in Swift

Implement a slide-out menu in a Swift project-take advantage of Swrevealviewcontroller