barra de navegação transparente ios


121

Estou criando um aplicativo e naveguei na Internet e me pergunto como eles tornam essa navegação transparente da seguinte maneira:

insira a descrição da imagem aqui

Adicionei o seguinte como no meu appdelegate:

UINavigationBar.appearance().translucent = true

mas isso apenas parece com o seguinte:

insira a descrição da imagem aqui

Como posso tornar a barra de navegação transparente como a primeira imagem


Com o código que não conheço, mas se você é bom em CSS, pode usar uma estrutura (Pixate: freestyle.org ) e pode aplicar um estilo CSS à sua barra de navegação :)!
Nicolas Charvoz

Respostas:


286

Você pode aplicar a imagem da barra de navegação como abaixo para Translucent.

Objetivo-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

Espero que ajude você ..!


4
quando eu configuroBackgroundImage remove o barTintColor?
Peter Pik

Você pode obter uma imagem de navegação bar..As por sua need..and aplica a barra de navegação como acima .. (imagem que você deseja aplicar a barra de navegação)
Vidhyanand

1
O
controle

4
Com esta solução, recebo uma barra de navegação preta, alguma idéia?
Carlos del Blanco

1
Não como esperado. Ao fazer isso, você não terá a parede translúcida como um alfa de 0,7 à direita, PLUS cobrindo também a barra de status. Se você fizer isso no iOS 13, terá apenas um retângulo de boa aparência e acima dele, O CRISTAL DE BARRA DE STATUS CLARO. qual o autor da pergunta é claro e específico.
Marlhex 23/10/19

122

Solução Swift

Esta é a melhor maneira que eu encontrei. Você pode simplesmente colá-lo no método do 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: torne a barra de navegação transparente em relação à imagem abaixo no iOS 8.1


3
Sua solução Swift 3 apenas deixa minha barra branca.
Jose Ramirez

@JozemiteApps tente criar um projeto Xcode totalmente novo e cole o código. Devem levar apenas 3 minutos para confirmar se é o meu código acima ou algo sobre o seu projeto que está causando isso.
22817 Dan Beaulieu

1
Eu também tenho um navibar branco liso e não transparente navibar
Kingalione

Isso funciona muito bem, obrigado! Você sabe como implementá-lo para que apenas as barras de navegação nos ViewControllers desejados sejam transparentes?
RufusV

@JoseRamirez Provavelmente é o fundo do viewController que você vê. Você precisa alterar a restrição superior da primeira visualização para alinhar com a superview e não com a área ou margem segura.
turingtested

27

Swift 5 aplicável somente ao controlador de exibição atual

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
}

13

Swift 3: extensão para a barra de navegação transparente

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

12

Solução Swift 4.2: para um plano de fundo transparente:

  1. Para abordagem geral:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        self.navigationController?.navigationBar.shadowImage = UIImage()
        self.navigationController?.navigationBar.isTranslucent = true
    
    }
  2. Para objeto específico:

    override func viewDidLoad() {
        super.viewDidLoad()
    
        navBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
        navBar.shadowImage = UIImage()
        navBar.navigationBar.isTranslucent = true
    
    }

Espero que seja útil.


Com qual objeto você se refere navBar?
Sergey Gamayunov 24/05/19

@SergeyGamayunov navBaraqui, refere-se ao objeto de UINavigationBar.
Ümañg ßürmån

Isso é o que ele quer dizer ... deixe navBar = self.navigationController .navigationBar?
Marlhex

8

Consegui fazer isso rapidamente:

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

onde eu criei o seguinte método utilitário em uma UIColorcategoria:

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

Essa deve ser a melhor resposta!
Mihail Salari 23/04

7

O que funcionou para mim:

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

5

Defina a propriedade background da sua navigationBar, por exemplo

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

(Talvez você precise mudar um pouco isso se não tiver um controlador de navegação, mas isso deve lhe dar uma idéia do que fazer.)

Verifique também se a vista abaixo realmente se estende sob a barra.


Isto dá-me a seguir: i.stack.imgur.com/GT3WV.png Como posso fazer um pouco mais vermelho como o primeiro link (imagem) eu postei
Peter Pik

Você pode jogar com o valor alfa e alterá-lo de 0,5 para algo entre 0,0 e 1,0. E, como eu disse, verifique se a exibição abaixo fica embaixo da barra de navegação, caso contrário você não verá nenhum conteúdo brilhar na barra. Se você estiver usando o Interface Builder, poderá arrastar e alinhar a borda superior dessa visualização com a borda superior da tela.
Atomix

2

Tente isso, funciona para mim se você também precisar oferecer suporte ao ios7, é baseado na transparência do 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];

2

Para aqueles que procuram uma solução OBJC, a ser adicionada no método AppDelete didFinishLaunchingWithOptions:

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

1

Se você deseja fazer isso programaticamente no swift 4 enquanto permanece na mesma exibição,

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
    }

Uma coisa importante a lembrar é clicar neste botão no seu storyboard. Eu tive um problema com uma tela de salto por um longo tempo. Certifique-se de definir isso:insira a descrição da imagem aqui

Então, quando você altera a translucidez da barra de navegação, as exibições não saltam, pois elas se estendem até o topo, independentemente da visibilidade da barra de navegação.


1

Adicione isso no seu carregamento carregado

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

0

Método utilitário que você chama passando o navigationController e a cor que você deseja definir na barra de navegação. Para transparente você pode usar clearColorde UIColorclasse.

Para o objetivo 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];
}

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

0

Eu estava trabalhando nisso e estava enfrentando um problema usando as respostas fornecidas aqui por diferentes usuários. O problema era uma caixa branca atrás da minha imagem transparente NavigationBar no iOS 13+

insira a descrição da imagem aqui

Minha solução é essa

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

Espero que isso ajude alguém com o mesmo problema

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.