Slideout Menu

To add a sliding menu, start a new view controller with the data that will be displayed on app start.

Add a UIView and adjust visuals. Set that views Leading constraint to -width. (The width of the UIView, but negative). This puts the view just off the screen, if it is aligned to 0 leading.

 

This slideshow requires JavaScript.

Add Outlets for the menu view, and the leading constraint of the Menu view.

For ease, you may consider adding a variable that keeps track of weather or not the view is showing.

In the ViewDidLoad, the shadowOpacity and the shadowRadius make the menu view look as if it is sitting on top of the main view.

Screen Shot 2017-05-31 at 1.48.46 PM

The main view is embedded in a navigation controller, so you can add a bar button item to the nav bar and give it this functionality.

Basically, if the view is showing, make sure the leading constant value is set to 0, or the showing position, and then animate the view onto the screen using the layoutIfNeeded function. This functions essentially just forces the subviews to be set out.

Otherwise, (when the button is pressed again, and the bool is currently false) set the constraint to -300 (this is actually greater than the width of my UIView because the width does not include the pixels created by the shadow), then we animate it out just like before.

at the very end of the function, we basically say, no matter what the value is, if the button was pressed, make the bool the opposite now. This eliminates only a couple lines of code from out if statement, but it’s nice and concise.

Screen Shot 2017-05-31 at 1.48.53 PM

Boom, sliding menu is complete.

If none of this makes sense, see this video. He’s incredible.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s