CODEWITHSUNDEEP
iosobjective-cswiftipaduinavigationbar
Szymon Kuczur
Szymon Kuczur

Reputation: 5821

How to hide UINavigationBar 1px bottom line

I have an app that sometimes needs its navigation bar to blend in with the content.

Does anyone know how to get rid of or to change color of this annoying little bar?

On the image below situation i have - i'm talking about this 1px height line below "Root View Controller"

enter image description here

Upvotes: 538

Views: 235480

Answers (30)

arvinq
arvinq

Reputation: 701

Combination of answers got me to what I am aiming for.

I used this:

let navigationBarAppearance = UINavigationBarAppearance()
navigationBarAppearance.configureWithOpaqueBackground()
navigationBarAppearance.shadowColor = .clear
navigationItem.scrollEdgeAppearance = navigationBarAppearance

Thin bar is still visible when I only use .configureWithOpaqueBackground(). The whole navigationItem will get the thin bar's color if I only use .shadow property.

So I used both and finally just assign the bar appearance to navigationItem's scrollEdgeAppearance where the content and the navigationBar aligns.

Upvotes: 0

Serhii Yakovenko
Serhii Yakovenko

Reputation: 12654

For iOS 13:

Use the .shadowColor property

If this property is nil or contains the clear color, the bar displays no shadow

For instance:

let navigationBar = navigationController?.navigationBar
let navigationBarAppearance = UINavigationBarAppearance()
navigationBarAppearance.shadowColor = .clear
navigationBar?.scrollEdgeAppearance = navigationBarAppearance

For iOS 12 and below:

To do this, you should set a custom shadow image. But for the shadow image to be shown you also need to set a custom background image, quote from Apple's documentation:

For a custom shadow image to be shown, a custom background image must also be set with the setBackgroundImage(_:for:) method. If the default background image is used, then the default shadow image will be used regardless of the value of this property.

So:

let navigationBar = navigationController!.navigationBar
navigationBar.setBackgroundImage(#imageLiteral(resourceName: "BarBackground"),
                                                        for: .default)
navigationBar.shadowImage = UIImage()

Above is the only "official" way to hide it. Unfortunately, it removes bar's translucency.

I don't want background image, just color.

You have those options:

  1. Solid color, no translucency:

     navigationBar.barTintColor = UIColor.redColor()
 navigationBar.isTranslucent = false
 navigationBar.setBackgroundImage(UIImage(), for: .default)
 navigationBar.shadowImage = UIImage()

  2. Create small background image filled with color and use it.

  3. Use 'hacky' method described below. It will also keep bar translucent.

How to keep bar translucent?

To keep translucency you need another approach, it looks like a hack but works well. The shadow we're trying to remove is a hairline UIImageView somewhere under UINavigationBar. We can find it and hide/show it when needed.

Instructions below assume you need hairline hidden only in one controller of your UINavigationController hierarchy.

  1. Declare instance variable:

    private var shadowImageView: UIImageView?

  2. Add method which finds this shadow (hairline) UIImageView:

    private func findShadowImage(under view: UIView) -> UIImageView? {
    if view is UIImageView && view.bounds.size.height <= 1 {
        return (view as! UIImageView)
    }

    for subview in view.subviews {
        if let imageView = findShadowImage(under: subview) {
            return imageView
        }
    }
    return nil
}

  3. Add/edit viewWillAppear/viewWillDisappear methods:

    override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    if shadowImageView == nil {
        shadowImageView = findShadowImage(under: navigationController!.navigationBar)
    }
    shadowImageView?.isHidden = true
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    shadowImageView?.isHidden = false
}

The same method should also work for UISearchBar hairline, and (almost) anything else you need to hide :)

Many thanks to @Leo Natan for the original idea!

Upvotes: 907

Mudith Chathuranga Silva
Mudith Chathuranga Silva

Reputation: 7434

For iOS 13+

The trick is to initialize 'UINavigationBarAppearance' with TransparentBackground. Then you could easily remove the horizontal line of the navigation bar.

let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()
appearance.backgroundColor = .green // Required background color

Finally, add the appearance changes to the navigation item as the apple suggested.

self.navigationItem.standardAppearance = appearance
self.navigationItem.scrollEdgeAppearance = appearance
self.navigationItem.compactAppearance = appearance

Upvotes: 10

Vishnuvardhan
Vishnuvardhan

Reputation: 5107

Here is the hack. Since it works on key paths might break in the future. But for now it works as expected.

Swift:

self.navigationController?.navigationBar.setValue(true, forKey: "hidesShadow")

