Cloudiee
Cloudiee

Reputation: 23

How to create a Tab Bar appear on the left instead of the Bottom/Top?

Hey guys here is my dilemma. I am trying to create a tab bar that spans top to bottom anchored at the left side instead of left to right anchored at the bottom. I created a toolbar item that places the bar exactly where I want it but I want the tab bar to be the same, with the same functionality except of course with the hairline in place, and the bar items lining up top to bottom.

This is my code for the tool bar, I know the tab bar will be coded similarly, I just hit a slump.

UIToolbar *toolBarLeft = [[UIToolbar alloc] init];
toolBarLeft.frame = CGRectMake(0, 20, 50, 568);
toolBarLeft.layer.borderColor = [UIColor lightGrayColor].CGColor;
toolBarLeft.layer.borderWidth = 0.5f;
[self.view addSubview:toolBarLeft];

I appreciate the help guys!

Upvotes: 1

Views: 1585

Answers (1)

nhgrif
nhgrif

Reputation: 62062

The gist of what you need to do is this:

  1. Subclass UITabBarController.
  2. Make sure the default tabBar property's hidden property gets set to YES (so its hidden) and stays that way.
  3. Add any custom view you want to use as the tabbar to this subclass's view property (just as you'd add a view as a subview to a UIViewController).

The subview you add in step 3 should respond to touches and have a delegate property. The UITabBarController subclass should delegate the view so it can respond to different tabs being selected (as well as many other things).

As long as the navigation is logical and easy to understand, your app won't be rejected simply for modifying how a tab bar works.


ADDENDUM:

For step 3, given you want tabs stacked vertically, I'd actually recommend a UITableView subclass where the value returned from tableView:heightForRowAtIndexPath: is calculated something like this:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath*)indexPath {
    CGFloat totalHeight = tableView.frame.size.height;
    CGFloat totalTabs = (CGFloat)[tableView numberOfRowsInSection:0];
    return totalHeight/totalTabs;
}

And scrolling is disabled.

Because now when tableView:didSelectRowAtIndexPath: is fired, we can tell the tab bar controller: tabBarController.selectedIndex = indexPath.row;

Upvotes: 1

Related Questions