Tabbed-style UINavigationBar iOS 8

Question

In a UIViewController, I'd like to show two tabs in a UINavigationBar. I want the UINavigationItems to have similar behavior to UITabBarItems in a UITabBarController. I want the NavBar to be visible in both view controller tabs, and I want to change the color of the tab title in the navBar if the tab is selected.

Is there a simple and elegant way to conveniently set text/selectedText or image/selectedImage and create UINavigationItems that have behavior similar to UITabBarItems, including the ability to have the nav bar space the items out evenly, just like in a UITabBarController?

It would be great if I could set this like it can be done in a tabBar: UITabBarItem *tabBarItem = [[UITabBarItem alloc] initWithTitle:title image:titleBlack selectedImage:titleRed];

The goal is to have two tabs, that change color if they are selected and they would be evenly spaced across the bar. I know I could do something simple like add two items to a navBarArray, but in order to have them spaced evenly across the bar for all screen widths, how would I do that? Is there an elegant solution?

This example shows the first tab selected. If I select the 2nd tab, I want Tab2 to be red and Tab1 to be black. This is just text, but if I have to create an image to accomplish this, I will.

This question is not a duplicate of the many questions on S.O. that are referring to displaying both a UITabBarController and a UINavigationController in the same app. This is different because I don't want a UITabBarController(I already have one that does something else- but I don't want to overcomplicate my question)- I just want to mimic this behavior, inside of a UINavigationBar. Please please please do not tell me I shouldn't do it this way. That's just another way to say "I don't feel like helping you figure this out."

I've tried looking for clean, simple, elegant solutions. I haven't found any. A complete example would be appreciated. Thanks =)

Answer 1

I came up with a solution that works well enough for me. I created a custom label with 2 buttons and a view with a height of 1 to act as a separator. I moved the UITableView down to pin the top of it to the UIView You could easily add more buttons if you desire to have more than 2.

1. In the viewDidLoad method: self.navigationController.navigationBarHidden = YES;

2. In viewDidAppear method: [self.navigationController setNavigationBarHidden:YES animated:YES];

3. Create a custom UILabel, pin the leading, top, and trailing to the superView, and set the desired height constraint.

4. Create a custom UIViewwith a height constraint of 1 (to act as the visual separator between the custom Navigation Bar and UITableView, pin the trailing and leading edges to the superView, and pin the bottom space of the UIView to the bottom space of the custom UILabel. Set the desired color for the separator.

5. Create two UIButtons, drag them into the label, and set these constraints:

   -pin the UIButton center Y's to the center Y of the UILabel

   -pin Button1's trailing to Button2's leading edge to each other and to the horizontal center of the superview

   -Pin Button 1's leading and Button2's trailing to the superView

   -Pin the top of the UITableView to the bottom of the UILabel

6. Set the UIButton color to change when selected, and set their targets as you would with any UIButton

Add any missing constraints in case I forgot to mention some.

Here is what it looks like: