The Swift project uses Swrevealviewcontroller to implement the Sideslip menu _swift

Source: Internet
Author: User

As always, let's 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 the Slide menu.

The Sideslip menu we're going to implement is probably like this:

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

Create a new Xcode project
The main purpose of this article is to explain the implementation of the Sideslip menu, so in order to save your time, you can download the Xcode template directly to start learning.

This project has created a Storyboard that contains all the view controllers we need. If you have already downloaded the template, open Storyboard first to see.


To use Swrevealviewcontroller to implement the Sideslip menu, you need to have a controller to do the container and use it to store the menu controller and a set of content controllers. I've created a menu controller for you, it's a static list view with three lines of content. The corresponding three content controllers are available to display news, maps, and photos separately. Since this demo is only for demonstration purposes, content controllers are placed in static content. All the used icons and picture resources are already included in the project (note: Thanks to the Pixeden website for the free icon).

Then start using Swrevealviewcontroller
According to the above, we need to use Swrevealviewcontroller to achieve the Sideslip menu. First download the class library from the GitHub and unzip the zip file. After decompression you can find the Swrevealviewcontroller folder, which contains two files. Select Sidebarmenu in the Engineering directory, click the right mouse button, select "New Group", named "Swrevealviewcontroller", drag the two files mentioned above to Swrevealviewcontroller here. After you have just finished adding these two files, Xcode will prompt, whether to configure a header file that connects Objective-c code, and with this header file, you can turn the OBJECTIVE-C code into Swift code to use. 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 content) and post (menu bar) View Controllers
Swrevealviewcontroller has built-in support for Storyboard. All you have to do is connect the front and back controls with the Swrevealviewcontroller with the segue. The front controller is used to display the content of the main controller, in our Storyboard corresponding to the news controller is connected to the navigation controller. The rear controller is the controller used to display the navigation menu, which corresponds to the Sideslip menu bar.

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


Then, hold down the control key-the left mouse button is dragged from the Swrevealviewcontroller to the menu controller, the release button regrets displaying a Select Segue Type menu, where select "Reveal View Controller set Controller ".


This creates a segue, selects the segue to set its identifier to "sw_rear", so that Swrevealviewcontroller knows it corresponds to the back controller, and the menu is hidden behind the content view.

Next, use the same method to associate the Swrevealviewcontroller with the navigation controller for 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 a front controller.
Go ahead and run your App, it should be able to display the news view normally. But you can't move the menu bar by clicking a button or sliding view, because we haven't yet implemented these features.

If the program works 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 of the child controllers; It also provides a call Revealtoggle: The way to show/hide the menu bar, and finally we added a gesture.

Now you can either click on the button to control the Sideslip menu, or slide the area of the content view to control the Sideslip menu; run the simulator and try it.

Click event to add sideslip menu
So far, we haven't configured any segue for the menu bar, so no matter which menu you click, the APP will never switch to the same view.

So, now we're going to open Storyboard again. First select the Map cell, press and hold control key-the left mouse button dragged to the map controller corresponding to the navigation controller, and then select "Reveal View Controller push controller". The same is done for the news cell and photo cell, although the corresponding controller is connected to it.


Then, in the Mapviewcontroller.swift and photoviewcontroller.swift two files, the corresponding inserts the following code:

If Self.revealviewcontroller ()!= nil {
 menubutton.target = Self.revealviewcontroller ()
 menubutton.action = " Revealtoggle: "
 Self.view.addGestureRecognizer (Self.revealviewcontroller (). Pangesturerecognizer ())
}

Ok! Run it up and take a look.

Custom Style
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 the value of the Rearviewrevealwidth property. Try inserting the following code into the Viewdidload method of the Newstableviewcontroller.swift file:

Self.revealviewcontroller (). Rearviewrevealwidth = 62
After running the App you'll see the result:


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

In fact, it's just one of many ways to implement the Sideslip menu, you can also try to start with a blank project, use a custom animation, or look for other open source libraries to implement, such as Enswiftsidemenu.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.