Efecto de desenfoque en tiempo real para la barra de navegación

Cómo lograr el efecto borroso en tiempo real para la barra de navegación al igual que la aplicación Trailers en iPhone.

es decir, a medida que se desplaza, los contenidos deben difuminarse detrás de la barra de navegación. Por favor ayúdame con un código.

¡Gracias!

Quiero lograr un efecto como este:

enter image description here

Apple ha introducido las nuevas clases UIVisualEffectView y más para agregar translucidez y efecto de desenfoque en las vistas de la versión iOS 8.0.

Aquí, cómo puede usarlo para agregar efecto de desenfoque a la barra de navegación o a cualquier otro UIView :

Swift 2.1 Editar

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

Código Objetivo 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. } 

ACTUALIZAR:

Si encuentra que después de agregar efecto de desenfoque en la barra de navegación, los botones de navegación no están visibles, a continuación, agregue la línea siguiente después de agregar el código blurView.

Rápido:

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

C objective:

 [self.navigationController.navigationBar sendSubviewToBack:visualEffectView]; 

Nota: en iOS 11 , la función sendSubviewToBack no funciona normalmente. Para lograr eso, debemos usar zPosition para colocar la vista del efecto de desenfoque debajo de otras vistas.

 self.visualEffectView.layer.zPosition = -1; 

Código Objective-C

 [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault]; 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]; 

Código Swift 4

  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 

He añadido @Kampai ‘s, @Damasio ‘ s con mis ajustes para resolver mis problemas (que estaba relacionado con pushNavigation). El código será compatible con Swift 4.0+ , iOS9, Xcode 9

En ViewDidLoad () de ViewController, simplemente llame

 addBlurEffect(toView: self.navigationController?.navigationBar) 

función:

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

Si, después de @Kampai answer, obtienes la barra de estado sin obtener el efecto, agrega esto:

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

Pregunta abordada en este tema .

Swift 4

 extension UINavigationBar { func installBlurEffect() { isTranslucent = true setBackgroundImage(UIImage(), for: .default) let statusBarHeight: CGFloat = UIApplication.shared.statusBarFrame.height var blurFrame = bounds blurFrame.size.height += statusBarHeight blurFrame.origin.y -= statusBarHeight let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .light)) blurView.isUserInteractionEnabled = false blurView.frame = blurFrame blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight] addSubview(blurView) blurView.layer.zPosition = -1 } } 

Uso

 navigationController?.navigationBar.installBlurEffect() 

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

Primero agregué el método addBlurEffect () y luego en AppDelegate, agregué

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

Ahora me funciona

Nota clave: después de implementar el código anterior para agregar vista borrosa, 1. Necesito enviar su vista borrosa para mostrar otras cosas 2. Necesito configurar su vista borrosa para que la interacción del usuario sea falsa para poder tocar los elementos en la barra de navegación.