Comment rendre la barre de navigation complètement transparente dans iOS 7


127

Je veux que UINavigationBar dans mon application soit complètement transparent et affleure avec le viewcontroller directement en dessous. Cependant, le seul code que j'ai pu trouver le rend translucide mais pas transparent. Je sais que cela peut être fait dans iOS 7 car il est utilisé dans l'application Notes. Ma question est, quel est le code qu'ils ont utilisé pour le faire?

Réponses:


295

De cette réponse

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

Aussi, comme suggéré par Josh dans les commentaires, pour remettre la barre par défaut:

[self.navigationController.navigationBar setBackgroundImage:nil
                     forBarMetrics:UIBarMetricsDefault];

6
Assurez-vous également que vous n'avez pasself.edgesForExtendedLayout = UIRectEdgeNone;
daidai

25
Y a-t-il un moyen d'inverser cela?
Zorayr

12
@Zorayr [self.navigationController.navigationBar setBackgroundImage: nil forBarMetrics: UIBarMetricsDefault]; remettra la barre par défaut.
Josh

7
Existe-t-il un moyen de basculer la transparence de la barre de navigation animée à l'aide de cette méthode?
JYC

3
J'implémente ceci sur scrollViewDidScroll et il y a un saut. Comment réparer?
onmyway133

77

Pour Swift3 et Swift4

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

Pour Swift2.2

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

Pour Objective-C

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

1
Merci, c'est un moyen facile de définir la barre de navigation sur totalement transparente
Hong Zhou

39

Solution autonome en tant que catégorie 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

Maintenant, vous pouvez importer la catégorie dans votre UIViewControlleret appeler les méthodes sur votre contrôleur de navigation - par exemple:

#import "UINavigationController+TransparentNavigationController.h"

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

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

Et une solution similaire dans 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
  }
}

Comment puis-je le montrer à nouveau (par exemple si je veux le rendre transparent uniquement dans 1 vue dans un NavigationController?) - Puis-je le réinitialiser à mes valeurs par défaut?
derdida

hideTransparentNavigationBar()devrait le réinitialiser.
Zorayr

L'appel des méthodes present / hide dans viewWillAppear / Disparaît entraînera une mauvaise animation de transition entre les deux barres de navigation différentes! Vous pouvez très bien le voir en faisant le geste de balayage (de gauche à droite) dans le pushViewController
andreacipriani

Essayez de l'appeler dans viewDidHidele contrôleur de vue parent.
Zorayr

1
Un fond noir s'affiche sur iOS 11 lors de l'utilisation de LargeTitle lors du masquage de la barre de navigation transparente
Vrutin Rathod

15

Alan a oublié une ligne

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

Donc j'ai:

[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 grande réponse de @ Zorayr révisée à 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 et iOS 12

Il s'avère que tout ce dont vous avez vraiment besoin est le code ci-dessous. Cela fonctionne parfaitement lorsque vous le mettez 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];

Cette ligne semblait fonctionner parfaitement pour moi

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.