January 4, 2014

SBScrollViewNavigation – Component

Last year I created something called the SBScrollViewNavigation and that I have not properly documented until now. Basically the whole thing is an alternate way of navigating between views that share the same structure, but show different content. A news app having different news categories would be an example for the style of navigation I had in mind while creating it.


Originally I used it for a client of mine:, but then decided to open source it as well.

SBScrollNavigation in action

SBScrollNavigation in action – This is how the component looks in the app Stadtmagazin

Alright then, lets jump right into it and get you the source and all setup.

How to get it

You can find the source code on Github: Download, clone or fork it like you want. The component is under the MIT licence.

How to use it

Basic setup

The component has been implemented to support both Storyboard and code init. The easiest way to integrate is as done in the demo, using the Storyboard.

Create a UIViewController + Storyboard and let it implement the SBScrollNavigationDelegate protocol defined in the SBScrollNavigation.h. Then just drag a UIView into your Storyboard and assign it the class SBScrollNavigation and refer the menuDelegate to your UIViewController. This is how it should look like in your Storyboard:

Make sure to let your UIViewController implement the SBScrollNavigationDelegate

Protocol methods

The SBScrollNavigationDelegate consists of 4 methods of which 3 are optional.

// gets the number of menu items (needs to be implemented)
- (NSInteger) numberOfMenuItems;

// either use a view for your menu items
- (UIView *) scrollView:(SBScrollNavigation *)scrollView viewForMenuIndex:(NSInteger) index;

// Or use a button
- (NSString *) scrollView:(SBScrollNavigation *)scrollView titleForMenuIndex:(NSInteger) index;

// Get notified, when a menu Item is selected
- (void) scrollView:(SBScrollNavigation *)scrollView menuItemSelectedAtIndex:(NSInteger) index;


Make the “numberOfMenuItems” return the number of items you want in your navigation. Then there is either the possibility of just going with the standard view used for the navigation links and returning a text for it “scrollView:titleForMenuIndex:”, or you can create your own view: “scrollView:viewForMenuIndex:”. It’s important that you only implement one of these two methods.

Last but not least, you can get notified when the user selected a button in the navigation: “scrollView:menuItemSelectedAtIndex:”. I highly recommend implementing that method, since otherwise there is no way finding out which item the user selected and therefore you can’t react to user input :)

Wrapping up

That’s all folks. I hope this helps implementing my component. If you have any questions, please have a look at the demo code, comment or write an email.



Would you like to share your thoughts?

Would you like to share your thoughts?

Leave a Reply