Tornar o UINavigationBar transparente


Respostas:


635

Se alguém está se perguntando como conseguir isso no iOS 7+, aqui está uma solução (compatível com iOS 6 também)

No Objetivo-C

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

No Swift 3 (iOS 10)

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

Em rápido 2

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

Discussão

Definir translucentcomo YESna barra de navegação faz o truque, devido a um comportamento discutido na UINavigationBardocumentação. Vou relatar aqui o fragmento relevante:

Se você definir essa propriedade YESem uma barra de navegação com uma imagem de plano de fundo personalizada opaca, a barra de navegação aplicará uma opacidade do sistema menor que 1,0 à imagem.


29
Respondendo meu próprio comentário aqui; para desfazer o efeito tente:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;
Johann Burgess

Eu preciso de apenas um VC para ter uma barra de navegação transparente. Como reverto para o estilo original depois de sair do videocassete?
Guilherme

2
para conseguir isso no Swift a partir de um ViewController, faça o seguinte: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true
datayeah 3/15

Obras usando appeareance bem (iOS7 / 8), veja: gist.github.com/mpycio/ddbdea1adb6b86cf02f6
Mahakala

1
Desfazer o efeito para mim funciona apenas parcialmente. Porque, depois disso, todas as minhas visualizações de tabletes têm cabeçalhos muito grandes. Em todo o aplicativo, o que é estranho. (Eu só quero esse efeito por um controlador que eu empurro na pilha.)
Henning

29

No iOS5, você pode fazer isso para tornar a barra de navegação 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
No iOS 6, você também deseja remover a sombra da barra de navegação, caso contrário, ela parecerá estranha. [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
26413 Robert

23

Do 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

Para quem quiser fazer isso no 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 é uma propriedade opcional, portanto você precisa desembrulhá-lo. Basta adicionar self.navigationController .navigationBar e você é bom para ir?
Daniel Galasko

10

Isso parece funcionar:

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

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

6
Parece que no iOS 5 você deve substituir -drawRect:uma subclasse apropriada, não em uma categoria, e depois usá-la como sua barra de navegação.
Yang Meyer

9

Depois de fazer o que todo mundo disse acima, ou seja:

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

... minha barra de navegação ainda estava branca . Então eu adicionei esta linha:

navigationController?.navigationBar.backgroundColor = .clear

... e pronto! Isso pareceu funcionar.


7

Se você criar com a versão beta mais recente do iOS 13.4 e XCode 11.4, a resposta aceita não funcionará mais. Eu encontrei outra maneira, talvez seja apenas um bug no software beta, mas estou escrevendo lá em baixo, apenas no caso

(rápido 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
        }
    }
}

Impressionante! Estava apenas procurando uma correção! Funciona bem! Obrigado!
Georg

5

Eu sei que este tópico é antigo, mas se as pessoas quiserem saber como é feito sem sobrecarregar o método drawRect.

Isto é o que você precisa:

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

1
Sinto muito, isso não está correto. Você ainda tem que substituir o método drawRect
Sander

Por que isso está errado? Parece estar funcionando no IOS 6 sim. Não está funcionando no IOS 5? navigationBar.backgroundColor parece não estar documentado.
317 Cristi

5

O código abaixo se expande na resposta superior escolhida para este segmento, para se livrar da borda inferior e definir a cor do texto:

  1. As duas últimas linhas codificadas desse código definem a transparência. Peguei emprestado esse código desse segmento e funcionou perfeitamente!

  2. A propriedade "clipsToBounds" foi o código que encontrei que eliminou a linha de borda inferior com OR sem transparência definida (por isso, se você optar por usar um fundo branco / preto / etc. Sólido, ainda não haverá linha de borda).

  3. A linha "tintColor" (segunda linha codificada) definiu meu botão de retorno para cinza claro

  4. Eu mantive o barTintColor como um backup. Não sei por que a transparência não funcionaria, mas se não funcionar, quero minha BG branca como costumava tê-la.

    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

para Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

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

3

Solução C # / Xamarin

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

2

Tente o seguinte trecho de código:

self.navigationController.navigationBar.translucent = YES;

1

Outra maneira que funcionou para mim é subclassificar UINavigationBar e deixar o método drawRect vazio !!

@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

No Swift 4.2

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

(em viewWillAppear) e, em seguida, em viewWillDisappear, para desfazê-lo, coloque

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

0

Você quer dizer totalmente transparente ou usar o estilo preto translúcido visto no aplicativo Fotos? O último que você pode realizar definindo sua barStylepropriedade para UIBarStyleBlackTranslucent. O primeiro ... não tenho certeza. Se você quiser que os itens ainda estejam visíveis, talvez seja necessário pesquisar na hierarquia de visualizações da barra e remover a visualização que contém seu plano de fundo.


2
Quero dizer o primeiro. Tentei criar uma categoria e substituir o método drawRect de UINavigationBar (invocando CGContextClearRect), mas isso o tornou completamente preto. Os itens ainda estavam visíveis.
quano 23/02/10

0

Isso funciona para o Swift 2.0.

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

0

Verifique RRViewControllerExtension , que é dedicado ao gerenciamento de aparência da barra de navegação do UIN.

com RRViewControllerExtension em seu projeto, você só precisa substituir

-(BOOL)prefersNavigationBarTransparent;

em você viewcontroller.

barra de navegação tranparent


-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)
            }
        }
    }
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.