Rendre UINavigationBar transparent


Réponses:


635

Si quelqu'un se demande comment y parvenir dans iOS 7+, voici une solution (compatible iOS 6 aussi)

Dans Objective-C

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

Dans swift 3 (iOS 10)

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

En rapide 2

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

Discussion

La définition translucentde YESsur dans la barre de navigation fait l'affaire, en raison d'un comportement décrit dans la UINavigationBardocumentation. Je vais rapporter ici le fragment pertinent:

Si vous définissez cette propriété YESsur une barre de navigation avec une image d'arrière-plan personnalisée opaque, la barre de navigation appliquera une opacité système inférieure à 1,0 à l'image.


29
Répondre à mon propre commentaire ici; pour annuler l'affect, essayez:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;
Johann Burgess

J'ai besoin d'un seul VC pour avoir une barre de navigation transparente. Comment revenir au style d'origine après avoir quitté ce VC?
Guilherme

2
pour y parvenir dans Swift depuis un ViewController, faites-le comme ceci: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true
datayeah

Fonctionne également avec l'apparence (iOS7 / 8), voir: gist.github.com/mpycio/ddbdea1adb6b86cf02f6
Mahakala

1
Annuler l'effet pour moi ne fonctionne que partiellement. Parce qu'après cela, mes vues de table ont toutes des en-têtes trop grands. À l'échelle de l'application, ce qui est bizarre. (Je ne veux cet effet que pour un contrôleur que j'appuie sur la pile.)
Henning

29

Dans iOS5, vous pouvez le faire pour rendre la barre de navigation 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];

6
Dans iOS 6, vous souhaiterez également supprimer l'ombre de la barre de navigation, sinon cela semblera étrange. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
Robert

23

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

14

Pour tous ceux qui souhaitent le faire dans Swift 2.x:

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

ou Swift 3.x:

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

2
navigationController est une propriété facultative, vous devez donc la déballer. Ajoutez simplement self.navigationController? .NavigationBar et vous êtes prêt à partir
Daniel Galasko

10

Cela semble fonctionner:

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

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

6
Il semble que dans iOS 5, vous devez remplacer -drawRect:dans une sous-classe proprement dite, pas dans une catégorie, puis utiliser cette sous-classe comme barre de navigation.
Yang Meyer

9

Après avoir fait ce que tout le monde a dit ci-dessus, à savoir:

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

... ma barre de navigation était toujours blanche . J'ai donc ajouté cette ligne:

navigationController?.navigationBar.backgroundColor = .clear

... et voilà! Cela semblait faire l'affaire.


7

Si vous construisez avec la dernière version bêta d'iOS 13.4 et XCode 11.4, la réponse acceptée ne fonctionnera plus. J'ai trouvé un autre moyen, c'est peut-être juste un bogue dans le logiciel bêta, mais je l'écris là-bas, juste au cas où

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

Impressionnant! Je cherchais juste un correctif! Fonctionne très bien! Merci!
Georg

5

Je sais que ce sujet est ancien, mais si les gens veulent savoir comment cela se fait sans surcharger la méthode drawRect.

Voici ce dont vous avez besoin:

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

1
Je suis désolé, ce n'est pas correct. Vous devez toujours remplacer la méthode drawRect
Sander

Pourquoi est-ce mal? Il semble fonctionner dans IOS 6 sim. Cela ne fonctionne pas dans IOS 5? navigationBar.backgroundColor semble être non documenté.
Cristi

5

Le code ci-dessous se développe sur la première réponse choisie pour ce fil, pour se débarrasser de la bordure inférieure et définir la couleur du texte:

  1. Les deux dernières lignes codées de ce code définissent la transparence. J'ai emprunté ce code à ce fil et cela a parfaitement fonctionné!

  2. La propriété "clipsToBounds" était un code que j'ai trouvé qui supprimait la ligne de bordure inférieure avec OU sans jeu de transparence (donc si vous décidez d'aller avec un arrière-plan blanc / noir / etc. solide à la place, il n'y aura toujours pas de ligne de bordure).

  3. La ligne "tintColor" (2ème ligne codée) définit mon bouton de retour sur un gris clair

  4. J'ai conservé barTintColor comme sauvegarde. Je ne sais pas pourquoi la transparence ne fonctionnerait pas, mais si ce n'est pas le cas, je veux mon bg blanc comme je l'avais l'habitude de l'avoir

    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()

3

pour Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

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

3

Solution C # / Xamarin

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

2

Essayez le morceau de code suivant:

self.navigationController.navigationBar.translucent = YES;

1

Une autre façon qui a fonctionné pour moi est de sous-classer UINavigationBar et de laisser la méthode drawRect vide !!

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

1

Dans Swift 4.2

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

(dans viewWillAppear), puis dans viewWillDisappear, pour l'annuler, mettez

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false

0

Voulez-vous dire entièrement transparent ou utiliser le style noir translucide de l'application Photos? Vous pouvez accomplir ce dernier en définissant sa barStylepropriété sur UIBarStyleBlackTranslucent. Le premier ... je n'en suis pas sûr. Si vous souhaitez que les éléments dessus soient toujours visibles, vous devrez peut-être fouiller dans la hiérarchie des vues de la barre et supprimer la vue contenant son arrière-plan.


2
Je veux dire l'ancien. J'ai essayé de créer une catégorie et de remplacer la méthode drawRect de UINavigationBar (en invoquant CGContextClearRect), mais cela l'a rendue complètement noire. Les objets étaient cependant encore visibles.
quano

0

Cela fonctionne pour Swift 2.0.

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

0

Vérifiez RRViewControllerExtension , qui est dédié à la gestion de l'apparence des barres UINavigation.

avec RRViewControllerExtension dans votre projet, il vous suffit de remplacer

-(BOOL)prefersNavigationBarTransparent;

en vous viewcontroller.

barre de navigation transparente


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