Rendi UINavigationBar trasparente


Risposte:


635

Se qualcuno si chiede come ottenere questo risultato in iOS 7+, ecco una soluzione (compatibile anche con iOS 6)

In Objective-C

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

In swift 3 (iOS 10)

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

In rapido 2

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

Discussione

L'impostazione translucentsu YESsulla barra di navigazione fa il trucco, a causa di un comportamento discusso nella UINavigationBardocumentazione. Riporterò qui il frammento pertinente:

Se si imposta questa proprietà YESsu una barra di navigazione con un'immagine di sfondo personalizzata opaca, la barra di navigazione applicherà all'opacità un sistema inferiore a 1,0.


29
Rispondendo al mio commento qui; per annullare l'affetto prova:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;
Johann Burgess il

Ho bisogno di un solo VC per avere una barra di navigazione trasparente. Come posso tornare allo stile originale dopo essere uscito da quel VC?
Guilherme,

2
per raggiungere questo obiettivo in Swift da un ViewController, fallo in questo modo: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true
datayeah

Funziona anche con appeareance (iOS7 / 8), vedi: gist.github.com/mpycio/ddbdea1adb6b86cf02f6
Mahakala

1
Annullare l'effetto per me funziona solo parzialmente. Perché dopo aver fatto questo, le mie viste da tavolo hanno tutte intestazioni troppo grandi. A livello di app, il che è strano. (Voglio questo effetto solo per un controller che premo sullo stack.)
Henning

29

In iOS5 puoi farlo per rendere trasparente la barra di navigazione:

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
In iOS 6 vorrai anche rimuovere l'ombra della barra di navigazione, altrimenti sembrerà strano. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
Robert,

23

Da 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

Per chiunque voglia farlo in 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

2
navigationController è una proprietà opzionale, quindi è necessario scartarla. Aggiungi semplicemente self.navigationController? .NavigationBar e sei a posto
Daniel Galasko,

10

Questo sembra funzionare:

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

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

6
Sembra che in iOS 5 sia necessario eseguire l'override -drawRect:in una sottoclasse corretta, non in una categoria, quindi utilizzare questa sottoclasse come barra di navigazione.
Yang Meyer,

9

Dopo aver fatto ciò che tutti gli altri hanno detto sopra, cioè:

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

... la mia barra di navigazione era ancora bianca . Quindi ho aggiunto questa riga:

navigationController?.navigationBar.backgroundColor = .clear

... et voilà! Sembrava fare il trucco.


7

Se costruisci con l'ultima beta iOS 13.4 e XCode 11.4, la risposta accettata non funzionerà più. Ho trovato un altro modo, forse è solo un bug nel software beta, ma lo scrivo lì, per ogni evenienza

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

Eccezionale! Stavo solo cercando una soluzione! Funziona alla grande! Grazie!
Georg,

5

So che questo argomento è vecchio, ma se le persone vogliono sapere come è stato fatto senza sovraccaricare il metodo drawRect.

Questo è quello di cui hai bisogno:

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

1
Mi dispiace, questo non è corretto. Devi ancora sovrascrivere il metodo drawRect
Sander,

Perché è sbagliato? Sembra funzionare in IOS 6 sim. Non funziona in IOS 5? navigationBar.backgroundColor sembra non essere documentato.
Cristi,

5

Il codice seguente si espande sulla risposta superiore scelta per questo thread, per eliminare il bordo inferiore e impostare il colore del testo:

  1. Le ultime due righe codificate di questo codice impostano la trasparenza. Ho preso in prestito quel codice da questo thread e ha funzionato perfettamente!

  2. La proprietà "clipsToBounds" era il codice che ho trovato che si è sbarazzato della linea di confine inferiore con OR senza set di trasparenza (quindi se si decide di utilizzare uno sfondo bianco / nero / ecc. Solido, non ci sarà ancora alcuna linea di confine).

  3. La linea "tintColor" (seconda riga codificata) imposta il mio pulsante indietro su un grigio chiaro

  4. Ho mantenuto barTintColor come backup. Non so perché la trasparenza non funzionerebbe, ma in caso contrario, voglio il mio bianco come lo avevo prima

    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

per Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

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

3

Soluzione C # / Xamarin

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

2

Prova il seguente codice:

self.navigationController.navigationBar.translucent = YES;

1

Un altro modo che ha funzionato per me è quello di sottoclassare UINavigationBar e lasciare vuoto il metodo drawRect !!

@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

In Swift 4.2

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

(in viewWillAppear), quindi in viewWillDisappear, per annullare l'operazione, inserisci

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

0

Vuoi dire completamente trasparente o usando lo stile nero traslucido visto nell'app Foto? Quest'ultimo è possibile realizzare impostando la sua barStyleproprietà su UIBarStyleBlackTranslucent. Il primo ... non ne sono sicuro. Se desideri che gli elementi su di esso siano ancora visibili, potresti dover scavare nella gerarchia della vista della barra e rimuovere la vista contenente il suo sfondo.


2
Intendo il primo. Ho provato a creare una categoria e sovrascrivere il metodo drawRect di UINavigationBar (invocando CGContextClearRect), ma questo lo ha reso completamente nero. Gli oggetti erano comunque visibili.
Quano,

0

Questo funziona per Swift 2.0.

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

0

Controlla RRViewControllerExtension , dedicato alla gestione dell'aspetto della barra UINavigation.

con RRViewControllerExtension nel tuo progetto, devi solo eseguire l'override

-(BOOL)prefersNavigationBarTransparent;

nel tuo viewcontroller.

barra di navigazione trasparente


-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)
            }
        }
    }
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.