iOS7 - Change UINavigationBar border color

Question

Is it possible to change the grey border-bottom color of the UINavigationBar in iOS7?

I already tried to remove to border, but this is not working:

[         


        

Answer 1

Based on the answer from @sash I made an extension in Swift using Autolayout, explained right here.

In essence, the other solutions have the following pitfalls:

• Cannot add dropshadow if using the UIImage solution
• The subview added doesn't resize upon rotation of the view

extension UINavigationBar {

  func setBottomBorderColor(color: UIColor, height: CGFloat) -> UIView {

    let bottomBorderView = UIView(frame: CGRectZero)
    bottomBorderView.translatesAutoresizingMaskIntoConstraints = false
    bottomBorderView.backgroundColor = color

    self.addSubview(bottomBorderView)

    let views = ["border": bottomBorderView]
    self.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[border]|", options: [], metrics: nil, views: views))
    self.addConstraint(NSLayoutConstraint(item: bottomBorderView, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: height))
    self.addConstraint(NSLayoutConstraint(item: bottomBorderView, attribute: .Bottom, relatedBy: .Equal, toItem: self, attribute: .Bottom, multiplier: 1.0, constant: height))    

    return bottomBorderView
  }
}

This let you still add a drop shadow if you need to, and this handles rotation nicely !

Answer 2

Picture 1

you can use Reveal to see the border color is the UIImageView's backgroundColor. so directly modifying the imageView's backgroundColor or hide it.

the code: i write in @interface QdtTabBarController : UITabBarController

Class backGroundClass = NSClassFromString(@"_UIBarBackground");
for (UIView *view in self.tabBar.subviews) {
    if ([view isKindOfClass:backGroundClass]) {
        for (UIView *view2 in view.subviews) {
            if ([view2 isKindOfClass:[UIImageView class]]) {
                dispatch_async(dispatch_get_main_queue(), ^{
                    view2.backgroundColor = [UIColor redColor];
                });
            };
        };
        break;
    }
}

Picture 2

Answer 3

The only way I found to change color is:

override func viewDidLoad() {
    super.viewDidLoad()

    if let navigationController = self.navigationController {
        let navigationBar = navigationController.navigationBar
        let navigationSeparator = UIView(frame: CGRectMake(0, navigationBar.frame.size.height - 1, navigationBar.frame.size.width, 0.5))
        navigationSeparator.backgroundColor = UIColor.redColor() // Here your custom color
        navigationSeparator.opaque = true
        self.navigationController?.navigationBar.addSubview(navigationSeparator)
    }

}

Answer 4

You are removing the shadow but not the border, you need to do the following:

[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];

To change the border use an image of 2 pixels width line:

[[UINavigationBar appearance] setShadowImage:[UIImage imageNamed:@"2pxWidthLineImage"]]; 

Answer 5

If you like simple and hacky solutions like I do, create a view that covers the default border:

UIView *navBarLineView = [[UIView alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.navigationController.navigationBar.frame),
                                                                  CGRectGetWidth(self.navigationController.navigationBar.frame), 1)];
navBarLineView.backgroundColor = [UIColor redColor];
[self.navigationController.navigationBar addSubview:navBarLineView];

Answer 6

Well, if you want to remove bottom border you set shadow image to empty image

[navigationBar setShadowImage:[UIImage new]];

so if you want to set it to another color just create image with that color, I use a helper function to create image from color below (original source http://jslim.net/blog/2014/05/05/ios-customize-uitabbar-appearance/)

+ (UIImage *)imageFromColor:(UIColor *)color forSize:(CGSize)size 
{
return [UIImage imageFromColor:color forSize:size withCornerRadius:0];
}

+ (UIImage *)imageFromColor:(UIColor *)color forSize:(CGSize)size     withCornerRadius:(CGFloat)radius
{
CGRect rect = CGRectMake(0, 0, size.width, size.height);
UIGraphicsBeginImageContext(rect.size);

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

// Begin a new image that will be the new image with the rounded corners
// (here with the size of an UIImageView)
UIGraphicsBeginImageContext(size);

// Add a clip before drawing anything, in the shape of an rounded rect
[[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius] addClip];
// Draw your image
[image drawInRect:rect];

// Get the image, here setting the UIImageView image
image = UIGraphicsGetImageFromCurrentImageContext();

// Lets forget about that we were drawing
UIGraphicsEndImageContext();

return image;
}

and in my navbar

[navigationBar setShadowImage:[UIImage imageFromColor:[UIColor redColor] forSize:CGSizeMake(CGRectGetWidth(self.tableView.frame), 1)]];

that's it, It's working for me, hope this help. Please consider changing the accepted answer because its not working and can be confusing