Hacer que UINavigationBar sea transparente

Respuestas:

635

Si alguien se pregunta cómo lograr esto en iOS 7+, aquí hay una solución (también compatible con iOS 6)

En el objetivo-C

[self.navigationBar setBackgroundImage:[UIImage new]
                         forBarMetrics:UIBarMetricsDefault];
self.navigationBar.shadowImage = [UIImage new];
self.navigationBar.translucent = YES;

En Swift 3 (iOS 10)

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

En swift 2

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

Discusión

Configuración translucentde YESla barra de navegación hace el truco, debido a un comportamiento descrito en la UINavigationBardocumentación. Informaré aquí el fragmento relevante:

Si establece esta propiedad YESen una barra de navegación con una imagen de fondo personalizada opaca, la barra de navegación aplicará una opacidad del sistema inferior a 1.0 a la imagen.

Gabriele Petronella
fuente
29
Respondiendo mi propio comentario aquí; para deshacer el intento de afecto:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;
Johann Burgess
Solo necesito un VC para tener una barra de navegación transparente. ¿Cómo vuelvo al estilo original después de salir de ese VC?
Guilherme
2
para lograr esto en Swift desde un ViewController, hágalo así: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true
datayeah
También funciona con apariencia (iOS7 / 8), ver: gist.github.com/mpycio/ddbdea1adb6b86cf02f6
Mahakala
1
Deshacer el efecto para mí solo funciona parcialmente. Porque después de hacer esto, todas mis vistas de tabla tienen encabezados que son demasiado grandes. En toda la aplicación, lo cual es raro. (Solo quiero este efecto para un controlador que presiono en la pila.)
Henning
29

En iOS5 puede hacer esto para hacer que la barra de navegación sea transparente:

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];
Alex Stanciu
fuente
66
En iOS 6 también querrás eliminar la sombra de la barra de navegación, de lo contrario se verá extraño. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
Robert
23

Desde 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];
Damien Romito
fuente
14

Para cualquiera que quiera hacer esto en Swift 2.x:

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

o Swift 3.x:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
fulvio
fuente
2
navigationController es una propiedad opcional, por lo que debe desenvolverla. Simplemente agregue self.navigationController? .NavigationBar y estará listo para comenzar
Daniel Galasko
10

Esto parece funcionar:

@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect {}
@end

navigationController.navigationBar.backgroundColor = [UIColor clearColor];
quano
fuente
66
Parece que en iOS 5 debe anular -drawRect:en una subclase propiamente dicha, no en una categoría, y luego usar esta subclase como barra de navegación.
Yang Meyer
9

Después de hacer lo que todos los demás dijeron anteriormente, es decir:

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

... mi barra de navegación todavía estaba blanca . Entonces agregué esta línea:

navigationController?.navigationBar.backgroundColor = .clear

... et voila! Eso pareció hacer el truco.

Clay Ellis
fuente
7

Si compila con la última versión beta de iOS 13.4 y XCode 11.4, la respuesta aceptada ya no funcionará. He encontrado otra forma, tal vez es solo un error en el software beta, pero lo estoy escribiendo allí, por si acaso

(rápido 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
        }
    }
}
Picci
fuente
¡Increíble! ¡Estaba buscando una solución! ¡Funciona genial! ¡Gracias!
Georg
5

Sé que este tema es antiguo, pero si la gente quiere saber cómo se hace sin sobrecargar el método drawRect.

Esto es lo que necesitas:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
Lijadora
fuente
1
Lo siento, esto no es correcto. Todavía tiene que anular el método drawRect
Sander
¿Por qué está mal esto? Parece estar funcionando en IOS 6 sim. ¿No funciona en iOS 5? navigationBar.backgroundColor parece no estar documentado.
Cristi
5

El siguiente código se expande sobre la respuesta superior elegida para este hilo, para deshacerse del borde inferior y establecer el color del texto:

  1. Las dos últimas líneas codificadas de este código establecen la transparencia. ¡Tomé prestado ese código de este hilo y funcionó perfectamente!

  2. La propiedad "clipsToBounds" fue el código que encontré que eliminó la línea del borde inferior con OR sin conjunto de transparencias (así que si decides ir con un fondo blanco / negro / etc. Sólido, todavía no habrá línea de borde).

  3. La línea "tintColor" (segunda línea codificada) estableció mi botón de retroceso en gris claro

  4. Mantuve barTintColor como respaldo. No sé por qué la transparencia no funcionaría, pero si no funciona, quiero mi bg blanco como solía tenerlo

    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()
Dave G
fuente
3

para Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}
Wilson
fuente
3

Solución C # / Xamarin

NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;
Mark Moeykens
fuente
2

Pruebe el siguiente código:

self.navigationController.navigationBar.translucent = YES;
ruso
fuente
1

¡Otra forma que funcionó para mí es subclasificar UINavigationBar y dejar el método drawRect vacío!

@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
}}
M.Othman
fuente
1

En Swift 4.2

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

(en viewWillAppear), y luego en viewWillDisappear, para deshacerlo, coloque

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false
auspicioso99
fuente
0

¿Te refieres a completamente transparente, o usando el estilo negro translúcido visto en la aplicación Fotos? Esto último se puede lograr estableciendo su barStylepropiedad en UIBarStyleBlackTranslucent. El primero ... no estoy seguro. Si desea que los elementos en él aún estén visibles, es posible que tenga que investigar un poco en la jerarquía de vistas de la barra y eliminar la vista que contiene su fondo.

Noah Witherspoon
fuente
2
Me refiero a lo primero. Intenté hacer una categoría y anular el método drawRect de UINavigationBar (invocando CGContextClearRect), pero eso lo hizo completamente negro. Sin embargo, los artículos aún eran visibles.
quano
0

Esto funciona para Swift 2.0.

navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true
Chris3643
fuente
0

Verifique RRViewControllerExtension , que se dedica a la gestión de la apariencia de la barra UINavigation.

con RRViewControllerExtension en su proyecto, solo necesita anular

-(BOOL)prefersNavigationBarTransparent;

en tu viewcontroller.

barra de navegación transparente

Roen
fuente
-2
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)
            }
        }
    }
}
Dheeraj
fuente