Effet de flou en time réel pour la barre de navigation

Apple a introduit de nouvelles classs UIViewEffectView et plus pour append de la translucidité et de l'effet de flou sur les vues de la version iOS 8.0.

Voici comment vous pouvez l'utiliser pour append un effet de flou à la barre de navigation ou à tout autre UIView :

Swift 2.1 Modifier

 func addBlurEffect() { let bounds = self.navigationController?.navigationBar.bounds as CGRect! let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) visualEffectView.frame = bounds! visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] self.navigationController?.navigationBar.addSubview(visualEffectView) // Here you can add visual effects to any UIView control. // Replace custom view with navigation bar in above code to add effects to custom view. } 

Code de l'objective C:

 - (void) addBlurEffect { // Add blur view CGRect bounds = self.navigationController.navigationBar.bounds; UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]]; visualEffectView.frame = bounds; visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; [self.navigationController.navigationBar addSubview:visualEffectView]; self.navigationController.navigationBar.backgroundColor = [UIColor clearColor]; [self.navigationController.navigationBar sendSubviewToBack:visualEffectView]; // Here you can add visual effects to any UIView control. // Replace custom view with navigation bar in above code to add effects to custom view. } 

METTRE À JOUR:

Si vous trouvez qu'après avoir ajouté l'effet de flou sur navigationBar, les buttons de navigation ne sont pas visibles, puis ajoutez la ligne ci-dessous après avoir ajouté le code blurView.

Rapide:

 self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView) 

Objectif c:

 [self.navigationController.navigationBar sendSubviewToBack:visualEffectView]; 

Si, après la réponse de @Kampai, la barre d'état n'obtient pas l'effet, ajoutez ceci:

 bounds.offsetInPlace(dx: 0.0, dy: -20.0) bounds.size.height = bounds.height + 20.0 

Question abordée dans ce sujet .

J'ai ajouté @Damasio @Kampai , avec mes réglages pour résoudre mes problèmes (qui étaient liés à pushNavigation) .Code soutiendra Swift 4.0+ , iOS9, Xcode 9

Dans ViewDidLoad () de ViewController, appelez simplement

 addBlurEffect(toView: self.navigationController?.navigationBar) 

fonction:

  //MARK :- It can be used in navBarGlassEffect view func addBlurEffect(toView view:UIView?) { // Add blur view guard let view = view else { return } //This will let visualEffectView to work perfectly if let navBar = view as? UINavigationBar{ navBar.setBackgroundImage(UIImage(), for: .default) navBar.shadowImage = UIImage() } var bounds = view.bounds bounds.offsetBy(dx: 0.0, dy: -20.0) bounds.size.height = bounds.height + 20.0 let blurEffect = UIBlurEffect(style: .dark) let visualEffectView = UIVisualEffectView(effect: blurEffect) visualEffectView.isUserInteractionEnabled = false visualEffectView.frame = bounds visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.insertSubview(visualEffectView, at: 0) } 

Remarque: sur iOS 11 , la fonction sendSubviewToBack ne fonctionne pas normalement. Pour ce faire, nous devons utiliser zPosition pour placer l'effet de flou sous d'autres vues.

 self.visualEffectView.layer.zPosition = -1; 

Code Objective-C

 [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMesortingcs:UIBarMesortingcsDefault]; self.navigationController.navigationBar.shadowImage = [UIImage new]; self.navigationController.navigationBar.barTintColor = [UIColor whiteColor]; self.navigationController.navigationBar.backgroundColor = [UIColor clearColor]; self.navigationController.navigationBar.translucent = YES; // Add blur view CGRect bounds = self.navigationController.navigationBar.bounds; bounds.size.height += 20; bounds.origin.y -= 20; _visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]]; self.visualEffectView.frame = bounds; self.visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; self.visualEffectView.userInteractionEnabled = NO; self.visualEffectView.layer.zPosition = -1; [self.navigationController.navigationBar addSubview:self.visualEffectView]; [self.navigationController.navigationBar sendSubviewToBack:self.visualEffectView]; 

Swift 4 code

  self.navigationController?.navigationBar.isTranslucent = true self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) var bounds = view.bounds bounds.size.height += 20 bounds.origin.y -= 20 visualEffectView.isUserInteractionEnabled = false visualEffectView.frame = bounds visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] self.navigationController?.navigationBar.addSubview(visualEffectView) visualEffectView.layer.zPosition = -1 

SWIFT 3:

 func addBlurEffect(toView view:UIView?) { // Add blur view guard let view = view else { return } //This will let visualEffectView to work perfectly if let navBar = view as? UINavigationBar{ navBar.setBackgroundImage(UIImage(), for: .default) navBar.shadowImage = UIImage() } var bounds = view.bounds bounds.offsetBy(dx: 0.0, dy: -20.0) bounds.size.height = bounds.height + 20.0 let blurEffect = UIBlurEffect(style: .dark) let visualEffectView = UIVisualEffectView(effect: blurEffect) visualEffectView.isUserInteractionEnabled = false visualEffectView.frame = bounds visualEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight] view.insertSubview(visualEffectView, at: 0) } 

J'ai d'abord ajouté la méthode addBlurEffect () puis dans AppDelegate, j'ai ajouté

  UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMesortingcs: .Default) UINavigationBar.appearance().shadowImage = UIImage() UINavigationBar.appearance().backgroundColor = UIColor.clearColor() UINavigationBar.appearance().translucent = true 

Maintenant ça marche pour moi

Remarque importante: après avoir mis en œuvre le code ci-dessus pour append une vue floue, 1. Vous devez renvoyer votre vue floue pour afficher d'autres éléments. 2. Vous devez définir l'interaction de l'user flou pour être en mesure de toucher les éléments. la barre de navigation.