Objective C:

[self.navigationController.navigationBar setValue:@(YES) forKeyPath:@"hidesShadow"];

Upvotes: 272

D6mi
D6mi

Reputation: 621

One very important note here - it's a lot more flexible to change the appearance of the UIViewController's navigationItem than the navigationBar directly.

Why you ask?

For the simple reason that the navigationItem is tied to a single UIViewController and represents the state of the navigationBar for that particular UIViewController. This is big, as you don't have to handle the navigation bar changes between different view controllers within viewWillAppear (or something similar), as you would if you mutated the navigationBar; which is, remember, shared between all view controllers of a given navigation stack (UINavigationController), and changing it in one place changes it for all view controllers up to the stack.

You just set the correct UINavigationBarAppearance for a particular view controller and UIKit will correctly update the navigation bar styling depeneding on which view controller is currently the top view controller on the navigation stack.

navigationItem.standardAppearance` = `UINavigationBarAppearance()

Upvotes: 1

andrewlundy_
andrewlundy_

Reputation: 1143

It's very important to not use navigationController?.navigationBar.setValue(true, forKey: "hidesShadow") because at any time, Apple could remove the "hidesShadow" key path. If they were to do this, any app using this call would break. Since you are not accessing the direct API of a class, this call is subject to App Store rejection.

As of iOS 13, to ensure efficiency, you can do the following:

navigationBar.standardAppearance.shadowColor = nil

Upvotes: 1

Ankur Lahiry
Ankur Lahiry

Reputation: 2315

Write your own initializer :D

import Foundation
import UIKit

extension UINavigationController {
    convenience init(rootViewController : UIViewController, hidesShadow : Bool) {
        self.init(rootViewController : rootViewController)
        self.navigationBar.setValue(hidesShadow, forKey: "hidesShadow")
        if hidesShadow {
            self.extendedLayoutIncludesOpaqueBars = true
            self.navigationBar.isTranslucent = false 
        }
    }
}

Upvotes: 0

OscarVGG
OscarVGG

Reputation: 2670

The swift way to do it:

UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
UINavigationBar.appearance().shadowImage = UIImage()

Upvotes: 72

BatyrCan
BatyrCan

Reputation: 6983

        if #available(iOS 13.0, *) {
            let appearance = UINavigationBarAppearance()
            appearance.backgroundColor          = Colors.color_app
            appearance.titleTextAttributes      = [.foregroundColor : UIColor.white]
            appearance.largeTitleTextAttributes = [.foregroundColor : UIColor.white]
            appearance.shadowColor = .clear
            appearance.shadowImage = UIImage()
            
            UINavigationBar.appearance().tintColor            = .white
            UINavigationBar.appearance().standardAppearance   = appearance
            UINavigationBar.appearance().compactAppearance    = appearance
            UINavigationBar.appearance().scrollEdgeAppearance = appearance
        } else {
            UINavigationBar.appearance().barTintColor        = Colors.color_app
            UINavigationBar.appearance().tintColor           = .white
            UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
            if #available(iOS 11.0, *) {
                UINavigationBar.appearance().largeTitleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
            }
            UINavigationBar.appearance().isTranslucent = false
            
            UINavigationBar.appearance().shadowImage = UIImage()
            UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
        }

Upvotes: 1

glotcha
glotcha

Reputation: 578

As of iOS 13 there is a system API to set or remove the shadow

UIKit uses shadowImage and the shadowColor property to determine the shadow's appearance. When shadowImage is nil, the bar displays a default shadow tinted according to the value in the shadowColor property. If shadowColor is nil or contains the clearColor color, the bar displays no shadow.

    let appearance = UINavigationBarAppearance()
    appearance.shadowImage = nil
    appearance.shadowColor = nil
    navigationController.navigationBar.standardAppearance = appearance

https://developer.apple.com/documentation/uikit/uibarappearance/3198009-shadowimage

Upvotes: 19

Oleksandr
Oleksandr

Reputation: 629

Simple solution – Swift 5

  1. Create an extension:

    extension UIImage {

    class func hideNavBarLine(color: UIColor) -> UIImage? {

        let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context?.setFillColor(color.cgColor)
        context?.fill(rect)


        let navBarLine = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return navBarLine
    }
}

  2. Add this to viewDidLoad(): 

    self.navigationController?.navigationBar.shadowImage = UIImage.hideNavBarLine(color: UIColor.clear)

Upvotes: 4

Evgenii Mokeev
Evgenii Mokeev

Reputation: 86

