barra di navigazione trasparente ios

121

Sto creando un'app e ho navigato su Internet e mi chiedo come fanno a rendere questa barra di navigazione trasparente come questa:

Ho aggiunto quanto segue nel mio appdelegate:

UINavigationBar.appearance().translucent = true

ma questo fa sembrare il seguente:

Come posso rendere la navigationBar trasparente come la prima immagine

— Peter Pik
fonte

Con il codice non lo so, ma se sei bravo con i CSS, puoi usare un framework (Pixate: freestyle.org ), e potresti semplicemente applicare uno stile CSS alla tua barra di navigazione :)!

— Nicolas Charvoz

286

Puoi applicare l'immagine della barra di navigazione come di seguito per Translucent.

Objective-C:

[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

Spero che ti aiuti ..!

— Vidhyanand
fonte

4

quando setBackgroundImage rimuove il barTintColor?

— Peter Pik

È possibile ottenere un'immagine della barra di navigazione .. Secondo le proprie necessità .. e applicare alla barra di navigazione come sopra .. (Immagine che si desidera applicare alla barra di navigazione)

— Vidhyanand

1

l'impostazione del backgroundColor del navigationController non è necessaria

— matt bezark

4

Con questa soluzione ottengo una navigationBar nera, qualche idea?

— Carlos del Blanco

1

Non come previsto. Quando lo fai, non avrai il muro traslucido come con un alfa di 0,7 a destra, PIÙ che copre anche la barra di stato. Se lo fai su iOS 13, avrai solo un rettangolo di bell'aspetto e sopra di esso, LA BARRA DI STATO CRYSTAL CLEAR. quale l'autore della domanda è chiaro e specifico.

— Marlhex

122

Soluzione rapida

Questo è il modo migliore che ho trovato. Puoi semplicemente incollarlo nel metodo di appDelegate didFinishLaunchingWithOptions :

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

fonte: Rendi la barra di navigazione trasparente rispetto all'immagine sottostante in iOS 8.1

— Dan Beaulieu
fonte

4

La tua soluzione Swift 3 rende il mio bar semplicemente bianco.

— Jose Ramirez

@JozemiteApps prova a creare un nuovo progetto Xcode e incolla il codice. Dovrebbero volerci solo 3 minuti per confermare se è il mio codice sopra o qualcosa sul tuo progetto che sta causando questo.

— Dan Beaulieu

2

Ho anche un semplice navibar bianco e nessun navibar trasparente

— Kingalione

Funziona benissimo, grazie! Sapete come implementarlo in modo tale che le sole barre di navigazione sui ViewController desiderati siano trasparenti?

— RufusV

@JoseRamirez Probabilmente è lo sfondo del viewController che vedi. È necessario modificare il vincolo superiore della prima vista per allinearlo alla superview e non all'area o al margine di sicurezza.

— turingtested il

27

Swift 5 si applica solo al controller di visualizzazione corrente

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
}

— Chris Chute
fonte

13

Swift 3: estensione per barra di navigazione trasparente

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

— Ankit Kumar Gupta
fonte

12

Soluzione Swift 4.2: per uno sfondo trasparente:

Per approccio generale:

override func viewDidLoad() {
    super.viewDidLoad()

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

}

Per oggetto specifico:

override func viewDidLoad() {
    super.viewDidLoad()

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

}

Spero sia utile.

— Ümañg ßürmån
fonte

A quale oggetto ti riferisci navBar?

— Sergey Gamayunov

@SergeyGamayunov navBarqui, si riferisce all'oggetto di UINavigationBar.

— Ümañg ßürmån

Questo è ciò che intendeva ... let navBar = self.navigationController? .NavigationBar

— Marlhex

8

Sono stato in grado di farlo rapidamente in questo modo:

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

dove ho creato il seguente metodo di utilità in una UIColorcategoria:

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

— Julian B.
fonte

Questa dovrebbe essere la risposta migliore!

— Mihail Salari

7

Cosa ha funzionato per me:

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

— Javier Calatrava Llavería
fonte

5

Imposta la proprietà dello sfondo della tua navigationBar, ad es

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

(Potrebbe essere necessario cambiarlo leggermente se non si dispone di un controller di navigazione, ma questo dovrebbe darti un'idea di cosa fare.)

Assicurati inoltre che la vista sottostante si estenda effettivamente sotto la barra.

— Atomix
fonte

Questo mi dà quanto segue: i.stack.imgur.com/GT3WV.png Come posso rendere un po 'più rosso come il primo collegamento (immagine) che ho pubblicato

— Peter Pik

Puoi giocare con il valore alfa e cambiarlo da 0,5 a qualsiasi cosa tra 0,0 e 1,0. E come ho detto, assicurati che la vista qui sotto vada sotto la barra di navigazione, altrimenti non vedrai alcun contenuto brillare attraverso la barra. Se stai usando Interface Builder, puoi trascinare e allineare il bordo superiore di quella vista con il bordo superiore dello schermo.

— Atomix

2

Prova questo, per me funziona se devi supportare anche ios7, si basa sulla trasparenza di 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];

— EmilDo
fonte

2

Per chi cerca una soluzione OBJC, da aggiungere nel metodo App Delegate didFinishLaunchingWithOptions:

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

— david72
fonte

1

Se vuoi essere in grado di farlo in modo programmatico in swift 4 rimanendo nella stessa visualizzazione,

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
    }

Una cosa importante da ricordare è fare clic su questo pulsante nello storyboard. Ho avuto un problema con un display di salto per molto tempo. Assicurati di impostare questo:

Quindi, quando si modifica la traslucenza della barra di navigazione, le viste non salteranno mentre le viste si estendono fino in cima, indipendentemente dalla visibilità della barra di navigazione.

— paul_f
fonte

1

Aggiungi questo nel tuo carico

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

— Abhishek Maurya
fonte

0

Metodo di utilità che chiami passando navigationController e il colore che desideri impostare sulla barra di navigazione. Per trasparente puoi usare clearColordi UIColorclasse.

Per l'obiettivo 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];
}

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

— Rahul
fonte

0

Ci stavo lavorando e stavo affrontando un problema utilizzando le risposte fornite qui da diversi utenti. Il problema era una casella bianca dietro la mia immagine trasparente NavigationBar su iOS 13+

La mia soluzione è questa

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

Spero che questo aiuti chiunque abbia lo stesso problema

— Reinier Melian
fonte