导航栏的实时模糊效果

如何实现导航栏的实时模糊效果就像iPhone中的拖车应用程序。

即当你滚动的内容应该在导航栏后面变得模糊。 请帮我一些代码。

谢谢！

我想达到这样的效果：

Answer 1

苹果已经推出了新的类UIViewEffectView和更多的从iOS 8.0版本的视图添加半透明和模糊效果。

在这里如何使用它来添加模糊效果导航栏或任何其他的UIView ：

Swift 2.1编辑

 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代码：

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

更新：

如果您发现在导航栏上添加了模糊效果之后，导航button不可见，那么在添加blurView代码之后添加下面的行。

迅速：

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

目标C：

 [self.navigationController.navigationBar sendSubviewToBack:visualEffectView]; 

Answer 2

注意：在iOS 11上 ，函数sendSubviewToBack不能正常工作。 为了实现这一点，我们应该使用zPosition将模糊效果视图放在其他视图下。

 self.visualEffectView.layer.zPosition = -1; 

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]; 

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 

Answer 3

如果在@Kampai回答之后你得到的状态栏没有得到效果，添加这个：

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

本主题涉及的问题 。

Answer 4

我已经添加@Kampai的， @Damasio的与我的调整来解决我的问题（这是pushNavigation相关）。代码将支持斯威夫特4.0 + ， iOS9，Xcode 9

在您的ViewController的ViewDidLoad（）中，只需调用

 addBlurEffect(toView: self.navigationController?.navigationBar) 

function：

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

Answer 5

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

Answer 6

我首先添加addBlurEffect（）方法，然后在AppDelegate，我补充说

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

现在它适用于我

Answer 7

注意：在你实现上面的代码后，添加模糊视图，1.你需要发送你的模糊视图来回显示其他东西2.你需要设置你的模糊视图用户交互是错误的，以便能够点击项目导航栏。