You need to do three things to make a navigation bar transparent. Set background image to non-nil empty image ( UIImage() ). Set shadow image to non-nil empty image ( UIImage() ). Set isTranslucent to true .
A user changes the navigation bar's style, or UIBarStyle , by tapping the “Style” button to the left of the main page. This button opens an action sheet where users can change the background's appearance to default, black-opaque, or black- translucent.
On your Mac, use Dock & Menu Bar System Preferences to change the appearance of the Dock, and to select items to show in the menu bar and in Control Center. To change these preferences, choose Apple menu > System Preferences, then click Dock & Menu Bar .
From this answer
[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
Also, as suggested by Josh in the comments, to put the bar back to default:
[self.navigationController.navigationBar setBackgroundImage:nil
forBarMetrics:UIBarMetricsDefault];
For Swift3 and Swift4
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
For Swift2.2
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.translucent = true
For Objective-C
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.translucent = YES;
Self contained solution as an Objective-C Category:
UINavigationController+TransparentNavigationController.h
@interface UINavigationController (TransparentNavigationController)
- (void)presentTransparentNavigationBar;
- (void)hideTransparentNavigationBar;
@end
UINavigationController+TransparentNavigationController.m
#import "UINavigationController+TransparentNavigationController.h"
@implementation UINavigationController (TransparentNavigationController)
- (void)presentTransparentNavigationBar
{
[self.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[self.navigationBar setTranslucent:YES];
[self.navigationBar setShadowImage:[UIImage new]];
[self setNavigationBarHidden:NO animated:YES];
}
- (void)hideTransparentNavigationBar
{
[self setNavigationBarHidden:YES animated:NO];
[self.navigationBar setBackgroundImage:[[UINavigationBar appearance] backgroundImageForBarMetrics:UIBarMetricsDefault] forBarMetrics:UIBarMetricsDefault];
[self.navigationBar setTranslucent:[[UINavigationBar appearance] isTranslucent]];
[self.navigationBar setShadowImage:[[UINavigationBar appearance] shadowImage]];
}
@end
Now, you can import the category in your UIViewController
and call the methods on your navigation controller - for example:
#import "UINavigationController+TransparentNavigationController.h"
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
[self.navigationController presentTransparentNavigationBar];
}
- (void)viewWillDisappear:(BOOL)animated
{
[super viewWillDisappear:animated];
[self.navigationController hideTransparentNavigationBar];
}
And a similar solution in Swift:
import Foundation
import UIKit
extension UINavigationController {
public func presentTransparentNavigationBar() {
navigationBar.setBackgroundImage(UIImage(), forBarMetrics:UIBarMetrics.Default)
navigationBar.translucent = true
navigationBar.shadowImage = UIImage()
setNavigationBarHidden(false, animated:true)
}
public func hideTransparentNavigationBar() {
setNavigationBarHidden(true, animated:false)
navigationBar.setBackgroundImage(UINavigationBar.appearance().backgroundImageForBarMetrics(UIBarMetrics.Default), forBarMetrics:UIBarMetrics.Default)
navigationBar.translucent = UINavigationBar.appearance().translucent
navigationBar.shadowImage = UINavigationBar.appearance().shadowImage
}
}
Alan forgot one line
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
So I have:
[self.navigationController.navigationBar setTranslucent:YES];
self.navigationController.view.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [[UIImage alloc] init];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
@Zorayr's great answer revised to Swift 3 :
import Foundation
import UIKit
extension UINavigationController {
public func presentTransparentNavigationBar() {
navigationBar.setBackgroundImage(UIImage(), for:.default)
navigationBar.isTranslucent = true
navigationBar.shadowImage = UIImage()
setNavigationBarHidden(false, animated:true)
}
public func hideTransparentNavigationBar() {
setNavigationBarHidden(true, animated:false)
navigationBar.setBackgroundImage(UINavigationBar.appearance().backgroundImage(for: UIBarMetrics.default), for:.default)
navigationBar.isTranslucent = UINavigationBar.appearance().isTranslucent
navigationBar.shadowImage = UINavigationBar.appearance().shadowImage
}
}
Swift 4.2 and iOS 12
It turns out all you really need is the code below. It works perfectly when you put it into viewDidLoad()
.
// removes line at bottom of navigation bar
navigationController?.navigationBar.shadowImage = UIImage()
// makes navigation bar completely transparent
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.isTranslucent = true
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With