MHVerticalTabBarController is a custom vertical tab bar controller that works on iPhone and iPad and allows easy customization.
Objective-C Ruby
Latest commit 5f8e3e7 Apr 9, 2013 @mwhuss Updated image urls
Failed to load latest commit information.
Classes Initial commit Apr 9, 2013
Demo Initial commit Apr 9, 2013
.gitignore Initial commit Apr 9, 2013
LICENSE Initial commit Apr 9, 2013
MHVerticalTabBarController.podspec Initial commit Apr 9, 2013
README.md Updated image urls Apr 9, 2013

README.md

MHVerticalTabBarController

About

MHVerticalTabBarController is a custom vertical tab bar controller that works on iPhone and iPad and allows easy customization.

Screenshot

Installation

Cocopods

cocopods notes Add the following to your Podfile:

pod 'MHVerticalTabBarController'

Manually

Add the MHVerticalTabBarController/Classes folder to your project. Note that this project uses ARC.

Usage

General Usage

The tab bar controller has a viewControllers property that takes an array of UIViewController's.

MHVerticalTabBarController *tabBarController = [[MHVerticalTabBarController alloc] init];
tabBarController.viewControllers = @[vc1, vc2, vc3, vc4];

Setting the width

To change the width of the tab bar use the tabBarWidth property on the tab bar controller. This will change the frame of the tab bar as well as all the child view controller.s

tabBarController.tabBarWidth = 180.0;

Setting the title and image

The tab bar controller uses the child view controllers UITabBarItem to set the title and image on the tab. If title is nil then the image is centered in the tab.

If you'd like the title or image moved around each tab bar button includes a titleOffset and imageOffset property that's based on the center of the tab.

// put the title above the image
[self.tabBarController.tabBar.tabBarButtons enumerateObjectsUsingBlock:^(MHVerticalTabBarButton *button, NSUInteger idx, BOOL *stop) {
    button.titleOffset = CGSizeMake(0, -20);
    button.imageOffset = CGSizeMake(0, 20);
}];

Title attributes

To set the default style for all the title labels use the labelAttributes property on the tab bar which takes an NSDictionary of attributed string attributes.

NSDictionary *attributes = @{ NSForegroundColorAttributeName : [UIColor redColor] };
self.tabBarController.tabBar.labelAttributes = attributes;

Selected background view

The MHVerticalTabBar has selectedBackgroundView property that returns a UIView. By default this has a color, is square, has the same width as the tab bar, and animates when a new tab is selected.

// set animation duration, 0 disables it
self.tabBarController.tabBar.animationDuration = 0.0;
UIView *selectedBackgroundView = self.tabBarController.tabBar.selectedBackgroundView;
UIView *roundedView = [[UIView alloc] initWithFrame:selectedBackgroundView.bounds];
roundedView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
roundedView.frame = CGRectInset(roundedView.frame, 4, 4);
roundedView.backgroundColor = selectedBackgroundView.backgroundColor;
roundedView.layer.cornerRadius = 4.0;
selectedBackgroundView.backgroundColor = [UIColor clearColor];
[selectedBackgroundView addSubview:roundedView];

Selected background view

The tab bar also has a method to use an image as the selected background.

- (void)setSelectedBackgroundImage:(UIImage *)selectedBackgroundImage;

Credits

MHVerticalTabBarController is brought to you by Marshall Huss and contributors to the project. The icons were made by Griffin Moore. If you have feature suggestions or bug reports, feel free to help out by sending pull requests or by creating new issues. If you're using MHVerticalTabBarController in your project, please let me know! I can be reached @mwhuss