Add segmented control to navigation bar and keep title with buttons

Question

I want to add segmented control to the navigation bar but also keep the title and buttons, like in iOS 7 Appstore purchased section (example)

I have tried adding segmented control as title view and then using prompt as the title, but then the buttons are on the same level as segmented control.

As I wrote I have tried adding segmented control as title view and using navigation bars prompt to set the title, however the buttons are off then. — sangi93, Sep 15 '13 at 15:31

score 15 · Answer 1 · answered Oct 18 '13 at 19:28

I found two solutions:

1) As suggested by neural5torm, you can add the segmented control to an UIView with the same background color of the navigation bar

You can remove UINavigationBar's hairline in this way:

for (UIView *view in self.navigationController.navigationBar.subviews)
{
    for (UIView *view2 in view.subviews)
    {
        if ([view2 isKindOfClass:[UIImageView class]])
        {
            [view2 removeFromSuperview];
        }
    }
}

This is ok for not translucent navigation bar.

If you want a translucent navigation bar:
2) Subclass UINavigationBar to create a taller bar by overriding sizeThatFits

- (CGSize)sizeThatFits:(CGSize)size
{
    size.width = self.frame.size.width;
    size.height = your height (probably 88.0f);
    return size;
}

To use your custom navigation bar:

UINavigationController *navController = [[UINavigationController alloc] initWithNavigationBarClass:[YouNavigationBar class] toolbarClass:nil];
[navController setViewControllers:@[viewController]];

Title and button items will be at the bottom. Adjust their vertical positions (in the init of your custom navigation bar or via appearance proxy)

// Title view
[self setTitleVerticalPositionAdjustment:-dy forBarMetrics:UIBarMetricsDefault];

// Button item as icon/image 
[[UIBarButtonItem appearanceWhenContainedIn:[YourCustomNavigationBar class], nil] setBackgroundVerticalPositionAdjustment:-dy forBarMetrics:UIBarMetricsDefault];

Look at the UIBarButtonItem class reference, there are also setTitlePositionAdjustment and other methods for back button

When you create your segmented control, add it to the navigation bar

[self.navigationController.navigationBar addSubview:segmentedControl];

The segmented control will be at the top. Adjust its vertical position by overriding didAddSubview in your custom navigation bar

- (void)didAddSubview:(UIView *)subview
{
    [super didAddSubview:subview];

    if ([subview isKindOfClass:[UISegmentedControl class]])
    {
        CGRect frame = subview.frame;
        frame.origin.y += your extra height (probably 44.0f);
        subview.frame = frame;
    }
}

I followed your instructions and was able to add any view to the nav bar but unfortunately I wasn't able to interact/click any of the subviews. I'm doing it on a UITableViewController. — Fouad, Jun 21 '15 at 12:35

score 14 · Accepted Answer · answered Sep 15 '13 at 16:30

14

I have tried solving your problem using another approach since using a navigation bar only didn't seem to work out (maybe it's because the AppStore app is using a private api but I'm not knowledgeable enough to tell for sure...) Anyway I simply used a toolbar placed just underneath the navigation bar on which I added a segmented control, all inside a regular UIViewController.

This is what it looks like in Storyboard:

And this is the result in Simulator:

Simulator

Just be careful to offset the table view down to account for the vertical space used up by the toolbar. Hope this helps!

answered Sep 15 '13 at 16:30

neural5torm

773
1
9
21

6

I've thought about this before and the only problem I have with this approach is the horizontal seam between navigation bar and segmented control. – sangi93 Sep 15 '13 at 16:46
Indeed, this is the main issue. If you come up with a better solution please create an answer with your findings. Thanks – neural5torm Sep 15 '13 at 17:25
I got rid of it with a hack to hide the subview that is the background and building a custom view that is a nav-bar in a taller nav-bar to get the alignment of the cells to the top. I don't know what constraints need to be added to the subviews but it could also be done that way as well and remove the nested nav-bar from my implementation. – cynistersix Oct 07 '13 at 16:48

score 9 · Answer 3 · answered Oct 12 '14 at 12:36

You can find navigation bar with UISegmentedControl in Apple Sample Code: https://developer.apple.com/library/ios/samplecode/NavBar/Introduction/Intro.html

Here is my interpretation of this code (create programmatically):

// File MySegmController.h
@interface MySegmController : UIViewController
@end

// File MySegmController.m
#import "MySegmController.h"

@interface MyNavBarView : UIView
@end

@interface MySegmController ()<UITableViewDataSource, UITableViewDelegate>
{
    UISegmentedControl* _segm;
    UITableView* _table;
}
@end

#define SEGM_WIDTH 250

@implementation MySegmController

