web-dev-qa-db-fra.com

barre de navigation transparente ios

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

 enter image description here

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

UINavigationBar.appearance().translucent = true

mais cela donne simplement le résultat suivant:

 enter image description here

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

iosiphoneswiftuinavigationbar
78
Peter Pik

Vous pouvez appliquer une image de barre de navigation comme ci-dessous pour Translucent.

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)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = .clear

J'espère que ça vous aide ..!

203
Vidhyanand

Solution rapide

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

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 sous iOS 8.1

95
Dan Beaulieu

Swift 3: extension pour la barre de navigation transparente

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

Qu'est-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
7
Javier Calatrava Llavería

J'ai pu accomplir cela dans Swift 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 d'utilité suivante dans une catégorie UIColor:

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

Solution Swift 4.2: Pour un fond transparent:

  1. Pour l'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

}

  2. Pour 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.

5
Ümañg ßürmån

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 un peu changer cela 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.

4
Atomix

Essayez ceci, cela fonctionne pour moi si vous devez également supporter 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];
2
EmilDo

Si vous voulez pouvoir le faire par programme 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 est de cliquer sur ce bouton dans votre story-board. J'ai eu un problème avec un écran de saut pendant une longue période. Assurez-vous de régler ceci:  enter image description here

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

1
paul_f

Swift 5 s'appliquant 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
}
0
Chris Chute

Ajoutez ceci à votre chargement

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
Abhishek Maurya

Pour ceux qui recherchent une solution OBJC, à ajouter dans la méthode didFinishLaunchingWithOptions de App Delegate:

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

Méthode utilitaire que vous appelez en transmettant navigationController et couleur que vous souhaitez définir dans la barre de navigation. Pour transparent , vous pouvez utiliser clearColor de UIColor classe.

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
}
0
Rahul