UISegmentedControl below UINavigationbar in iOS 7

How do I make a UISegmentedControl as a part of an UINavigationBar below it? Is it connected to the UINavigationBar or is it a complete separate view just added as a subview to the UINavigationController's view controller. Looks like it is part of the UINavigationBar since there is a shadow below the bar.

Solution 1:

It's a simple effect to accomplish.

First, place a segment in a toolbar. Place this toolbar right below the navigation bar. Set the delegate of the toolbar to your view controller, and return UIBarPositionTopAttached in positionForBar:. You can see in the store app, if you perform an interactive pop gesture, that the segment bar does not move the same as the navigation bar. That's because they are not the same bar.

Now to remove the hairline. The "hairline" is an UIImageView that is a subview of the navigation bar. You can find it and set it as hidden. This is what Apple does in their native calendar app, for example, as well as the store app. Remember to show it when the current view disappears. If you play a little with the Apple apps, you will see that the hairline is set to hidden on viewWillAppear: and set to shown in viewDidDisappear:.

To achieve the style of the search bar, just set the bar's searchBarStyle to UISearchBarStyleMinimal.

Solution 2:

Now to remove the hairline. The "hairline" is an UIImageView that is a subview of the navigation bar. You can find it and set it as hidden. This is what Apple does in their native calendar app, for example, as well as the store app. Remember to show it when the current view disappears. If you play a little with the Apple apps, you will see that the hairline is set to hidden on viewWillAppear: and set to shown in viewDidDisappear:.

Another approach would be to look for the hairline and move it below the added toolbar. Here is what I came up with.

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIToolbar *segmentbar;
@property (weak, nonatomic) UIImageView *navHairline;
@end

@implementation ViewController

#pragma mark - View Lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    // find the hairline below the navigationBar
    for (UIView *aView in self.navigationController.navigationBar.subviews) {
        for (UIView *bView in aView.subviews) {
            if ([bView isKindOfClass:[UIImageView class]] &&
                bView.bounds.size.width == self.navigationController.navigationBar.frame.size.width &&
                bView.bounds.size.height < 2) {
                self.navHairline = (UIImageView *)bView;
            }
        }
    }
}

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self _moveHairline:YES];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    [self _moveHairline:NO];
}

- (void)_moveHairline:(BOOL)appearing
{
    // move the hairline below the segmentbar
    CGRect hairlineFrame = self.navHairline.frame;
    if (appearing) {
        hairlineFrame.origin.y += self.segmentbar.bounds.size.height;
    } else {
        hairlineFrame.origin.y -= self.segmentbar.bounds.size.height;
    }
    self.navHairline.frame = hairlineFrame;
}

@end

I also found the Apple NavBar Code Sample (Customizing UINavigationBar) very helpful to resolve this issue.

Also be sure to handle the top border of the UIToolbar, it might show up and you could confuse it with the hairline of the NavBar. I also wanted the UIToolbar to look exactly like the NavBar, you probably want to adjust the Toolbars barTintColor then.

Solution 3:

Here's a Protocol Oriented Swift approach to this particular problem, taking basis on the accepted answer:

HideableHairlineViewController.swift

protocol HideableHairlineViewController {

  func hideHairline()
  func showHairline()

}

extension HideableHairlineViewController where Self: UIViewController {

  func hideHairline() {
    findHairline()?.hidden = true
  }

  func showHairline() {
    findHairline()?.hidden = false
  }

  private func findHairline() -> UIImageView? {
    return navigationController?.navigationBar.subviews
      .flatMap { $0.subviews }
      .flatMap { $0 as? UIImageView }
      .filter { $0.bounds.size.width == self.navigationController?.navigationBar.bounds.size.width }
      .filter { $0.bounds.size.height <= 2 }
      .first
  }

}

SampleViewController.swift

import UIKit

class SampleViewController: UIViewController, HideableHairlineViewController {

  @IBOutlet private weak var toolbar: UIToolbar!
  @IBOutlet private weak var segmentedControl: UISegmentedControl!

  override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)
    hideHairline()
  }

  override func viewDidDisappear(animated: Bool) {
    super.viewDidDisappear(animated)
    showHairline()
  }


}

// MARK: UIToolbarDelegate
extension SampleViewController: UIToolbarDelegate {

  func positionForBar(bar: UIBarPositioning) -> UIBarPosition {
    return .TopAttached
  }

}

Solution 4:

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

Or you can create it programmatically, here is the code in my answer in the other thread Add segmented control to navigation bar and keep title with buttons

Solution 5:

I wanted to do the same thing.. And got this:

1 - UINavigationBar subclass

//-------------------------
// UINavigationBarCustom.h
//-------------------------
#import <UIKit/UIKit.h>

@interface UINavigationBarCustom : UINavigationBar

@end


//-------------------------
// UINavigationBarCustom.m
//-------------------------
#import "UINavigationBarCustom.h"

const CGFloat MyNavigationBarHeightIncrease = 38.f;

@implementation UINavigationBarCustom


- (id)initWithCoder:(NSCoder *)aDecoder {
    
    self = [super initWithCoder:aDecoder];
    
    if (self) {
        [self initialize];
    }
    
    return self;
}

- (id)initWithFrame:(CGRect)frame {
    
    self = [super initWithFrame:frame];
    
    if (self) {
        [self initialize];
    }
    
    return self;
}

- (void)initialize {
    // Set tittle position for top
    [self setTitleVerticalPositionAdjustment:-(MyNavigationBarHeightIncrease) forBarMetrics:UIBarMetricsDefault];
}

- (CGSize)sizeThatFits:(CGSize)size {
    // Increase NavBar size
    CGSize amendedSize = [super sizeThatFits:size];
    amendedSize.height += MyNavigationBarHeightIncrease;
    
    return amendedSize;
}

- (void)layoutSubviews {
// Set buttons position for top
    [super layoutSubviews];
    
    NSArray *classNamesToReposition = @[@"UINavigationButton"];
    
    for (UIView *view in [self subviews]) {
        
        if ([classNamesToReposition containsObject:NSStringFromClass([view class])]) {
            
            CGRect frame = [view frame];
            frame.origin.y -= MyNavigationBarHeightIncrease;
            
            [view setFrame:frame];
        }
    }
}

- (void)didAddSubview:(UIView *)subview
{
    // Set segmented position
    [super didAddSubview:subview];
    
    if ([subview isKindOfClass:[UISegmentedControl class]])
    {
        CGRect frame = subview.frame;
        frame.origin.y += MyNavigationBarHeightIncrease;
        subview.frame = frame;
    }
}

@end

2 - Set your NavigationController with subclass

3 - Add your UISegmentedControl in navigationBar

4 - Run and Fun ->do not forget to put the same color on both

searching source:

Hacking UINavigationBar

S.O question