barra de navegación transparente ios


121

Estoy creando una aplicación y he navegado en Internet y me pregunto cómo hacen esta barra de navegación transparente como esta:

ingrese la descripción de la imagen aquí

He agregado lo siguiente como en mi appdelegate:

UINavigationBar.appearance().translucent = true

pero esto solo hace que parezca lo siguiente:

ingrese la descripción de la imagen aquí

¿Cómo puedo hacer que la barra de navegación sea transparente como la primera imagen?


Con el código no lo sé, pero si eres bueno con CSS, puedes usar un marco (Pixate: freestyle.org ), ¡y podrías simplemente aplicar un estilo CSS a tu barra de navegación :)!
Nicolas Charvoz

Respuestas:


286

Puede aplicar la imagen de la barra de navegación como se muestra a continuación para Translucent.

C objetivo:

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                     forBarMetrics:UIBarMetricsDefault]; //UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.shadowImage = [UIImage new];////UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor clearColor];

Swift 3:

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) //UIImage.init(named: "transparent.png")
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = .clear

Espero que te ayude ..!


4
cuando setBackgroundImage quita el barTintColor?
Peter Pik

Puede obtener una imagen de la barra de navegación ... según su necesidad ... y aplicar a la barra de navegación como se muestra arriba ... (Imagen que desea aplicar a la barra de navegación)
Vidhyanand

1
no es necesario establecer el backgroundColor del navigationController
matt bezark

4
Con esta solución obtengo una barra de navegación negra, ¿alguna idea?
Carlos del Blanco

1
No como se esperaba. Cuando lo hagas, no tendrás la pared traslúcida como con un alfa de 0,7 a la derecha, MÁS cubriendo la barra de estado también. Si haces esto en iOS 13, solo tendrás un rectángulo de buen aspecto y encima, LA BARRA DE ESTADO CRISTAL CLARO. que el autor de la pregunta es claro y específico.
Marlhex

122

Solución rápida

Esta es la mejor forma que he encontrado. Puede pegarlo en el didFinishLaunchingWithOptions método de su appDelegate :

Rápido 3/4

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = .clear
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().isTranslucent = true
    return true
}

Swift 2.0

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().translucent = true

    return true
}

fuente: haga que la barra de navegación sea transparente con respecto a la imagen de abajo en iOS 8.1


4
Su solución Swift 3 hace que mi barra sea completamente blanca.
Jose Ramirez

@JozemiteApps intente crear un nuevo proyecto de Xcode y pegue el código. Solo debería tomar 3 minutos para confirmar si es mi código anterior o algo sobre su proyecto lo que está causando esto.
Dan Beaulieu

2
También obtuve un navibar blanco liso y no un navibar transparente
Kingalione

¡Esto funciona muy bien, gracias! ¿Sabe cómo podría implementarlo de manera que solo las barras de navegación en los ViewControllers deseados sean transparentes?
RufusV

@JoseRamirez Es probablemente el fondo del viewController que ves. Debe cambiar la restricción superior de la primera vista para alinearla con la supervista y no con el área segura o el margen.
probado

27

Swift 5 se aplica solo al controlador de vista actual

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    // Make the navigation bar background clear
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    // Restore the navigation bar to default
    navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
    navigationController?.navigationBar.shadowImage = nil
}

13

Swift 3: extensión para la barra de navegación transparente

extension UINavigationBar {
    func transparentNavigationBar() {
    self.setBackgroundImage(UIImage(), for: .default)
    self.shadowImage = UIImage()
    self.isTranslucent = true
    }
}

12

Solución Swift 4.2: para fondo transparente:

  1. Para el enfoque general:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
    
    }
  2. Para objeto específico:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        navBar.shadowImage = UIImage()
        navBar.navigationBar.isTranslucent = true
    
    }

Espero que sea de utilidad.


¿Con qué objeto te refieres navBar?
Sergey Gamayunov

@SergeyGamayunov navBaraquí, se refiere al objeto de UINavigationBar.
Ümañg ßürmån

Eso es lo que quiere decir ... let navBar = self.navigationController? .NavigationBar
Marlhex

8

Pude lograr esto rápidamente de esta manera:

let navBarAppearance = UINavigationBar.appearance()
let colorImage = UIImage.imageFromColor(UIColor.morselPink(), frame: CGRectMake(0, 0, 340, 64))
navBarAppearance.setBackgroundImage(colorImage, forBarMetrics: .Default)

donde creé el siguiente método de utilidad en una UIColorcategoría:

imageFromColor(color: UIColor, frame: CGRect) -> UIImage {
  UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
  color.setFill()
  UIRectFill(frame)
  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return image
}

¡Esta debería ser la mejor respuesta!
Mihail Salari