Two lines solution that works for me. Try to add this in ViewDidLoad method: 

navigationController?.navigationBar.setValue(true, forKey: "hidesShadow")
self.extendedLayoutIncludesOpaqueBars = true

Upvotes: 5

makle
makle

Reputation: 1267

Solution in Swift 4.2:

private func removeHairlineFromNavbar() {
    UINavigationBar.appearance().setBackgroundImage(
        UIImage(),
        for: .any,
        barMetrics: .default)
    UINavigationBar.appearance().shadowImage = UIImage()
}

Just put this function at the first Viewcontroller and call it in viewdidload

Upvotes: 4

Gagandeep Gambhir
Gagandeep Gambhir

Reputation: 4353

Can also be hidden from Storyboard (working on Xcode 10.1)

By adding runtime attribute: hidesShadow - Boolean - True

enter image description here

Upvotes: 20

Sachin Rasane
Sachin Rasane

Reputation: 1559

Swift 4 Tested ONE LINE SOLUTION

In Viewdidload() Set Navigation controller's userdefault value true for key "hidesShadow"

override func viewDidLoad() {
    super.viewDidLoad()

    self.navigationController?.navigationBar.setValue(true, forKey: "hidesShadow")

}

Upvotes: 11

Scott
Scott

Reputation: 61

Here is an way to do it without using any images, this is the only way that worked for me:

self.navigationController.navigationBar.layer.shadowOpacity = 0;

Unfortunately, you need to do this on every file where you want the line not to appear. There's no way to do it this way in appDelegate.

Edit:

Setting the shadowColor to nil isn't needed, this is the only line that you'll need.

Upvotes: 1

jhurliman
jhurliman

Reputation: 1870

Another option if you want to preserve translucency and you don't want to subclass every UINavigationController in your app:

#import <objc/runtime.h>

@implementation UINavigationController (NoShadow)

+ (void)load {
    Method original = class_getInstanceMethod(self, @selector(viewWillAppear:));
    Method swizzled = class_getInstanceMethod(self, @selector(swizzled_viewWillAppear:));
    method_exchangeImplementations(original, swizzled);
}

+ (UIImageView *)findHairlineImageViewUnder:(UIView *)view {
    if ([view isKindOfClass:UIImageView.class] && view.bounds.size.height <= 1.0) {
        return (UIImageView *)view;
    }

    for (UIView *subview in view.subviews) {
        UIImageView *imageView = [self findHairlineImageViewUnder:subview];
        if (imageView) {
            return imageView;
        }
    }

    return nil;
}

- (void)swizzled_viewWillAppear:(BOOL)animated {
    UIImageView *shadow = [UINavigationController findHairlineImageViewUnder:self.navigationBar];
    shadow.hidden = YES;

    [self swizzled_viewWillAppear:animated];
}

@end

Upvotes: 7

smohn
smohn

Reputation: 411

In Swift 3.0

Edit your AppDelegate.swift by adding the following code to your application function:

// Override point for customization after application launch.

// Remove border in navigationBar
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)

Upvotes: 17

pxpgraphics
pxpgraphics

Reputation: 1357

Wanted to add the Swift version of Serhii's answer. I created a UIBarExtension.swift with the following:

import Foundation
import UIKit

extension UINavigationBar {
    func hideBottomHairline() {
        self.hairlineImageView?.isHidden = true
    }

    func showBottomHairline() {
        self.hairlineImageView?.isHidden = false
    }
}

extension UIToolbar {
    func hideBottomHairline() {
        self.hairlineImageView?.isHidden = true
    }

    func showBottomHairline() {
        self.hairlineImageView?.isHidden = false
    }
}

extension UIView {
    fileprivate var hairlineImageView: UIImageView? {
        return hairlineImageView(in: self)
    }

    fileprivate func hairlineImageView(in view: UIView) -> UIImageView? {
        if let imageView = view as? UIImageView, imageView.bounds.height <= 1.0 {
            return imageView
        }

        for subview in view.subviews {
            if let imageView = self.hairlineImageView(in: subview) { return imageView }
        }

        return nil
    }
}

Upvotes: 66

Karthik damodara
Karthik damodara

Reputation: 1955

In Swift 3 we do this way

For any view controller: 

navigationBar.shadowImage = UIImage()
setBackgroundImage(UIImage(), for: .default)

For an entire app:

UINavigationBar.appearance().setBackgroundImage(UIImage(),barMetrics: .Default)
UINavigationBar.appearance().shadowImage = UIImage()

Upvotes: 1

Faris Muhammed
Faris Muhammed