- (void)loadView
{
    [super loadView];
    self.view.backgroundColor = [UIColor whiteColor];
    self.title = @"Title";

    float w = self.view.bounds.size.width;

    NSArray* items = [[NSArray alloc] initWithObjects: @"One", @"Two", @"Three", nil];
    _segm = [[UISegmentedControl alloc] initWithItems: items];
    [items release];
    [_segm sizeToFit];
    _segm.frame = CGRectMake((w - SEGM_WIDTH) / 2, 0, SEGM_WIDTH, _segm.bounds.size.height);
    _segm.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleRightMargin;
    _segm.selectedSegmentIndex = 0;

    MyNavBarView* topView = [[MyNavBarView alloc] initWithFrame: CGRectMake(0, 0, w, _segm.bounds.size.height + 10)];
    topView.backgroundColor = [UIColor whiteColor];
    topView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    [topView addSubview: _segm];
    [_segm release];

    _table = [[UITableView alloc] initWithFrame: CGRectMake(0, topView.bounds.size.height, w, self.view.bounds.size.height - topView.bounds.size.height) style: UITableViewStylePlain];
    _table.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    _table.dataSource = self;
    _table.delegate = self;
    [self.view addSubview: _table];
    [_table release];

    // add topView AFTER _table because topView have a shadow
    [self.view addSubview: topView];
    [topView release];
}

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.navigationBar.translucent = NO;
    // pixel_transp.png - 1x1 image with transparent background
    self.navigationController.navigationBar.shadowImage = [UIImage imageNamed: @"pixel_transp"];
    // pixel.png - 1x1 image with white background
    [self.navigationController.navigationBar setBackgroundImage: [UIImage imageNamed: @"pixel"] forBarMetrics: UIBarMetricsDefault];

    UIBarButtonItem* bt = [[UIBarButtonItem alloc] initWithBarButtonSystemItem: UIBarButtonSystemItemCancel target: self action: @selector(onCancel)];
    self.navigationItem.rightBarButtonItem = bt;
    [bt release];
}

- (void)onCancel
{
    [self.presentingViewController dismissViewControllerAnimated: YES completion: NULL];
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return 2;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell* cell = [tableView dequeueReusableCellWithIdentifier: @"MyId"];
    if (!cell) cell = [[[UITableViewCell alloc] initWithStyle: UITableViewCellStyleDefault reuseIdentifier: @"MyId"] autorelease];
    cell.textLabel.text = @"text";
    return cell;
}

@end

@implementation MyNavBarView

- (void)willMoveToWindow: (UIWindow *)newWindow
{
    self.layer.shadowOffset = CGSizeMake(0, 1.0f / UIScreen.mainScreen.scale);
    self.layer.shadowRadius = 0;
    self.layer.shadowColor = [UIColor blackColor].CGColor;
    self.layer.shadowOpacity = 0.25f;
}

@end

How does this work when the segmentedControls shows three different viewControllers? — koen, Jul 12 '15 at 14:05
We don't show different viewControllers in this code: we just change _table contents when you select another item in segmentedControl — pigmasha, Aug 01 '15 at 12:47
Yes, that makes sense. Coincidentally, I actually posted a question about my issue an hour ago: http://stackoverflow.com/questions/31761396/uinavigationbar-with-uisegmentedcontrol-partially-covers-childviews — koen, Aug 01 '15 at 13:10
None of the solutions I've seen strike me as particularly elegant (including Apple's), but using Apple's approached seemed the safest. In Apple's sample code, I used EnhancedNavBarView and replaced the label with a segmented control. — davew, Feb 03 '16 at 18:26

score 8 · Answer 4 · answered Aug 10 '15 at 12:50

8

You could use navigation item Prompt property for this. Just set the property in storyboard like this and the navigation bar will automatically fade up and down nicely. Only downside is the text is kinda small.

answered Aug 10 '15 at 12:50

Zeezer

1,503
2
18
33

score 2 · Answer 5 · answered Sep 26 '13 at 13:50

2

I tried to do it in Xamarin.iOS, from iOS 6, you can inherit UINavigationBar and add controls, button where you want.

answered Sep 26 '13 at 13:50

Michal Dobrodenka

1,104
8
27

score 2 · Answer 6 · answered Nov 12 '13 at 11:20

2

Try to create UINavigationBar subclass and let it conform to UIToolbarDelegate protocol. Then in -init method create your segment control, add it on UIToolBar and set its delegate to your custom UINavigationBar class. Then write this magic:

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar {
    return UIBarPositionTopAttached;
}

Good luck!

answered Nov 12 '13 at 11:20

user1403629

41
3

Can you expand on this? Are you suggesting creating a `UIToolbar`, adding it as a subview to the `UINavigationBar`, and adding a `UISegmentedControl` to the toolbar? If not where does the toolbar get added? – Jordan H Jul 18 '15 at 16:27

score 1 · Answer 7 · edited Jun 08 '17 at 19:44

My solution was this:
Add Toolbar and Segmented control to your xib file. Customize it as you need and connect it to an outlet of your view controller:

enter image description here

Then, put this in the viewDidLoad method:

- (void)viewDidLoad
{
    [super viewDidLoad];

    // add after your setup code
    UIBarButtonItem *item = [[UIBarButtonItem alloc] initWithCustomView:self.segmentedControl];

    self.navigationItem.rightBarButtonItem = item;
}

enter image description here

score 0 · Answer 8 · answered May 14 '14 at 16:49

I haven't fully implemented it but the following is what I plan to do. (ios7) This would be for having title and the buttons on the same nav bar side by side.

In storyboard, add a blank view to the navigation bar. Then add a label and a segmented control to that view. This allows you to add any control you want to the nav bar. So far the UI works, just haven't wired it up. Just wanted to share what I have found so far.

Add segmented control to navigation bar and keep title with buttons

8 Answers8

Linked