Cómo hacer una barra de navegación completamente transparente en iOS 7

127

Quiero que UINavigationBar en mi aplicación sea completamente transparente y esté al ras con el controlador de vista directamente debajo de él. Sin embargo, el único código que pude encontrar lo hace translúcido pero no transparente. Sé que esto se puede hacer en iOS 7 porque se usa en la aplicación de notas. Mi pregunta es, ¿cuál es el código que usaron para hacerlo?

Cory Ginsberg
fuente

Respuestas:

295

De esta respuesta

[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];

Además, como lo sugirió Josh en los comentarios, para restablecer la barra a los valores predeterminados:

[self.navigationController.navigationBar setBackgroundImage:nil
                     forBarMetrics:UIBarMetricsDefault];
Alan
fuente
66
También asegúrese de no tenerself.edgesForExtendedLayout = UIRectEdgeNone;
daidai
25
¿Hay alguna manera de revertir esto?
Zorayr
12
@Zorayr [self.navigationController.navigationBar setBackgroundImage: nil forBarMetrics: UIBarMetricsDefault]; restablecerá la barra a los valores predeterminados.
Josh
77
¿Hay alguna forma de alternar la transparencia de la barra de navegación animada usando este método?
JYC
3
Implemento esto en scrollViewDidScroll y hay un salto. ¿Como arreglar?
onmyway133
77

Para Swift3 y Swift4

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

Para Swift2.2

 self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
 self.navigationController?.navigationBar.shadowImage = UIImage()
 self.navigationController?.navigationBar.translucent = true

Para el objetivo-C

[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
self.navigationController.navigationBar.shadowImage = [UIImage new];
self.navigationController.navigationBar.translucent = YES;
vichhai
fuente
1
Gracias esta es una manera fácil de configurar la barra de navegación totalmente transparente
Hong Zhou
39

Solución autónoma como categoría de Objective-C:

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

Ahora puede importar la categoría en su UIViewControllery llamar a los métodos en su controlador de navegación, por ejemplo:

#import "UINavigationController+TransparentNavigationController.h"

- (void)viewWillAppear:(BOOL)animated
{
  [super viewWillAppear:animated];
  [self.navigationController presentTransparentNavigationBar];
}

- (void)viewWillDisappear:(BOOL)animated
{
  [super viewWillDisappear:animated];
  [self.navigationController hideTransparentNavigationBar];
}

Y una solución similar en 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
  }
}
Zorayr
fuente
¿Cómo puedo volver a mostrarlo (por ejemplo, si no quiero que sea transparente solo en 1 vista en un NavigationController), ¿puedo restablecerlo a mis valores predeterminados?
derdida
hideTransparentNavigationBar()debería restablecerlo de nuevo.
Zorayr
Llamar a los métodos present / hide en viewWillAppear / desaparear causa una mala animación de transición entre las dos diferentes barras de navegación. Puedes verlo muy bien haciendo el gesto de deslizar (de izquierda a derecha) en el controlViewView
andreacipriani
Intente llamarlo desde viewDidHideel controlador de vista principal.
Zorayr
1
Se muestra un fondo negro en iOS 11 cuando se usa LargeTitle cuando se oculta la barra de navegación transparente
Vrutin Rathod
15

Alan olvidó una línea

self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

Así que tengo:

[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];
Damien Romito
fuente
5

La gran respuesta de @ Zorayr revisada a 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
    }
}
Diphaze
fuente
2

Swift 4.2 y iOS 12

Resulta que todo lo que realmente necesita es el siguiente código. Funciona perfectamente cuando lo pones 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
Trev14
fuente
-3

Use el pod UINavigationBar + Addition , luego simplemente llame:

UINavigationBar *navigationBar = self.navigationController.navigationBar;
[navigationBar makeTransparent];
samwize
fuente
-4

[(UIView *) [self.navigationController.navigationBar.subviews objectAtIndex: 0] setAlpha: 0.0f];

Esa línea parecía funcionar perfectamente para mí.

usuario5679976
fuente