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?

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

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;

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
  }
}

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

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
    }
}

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


-4

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

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.