Reputation: 1028

Swift 4 //for hiding navigation bar shadow line

navigationController?.navigationBar.shadowImage = UIImage()

Upvotes: 14

Kelvin Fok
Kelvin Fok

Reputation: 661

Hi this works for Swift 4.

    override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.isTranslucent = false
}

you need to put this in viewDidLayoutSubviews instead of viewDidLoad

Upvotes: 0

Kelson Pereira
Kelson Pereira

Reputation: 29

In Xamarin Forms this worked for me. Just add this on AppDelegate.cs:

UINavigationBar.Appearance.ShadowImage = new UIImage();

Upvotes: 0

easytarget
easytarget

Reputation: 748

I ran into the same issue and none of the answers were truly satisfying. Here is my take for Swift3:

func hideNavigationBarLine() {
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
}

Simply call this from within viewDidLoad().

Upvotes: 1

James
James

Reputation: 71

Slightly Swift Solution 
func setGlobalAppearanceCharacteristics () {
    let navigationBarAppearace = UINavigationBar.appearance()
    navigationBarAppearace.tintColor = UIColor.white
    navigationBarAppearace.barTintColor = UIColor.blue
    navigationBarAppearace.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    navigationBarAppearace.shadowImage = UIImage()

}

Upvotes: 6

Tarek Hallak
Tarek Hallak

Reputation: 18470

Try this:

[[UINavigationBar appearance] setBackgroundImage: [UIImage new]  
                                   forBarMetrics: UIBarMetricsDefault];

[UINavigationBar appearance].shadowImage = [UIImage new];

Below image has the explanation (iOS7 NavigationBar):

enter image description here

And check this SO question: iOS7 - Change UINavigationBar border color

Upvotes: 106

Socheat
Socheat

Reputation: 283

You should add a view to a bottom of the UISearchBar 

let rect = searchController.searchBar.frame;
let lineView : UIView = UIView.init(frame: CGRect.init(x: 0, y: rect.size.height-1, width: rect.size.width, height: 1))
lineView.backgroundColor = UIColor.init(hexString: "8CC73E")
searchController.searchBar.addSubview(lineView)

Upvotes: 2

Reza Shirazian
Reza Shirazian

Reputation: 2353

pxpgraphics's answer for Swift 3.0. 

import Foundation
import UIKit

extension UINavigationBar {

  func hideBottomHairline() {
    let navigationBarImageView = hairlineImageViewInNavigationBar(view: self)
    navigationBarImageView!.isHidden = true
  }

  func showBottomHairline() {
    let navigationBarImageView = hairlineImageViewInNavigationBar(view: self)
    navigationBarImageView!.isHidden = false
  }

  private func hairlineImageViewInNavigationBar(view: UIView) -> UIImageView? {
    if view is UIImageView && view.bounds.height <= 1.0 {
      return (view as! UIImageView)
    }

    let subviews = (view.subviews as [UIView])
    for subview: UIView in subviews {
      if let imageView: UIImageView = hairlineImageViewInNavigationBar(view: subview) {
        return imageView
      }
    }
    return nil
  }
}

extension UIToolbar {

  func hideHairline() {
    let navigationBarImageView = hairlineImageViewInToolbar(view: self)
    navigationBarImageView!.isHidden = true
  }

  func showHairline() {
    let navigationBarImageView = hairlineImageViewInToolbar(view: self)
    navigationBarImageView!.isHidden = false
  }

  private func hairlineImageViewInToolbar(view: UIView) -> UIImageView? {
    if view is UIImageView && view.bounds.height <= 1.0 {
      return (view as! UIImageView)
    }

    let subviews = (view.subviews as [UIView])
    for subview: UIView in subviews {
      if let imageView: UIImageView = hairlineImageViewInToolbar(view: subview) {
        return imageView
      }
    }
    return nil
  }
}

Upvotes: 2

Vaibhav Gaikwad
Vaibhav Gaikwad

Reputation: 406

Objective C Answer to Above Question

// removing 1px line of navigation bar

[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];
[[UINavigationBar appearance] setTranslucent:NO];
[[UINavigationBar appearance] setTintColor:[UIColor yourColor]];

Upvotes: 1

Nike Kov
Nike Kov

Reputation: 13718

-(void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];

    UIImage *emptyImage = [UIImage new];
    self.navigationController.navigationBar.shadowImage = emptyImage;
    [self.navigationController.navigationBar setBackgroundImage:emptyImage forBarMetrics:UIBarMetricsDefault];
}

Upvotes: 1

Related Questions