[英]Real time blur effect for Navigation Bar
How to achieve the real time blurring effect for the navigation bar just like the Trailers app in iPhone.如何实现导航栏的实时模糊效果,就像 iPhone 中的 Trailers 应用一样。
ie As you scroll the contents should get blurred behind the navigation bar.即,当您滚动时,导航栏后面的内容应该会变得模糊。 Please help me with some code.
请帮我一些代码。
Thanks!谢谢!
I want to achieve an effect like this:-我想达到这样的效果:-
Apple has introduced new classes UIVisualEffectView and more to add translucency and blur effect on views from iOS 8.0 release.从 iOS 8.0 版本开始,Apple 引入了新的类UIVisualEffectView 等,以在视图上添加半透明和模糊效果。
Here how you can use it to add a blur effect to navigation bar or any other UIView
:在这里,您可以如何使用它为导航栏或任何其他
UIView
添加模糊效果:
func addBlurEffect() {
let bounds = self.navigationController?.navigationBar.bounds
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
visualEffectView.frame = bounds ?? CGRect.zero
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 the above code to add effects to the custom view.
}
Objective C Code:目标 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 the above code to add effects to the custom view.
}
UPDATE:更新:
If you find that after adding blur effect on navigationBar, navigation buttons are not visible then add below line after adding blurView code.如果您发现在导航栏上添加模糊效果后,导航按钮不可见,请在添加模糊视图代码后添加以下行。
Swift:迅速:
self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView)
Objective C:目标 C:
[self.navigationController.navigationBar sendSubviewToBack:visualEffectView];
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
}
}
navigationController?.navigationBar.installBlurEffect()
Noted: on iOS 11 , function sendSubviewToBack
does not work normally.注意:在iOS 11 上,函数
sendSubviewToBack
不能正常工作。 In order to achieve that, we should use zPosition
to place the blur effect view under other views.为了实现这一点,我们应该使用
zPosition
将模糊效果视图放置在其他视图下。
self.visualEffectView.layer.zPosition = -1;
Objective-C code 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 code斯威夫特 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
I've added @Kampai 's, @Damasio 's with my tweaks to resolve my issues(which was pushNavigation related).Code will support Swift 4.0+ , iOS9, Xcode 9我已经添加了@Kampai的、 @Damasio的以及我的调整来解决我的问题(与pushNavigation相关)。代码将支持Swift 4.0+ 、 iOS9、Xcode 9
In your ViewController's ViewDidLoad(), just call在您的 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)
}
If, after @Kampai answer you get the status bar not getting in the effect, add this:如果在@Kampai 回答后您的状态栏没有生效,请添加以下内容:
bounds.offsetInPlace(dx: 0.0, dy: -20.0)
bounds.size.height = bounds.height + 20.0
Question addressed in this topic . 本主题中解决的问题。
SWIFT 3:快速 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)
}
Swift 5, iOS 13 +斯威夫特 5、iOS 13 +
You can use UINavigationBarAppearance()
in AppDelegate file.您可以在 AppDelegate 文件中使用
UINavigationBarAppearance()
。 And don't forget set appearance for not scrolling mode.并且不要忘记为非滚动模式设置外观。 For me it works perfect with navigationBar.prefersLargeTitles.
对我来说,它与 navigationBar.prefersLargeTitles 完美配合。
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()
appearance.backgroundColor = UIColor.clear
appearance.backgroundEffect = UIBlurEffect(style: .light) // or dark
let scrollingAppearance = UINavigationBarAppearance()
scrollingAppearance.configureWithTransparentBackground()
scrollingAppearance.backgroundColor = .white // your view (superview) color
UINavigationBar.appearance().standardAppearance = appearance
UINavigationBar.appearance().scrollEdgeAppearance = scrollingAppearance
UINavigationBar.appearance().compactAppearance = scrollingAppearance
return true
}
I first added addBlurEffect() method and then in AppDelegate, I added我首先添加了 addBlurEffect() 方法,然后在 AppDelegate 中添加了
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().backgroundColor = UIColor.clearColor()
UINavigationBar.appearance().translucent = true
Now it works for me现在它对我有用
重点说明:在您实现上述代码以添加模糊视图后,1. 您需要将您的模糊视图发送回以显示其他内容 2. 您需要将您的模糊视图用户交互设置为 false 以便能够点击项目导航栏。
iOS NavigationBar Blur Effect iOS NavigationBar 模糊效果
let navigationBar = self.navigationController?.navigationBar
if #available(iOS 13.0, *) {
navigationBar?.standardAppearance.backgroundColor = .clear
navigationBar?.standardAppearance.backgroundEffect = UIBlurEffect(style: .systemMaterial)
}
Don't forget to align your UITableView
to superview(not Safe area)不要忘记将您的
UITableView
与 superview 对齐(非安全区域)
This is neoneye's solution from above, which works perfectly, applied to a UIToolbar.这是上面neoneye的解决方案,它完美地适用于UIToolbar。
extension UIToolbar {
func toolBarBlurEffect() {
isTranslucent = true
setBackgroundImage(UIImage(), forToolbarPosition: .any, barMetrics: .default)
let statusBarHeight: CGFloat = UIApplication.shared.statusBarFrame.height
var blurFrame = bounds
blurFrame.size.height += statusBarHeight
let blurView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))
blurView.isUserInteractionEnabled = false
blurView.frame = blurFrame
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
addSubview(blurView)
blurView.layer.zPosition = -1
}
}
Usage is similar:用法类似:
navigationController?.toolbar.toolBarBlurEffect()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.