ECSlidingViewController for sidebar

Nowadays even though Apple does not really support sidebars as they encourage tab instead but a lot of apps still prefer to use this approach. There are a lot sidebar libraries in cocoapods but in the end I choose:

ECSlidingViewController

ECSlidingViewController is a view controller container that manages a layered interface. The top layer anchors to the left or right side of the container while revealing the layer underneath it. This is most commonly known as the “Side Menu”, “Slide Out”, “Hamburger Menu/Drawer/Sidebar”, etc…

ecslidingvc0

*image source here*

WHERE

Link: http://cocoadocs.org/docsets/ECSlidingViewController/2.0.3/

HOW

Install with CocoaPods by adding the following to your Podfile:

platform :ios, '7.0'
pod 'ECSlidingViewController', '~> 2.0.3'

WHY

1.   Clear example codes project to explain the functionality of the libraries

  • BasicMenu. Complete example using Storyboards with minimal code.
  • LayoutDemo. This is a universal app showcasing the layout.
  • TransitionFun. See how custom transitions are done.

2.  Has been around for some time thus most of the functionalities you need are provided. (You can still choose to extend from there in case you need more methods). Pan gesture and tap gesture on outside of the sidebar’s frame will auto-close sidebar are also provided. 3.  Properties can be set in the storyboard or via code. ( At rootViewController)

STORYBOARD:

ecslidingvc1

CODE:

    //Set the width of the sidebar for both sides
    [self.slidingViewController setAnchorRightRevealAmount:300.0f];
    [self.slidingViewController setAnchorLeftRevealAmount:300.0f];

    //Specifies the behaviour for the under left width
    //By default, this is set to ECFullWidth    
    self.slidingViewController.underLeftWidthLayout = ECFullWidth;

for more properties settings, you can refer it here: http://cocoadocs.org/docsets/ECSlidingViewController/0.10.0/Classes/ECSlidingViewController.html

OTHER USEFUL CODES:

  1. If you need to fully set your right view controller (right menu) not to be covered by the top view controller (main view) like the picture below:

ecslidingVC2

// don't go under the top view and the status bar
self.edgesForExtendedLayout = UIRectEdge.Bottom | UIRectEdge.Right; 

2. Show sidebar when clicked menu button – you need to have this function at your menu side bar first

    //MARK: IBAction
    @IBAction func unwindToMenuViewController(segue: UIStoryboardSegue) {   
--yes, leave it empty -- 
}

ecslidingvc3

COMPARISON

I used SWRevealViewController for sidebar but I found that this library is meant for more stacked sidebar rather than normal sidebar.

There is one flaw gives me a big headache which is when you implemented left and right sidebar and you open the right sidebar and try to swipe right quickly(with right sidebar still open) and you won’t stop at the top view controller but you’ll straightaway landed on left sidebar. This happened obvious in real device than simulator.

I’m using RSStoryboardLink to further breakdown my main storyboard to be more organised and maintainable but I’m having a hard time getting the sidebar and navigation bar work together inside out of sub-storyboard.

In conclusion, if you don’t mind the left right sidebar issue (my client was super nasty with it) and you need the stack sidebar and not normal sidebar, you can still use this libray.

Hope you enjoy! Cheers.

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