barre de navigation transparente ios

121

Je crée une application et j'ai navigué sur Internet et je me demande comment ils rendent cette barre de navigation transparente comme ceci:

J'ai ajouté ce qui suit comme dans mon appdelegate:

UINavigationBar.appearance().translucent = true

mais cela donne juste l'aspect suivant:

Comment rendre la barre de navigation transparente comme la première image

— Peter Pik
source

Avec le code, je ne sais pas, mais si vous êtes bon avec CSS, vous pouvez utiliser un framework (Pixate: freestyle.org ), et pouvez simplement appliquer un style CSS à votre barre de navigation :)!

— Nicolas Charvoz

286

Vous pouvez appliquer l'image de la barre de navigation comme ci-dessous pour translucide.

Objectif 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

J'espère que cela vous aidera ..!

— Vidhyanand
source

4

quand je setBackgroundImage il supprime le barTintColor?

— Peter Pik

Vous pouvez obtenir l'image de la barre de navigation..Selon vos besoins..et appliquer à la barre de navigation comme ci-dessus .. (Image que vous souhaitez appliquer à la barre de navigation)

— Vidhyanand

1

réglage de l'arrière-

— planCouleur

4

Avec cette solution, j'obtiens une barre de navigation noire, des idées?

— Carlos del Blanco

1

Pas comme prévu. Lorsque vous le faites, vous n'aurez pas le mur translucide comme avec un alpha de 0,7 à droite, PLUS couvrant également la barre d'état. Si vous faites cela sur iOS 13, vous n'aurez qu'un rectangle de belle apparence et au-dessus de celui-ci, LA BARRE D'ÉTAT CRYSTAL CLEAR. dont l'auteur de la question est clair et précis.

— Marlhex

122

Solution rapide

C'est le meilleur moyen que j'ai trouvé. Vous pouvez simplement le coller dans la didFinishLaunchingWithOptions méthode de votre appDelegate :

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
}

source: Rendre la barre de navigation transparente concernant l'image ci-dessous dans iOS 8.1

— Dan Beaulieu
source

4

Votre solution Swift 3 rend simplement ma barre blanche.

— Jose Ramirez

@JozemiteApps essayez de créer un tout nouveau projet Xcode et collez le code. Cela ne devrait prendre que 3 minutes pour confirmer si c'est mon code ci-dessus ou quelque chose à propos de votre projet qui est à l'origine de cela.

— Dan Beaulieu

2

J'ai aussi un navibar blanc uni et pas de navibar transparent

— Kingalione

Cela fonctionne très bien, merci! Savez-vous comment vous pourriez l'implémenter de telle sorte que les seules barres de navigation sur les ViewControllers souhaités soient transparentes?

— RufusV

@JoseRamirez C'est probablement l'arrière-plan du viewController que vous voyez. Vous devez modifier la contrainte supérieure de la première vue pour l'aligner sur la vue de supervision et non sur la zone ou la marge de sécurité.

— testé le

27

Swift 5 s'applique uniquement au contrôleur de vue actuel

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
source

13

Swift 3: extension pour la barre de navigation transparente

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

— Ankit Kumar Gupta
source

12

Solution Swift 4.2: Pour un fond transparent:

Pour une approche générale:

override func viewDidLoad() {
    super.viewDidLoad()

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

}

Pour un objet spécifique:

override func viewDidLoad() {
    super.viewDidLoad()

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

}

J'espère que c'est utile.

— Ümañg ßürmån
source

De quel objet parlez-vous navBar?

— Sergey Gamayunov

@SergeyGamayunov navBarici, fait référence à l'objet de UINavigationBar.

— Ümañg ßürmån

C'est ce qu'il veut dire ... laissez navBar = self.navigationController? .NavigationBar

— Marlhex

8

J'ai pu accomplir cela rapidement de cette façon:

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

où j'ai créé la méthode utilitaire suivante dans une UIColorcatégorie:

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

— Julian B.
source

Cela devrait être la meilleure réponse!

— Mihail Salari le

7

Ce que cela a fonctionné pour moi:

    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
source

5

Définissez la propriété background de votre navigationBar, par exemple

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

(Vous devrez peut-être changer cela un peu si vous n'avez pas de contrôleur de navigation, mais cela devrait vous donner une idée de ce qu'il faut faire.)

Assurez-vous également que la vue ci-dessous s'étend réellement sous la barre.

— Atomix
source

Cela me donne ce qui suit: i.stack.imgur.com/GT3WV.png Comment puis-je rendre un peu plus rouge comme le premier lien (image) que j'ai posté

— Peter Pik

Vous pouvez jouer avec la valeur alpha et la changer de 0,5 à quelque chose entre 0,0 et 1,0. Et comme je l'ai dit, assurez-vous que la vue ci-dessous passe sous la barre de navigation, sinon vous ne verrez aucun contenu briller à travers la barre. Si vous utilisez Interface Builder, vous pouvez faire glisser et aligner le bord supérieur de cette vue avec le bord supérieur de l'écran.

— Atomix

2

Essayez ceci, cela fonctionne pour moi si vous devez également prendre en charge ios7, il est basé sur la transparence de 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
source

2

Pour ceux qui recherchent une solution OBJC, à ajouter dans la méthode 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
source

1

Si vous voulez pouvoir le faire par programmation dans swift 4 tout en restant sur la même vue,

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
    }

Une chose importante à retenir cependant est de cliquer sur ce bouton dans votre storyboard. J'ai eu un problème avec un écran de saut pendant une longue période. Assurez-vous de définir ceci:

Ensuite, lorsque vous modifiez la translucidité de la barre de navigation, les vues ne sautent pas, car elles s'étendent jusqu'en haut, quelle que soit la visibilité de la barre de navigation.

— paul_f
source

1

Ajoutez ceci dans votre did load

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
source

0

Méthode utilitaire que vous appelez en passant navigationController et la couleur que vous souhaitez définir sur la barre de navigation. Pour transparent, vous pouvez utiliser clearColorde la UIColorclasse.

Pour l'objectif 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];
}

Pour 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
source

0

J'avais travaillé là-dessus et j'étais confronté à un problème en utilisant les réponses fournies ici par différents utilisateurs. Le problème était une boîte blanche derrière mon image transparente NavigationBar sur iOS 13+

Ma solution est celle-ci

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

J'espère que cela aide n'importe qui avec le même problème

— Reinier Melian
source