7

Lo que funcionó para mí:

    let bar:UINavigationBar! =  self.navigationController?.navigationBar
    self.title = "Whatever..."
    bar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    bar.shadowImage = UIImage()
    bar.alpha = 0.0 

5

Establezca la propiedad de fondo de su navigationBar, por ejemplo

navigationController?.navigationBar.backgroundColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.5)

(Puede que tengas que cambiar eso un poco si no tienes un controlador de navegación, pero eso debería darte una idea de qué hacer).

También asegúrese de que la vista a continuación se extienda debajo de la barra.


Esto me da lo siguiente: i.stack.imgur.com/GT3WV.png ¿Cómo puedo hacer un poco más rojo como el primer enlace (imagen) que publiqué
Peter Pik

Puede jugar con el valor alfa y cambiarlo de 0,5 a cualquier valor entre 0,0 y 1,0. Y como dije, asegúrese de que la vista de abajo esté debajo de la barra de navegación; de lo contrario, no verá ningún contenido brillar a través de la barra. Si está utilizando Interface Builder, puede arrastrar y alinear el borde superior de esa vista con el borde superior de la pantalla.
Atomix

2

Prueba esto, me funciona si también necesitas ser compatible con ios7, se basa en la transparencia de UItoolBar:

[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];
    UIToolbar* blurredView = [[UIToolbar alloc] initWithFrame:self.navigationController.navigationBar.bounds];
    [blurredView setBarStyle:UIBarStyleBlack];
    [blurredView setBarTintColor:[UIColor redColor]];
    [self.navigationController.navigationBar insertSubview:blurredView atIndex:0];

2

Para aquellos que buscan una solución OBJC, que se agregará en el método App Delegate didFinishLaunchingWithOptions:

[[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[UINavigationBar appearance].shadowImage = [UIImage new];
[UINavigationBar appearance].backgroundColor = [UIColor clearColor];
[UINavigationBar appearance].translucent = YES;

1

Si desea poder hacer esto programáticamente en swift 4 mientras permanece en la misma vista,

if change {
        navigationController?.navigationBar.isTranslucent = false
        self.navigationController?.navigationBar.backgroundColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
        navigationController?.navigationBar.barTintColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
    } else {
        navigationController?.navigationBar.isTranslucent = true
        navigationController?.navigationBar.setBackgroundImage(backgroundImage, for: .default)
        navigationController?.navigationBar.backgroundColor = .clear
        navigationController?.navigationBar.barTintColor = .clear
    }

Sin embargo, una cosa importante para recordar es hacer clic en este botón en su guión gráfico. Tuve un problema con una pantalla de salto durante mucho tiempo. Asegúrese de configurar esto:ingrese la descripción de la imagen aquí

Luego, cuando cambie la translucidez de la barra de navegación, no hará que las vistas salten ya que las vistas se extienden hasta la parte superior, independientemente de la visibilidad de la barra de navegación.


1

Agregue esto en su carga

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.0)
//adjust alpha according to your need 0 is transparent 1 is solid

0

Método de utilidad al que llama pasando navigationController y el color que desea configurar en la barra de navegación. Para transparentes se puede utilizar clearColorde UIColorclase.

Para el objetivo c -

+ (void)setNavigationBarColor:(UINavigationController *)navigationController 
                               color:(UIColor*) color {
   [navigationController setNavigationBarHidden:false animated:false];
   [navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
   [navigationController.navigationBar setShadowImage:[UIImage new]];
   [navigationController.navigationBar setTranslucent:true];
   [navigationController.view setBackgroundColor:color];
   [navigationController.navigationBar setBackgroundColor:color];
}

Para Swift 3.0 -

class func setNavigationBarColor(navigationController : UINavigationController?, 
                                 color : UIColor) {
    navigationController?.setNavigationBarHidden(false, animated: false)
    navigationController?.navigationBar .setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.translucent = true
    navigationController?.view.backgroundColor = color
    navigationController?.navigationBar.backgroundColor =  color
}

0

Había estado trabajando en esto y tenía un problema al utilizar las respuestas proporcionadas aquí por diferentes usuarios. El problema era un cuadro blanco detrás de mi imagen transparente NavigationBar en iOS 13+

ingrese la descripción de la imagen aquí

Mi solución es esta

if #available(iOS 13, *) {
    navBar?.standardAppearance.backgroundColor = UIColor.clear
    navBar?.standardAppearance.backgroundEffect = nil
    navBar?.standardAppearance.shadowImage = UIImage()
    navBar?.standardAppearance.shadowColor = .clear
    navBar?.standardAppearance.backgroundImage = UIImage()
}

Espero que esto ayude a cualquiera con el mismo problema

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.