Make UINavigationBar transparent

Question

How do you make a UINavigationBar transparent  Though I want its bar items to remain visible

User · Answer

After doing what everyone else said above, i.e.:

navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.isTranslucent = true

... my navigation bar was still white. So I added this line:

navigationController?.navigationBar.backgroundColor = .clear

... et voila! That seemed to do the trick.

User · Answer

Another Way That worked for me is to Subclass UINavigationBar And leave the drawRect Method empty      IBDesignable class MONavigationBar  UINavigationBar        Only override drawRect  if you perform custom drawing     An empty implementation adversely affects performance during animation  override func drawRect rect  CGRect           Drawing code

User · Answer

The below code expands upon the top answer chosen for this thread  to get rid of the bottom border and set text color    The last two coded lines of this code set transparency  I borrowed that code from this thread and it worked perfectly  The  clipsToBounds  property was code I found which got rid of the bottom border line with OR without transparency set  so if you decide to go with a solid white black etc  background instead  there will still be no border line   The  tintColor  line  2nd coded line  set my back button to a light grey I kept barTintColor as a backup  I don t know why transparency would not work  but if it doesn t  I want my bg white as I used to have it  let navigationBarAppearace   UINavigationBar appearance   navigationBarAppearace tintColor   UIColor lightGray navigationBarAppearace barTintColor   UIColor white navigationBarAppearace clipsToBounds   true navigationBarAppearace isTranslucent   true navigationBarAppearace setBackgroundImage UIImage    for   default  navigationBarAppearace shadowImage   UIImage

User · Answer

This works for Swift 2 0    navigationController  navigationBar setBackgroundImage UIImage    forBarMetrics  UIBarMetrics Default  navigationController  navigationBar shadowImage   UIImage   navigationController  navigationBar translucent   true

User · Answer

Try the following piece of code   self navigationController navigationBar translucent   YES

User · Answer

If you build with the lastest beta iOS 13 4 and XCode 11 4  the accepted answer won t work anymore  I ve found another way  maybe it s just a bug in the beta software  but I m writing it down there  just in case   swift 5   import UIKit  class TransparentNavBar  UINavigationBar       override func awakeFromNib             super awakeFromNib           self setBackgroundImage UIImage    for   default          self shadowImage   UIImage           self isTranslucent   true         self backgroundColor    clear         if  available iOS 13 0                   self standardAppearance backgroundColor    clear             self standardAppearance backgroundEffect    none             self standardAppearance shadowColor    clear

User · Answer

Check RRViewControllerExtension  which is dedicated on UINavigation bar appearance management   with RRViewControllerExtension in your project  you just need to override  - BOOL prefersNavigationBarTransparent    in you viewcontroller

User · Answer

In iOS5 you can do this to make the navigation bar transparent   nav navigationBar translucent   YES     Setting this slides the view up  underneath the nav bar  otherwise it ll appear black  const float colorMask 6     222  255  222  255  222  255   UIImage  img     UIImage alloc  init   UIImage  maskedImage    UIImage imageWithCGImage  CGImageCreateWithMaskingColors img CGImage  colorMask      nav navigationBar setBackgroundImage maskedImage forBarMetrics UIBarMetricsDefault     img release

User · Answer

For anyone who wants to do this in Swift 2 x   self navigationController  navigationBar setBackgroundImage UIImage    forBarMetrics   Default  self navigationController  navigationBar shadowImage   UIImage   self navigationController  navigationBar translucent   true   or Swift 3 x   self navigationController  navigationBar setBackgroundImage UIImage    for   default  self navigationController  navigationBar shadowImage   UIImage   self navigationController  navigationBar isTranslucent   true

User · Answer

for Swift 3 0   override func viewDidLoad         super viewDidLoad        navigationController  navigationBar setBackgroundImage UIImage    for   default      navigationController  navigationBar shadowImage   UIImage       navigationController  navigationBar isTranslucent   true

User · Answer

C    Xamarin Solution  NavigationController NavigationBar SetBackgroundImage new UIImage    UIBarMetrics Default   NavigationController NavigationBar ShadowImage   new UIImage    NavigationController NavigationBar Translucent   true

User · Answer

In Swift 4 2  self navigationController  navigationBar setBackgroundImage UIImage    for   default  self navigationController  navigationBar shadowImage   UIImage   self navigationController  navigationBar isTranslucent   true    in viewWillAppear   and then in viewWillDisappear  to undo it  put  self navigationController  navigationBar shadowImage   nil self navigationController  navigationBar isTranslucent   false

User · Answer

Do you mean entirely transparent  or using the translucent-black style seen in the Photos app  The latter you can accomplish by setting its barStyle property to UIBarStyleBlackTranslucent  The former    I m not sure about  If you want the items on it to still be visible  you might have to do some digging around in the bar s view hierarchy and remove the view containing its background

User · Answer

From IOS7    self navigationController navigationBar translucent   YES  self navigationController navigationBar shadowImage    UIImage new   self navigationController view backgroundColor    UIColor clearColor    self navigationController navigationBar setBackgroundImage  UIImage new  forBarMetrics UIBarMetricsDefault   self navigationController navigationBar backgroundColor    UIColor clearColor

User · Answer

I know this topic is old  but if people want to know how its done without overloading the drawRect method   This is what you need   self navigationController navigationBar translucent   YES  self navigationController navigationBar opaque   YES  self navigationController navigationBar tintColor    UIColor clearColor   self navigationController navigationBar backgroundColor    UIColor clearColor

User · Answer

extension UINavigationBar   var isTransperent  Bool           get               return false    Just to satisfy property                   set               if newValue    true                   self shadowImage     UIImage                   self isTranslucent   true                 self setBackgroundImage UIImage    for   default               else                  self shadowImage     UIImage                   self isTranslucent   false                 self setBackgroundImage nil  for   default

User · Answer

This worked with Swift 5     Clear the background image  navigationController  navigationBar setBackgroundImage UIImage    for   default      Clear the shadow image  navigationController  navigationBar shadowImage   UIImage       Ensure the navigation bar is translucent  navigationController  navigationBar isTranslucent   true

User · Answer

If anybody is wondering how to achieve this in iOS 7   here s a solution  iOS 6 compatible too  In Objective-C  self navigationBar setBackgroundImage  UIImage new                           forBarMetrics UIBarMetricsDefault   self navigationBar shadowImage    UIImage new   self navigationBar translucent   YES   In swift 3  iOS 10  self navigationBar setBackgroundImage UIImage    for   default  self navigationBar shadowImage   UIImage   self navigationBar isTranslucent   true  In swift 2 self navigationBar setBackgroundImage UIImage    forBarMetrics   Default  self navigationBar shadowImage   UIImage   self navigationBar translucent   true   Discussion Setting translucent to YES on the navigation bar does the trick  due to a behavior discussed in the UINavigationBar documentation  I ll report here the relevant fragment   If you set this property to YES on a navigation bar with an opaque custom background image  the navigation bar will apply a system opacity less than 1 0 to the image

User · Answer

This seems to work    implementation UINavigationBar  custom  -  void drawRect  CGRect rect     end  navigationController navigationBar backgroundColor    UIColor clearColor

[ios] Make UINavigationBar transparent

Examples related to ios

Examples related to iphone

Examples related to objective-c

Examples related to uinavigationbar

Examples related to transparency