如何使导航栏和状态栏模糊（UIBlurEffect）？ iOS，斯威夫特 3

Posted 2023-03-08

【中文标题】如何使导航栏和状态栏模糊（UIBlurEffect）？ iOS，斯威夫特 3

【英文标题】：How to make a Navigation Bar and Status Bar blurred (UIBlurEffect)? iOS, Swift 3

【发布时间】：2017-01-21 15:26:52

【问题描述】：

如何使导航栏和状态栏模糊（UIBlurEffect）？当我通过点击图片向下滚动（滚动查看）到其他图片时，这张图片（在本例中为白色机器）只是在导航栏下丢失了，有必要在下面看到这个图具有 UIBlurEffect 效果的导航栏。

NO UIBlurEffect

我试过了，但是没用：

func addBlurEffect() 
// Add blur view
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)
self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView)
visualEffectView.isUserInteractionEnabled = false 

首先，当滚动图片时，导航栏下会消失。 其次，状态栏保持灰色。

Bad UIBlurEffect for NavigationBar, and NO UIBlurEffect for StatusBar

为了不让状态栏一直变灰，我试过了，但是没用=(

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

在didFinishLaunchingWithOptions 中的AppDelegate（他用Objective-C 编写的应用程序）中，我尝试添加它都保持不变，没有任何更改：

[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc]init] forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc]init]];
[[UINavigationBar appearance] setBackgroundColor:[UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.0f]];
[[UINavigationBar appearance] setTranslucent:YES];

请帮忙解决问题，我搞砸了 3 天。 对不起我的英语不好。

【参考方案1】：

离开@Vignesh 回答硬编码-10 是个坏主意。例如，这不会为 iphone X 正确调整大小。

// Find size for blur effect.
let statusBarHeight = UIApplication.shared.statusBarFrame.size.height
let bounds = self.navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: -(statusBarHeight)).offsetBy(dx: 0, dy: -(statusBarHeight))
// Create blur effect.
let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
visualEffectView.frame = bounds
// Set navigation bar up.
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.addSubview(visualEffectView)
self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView)

我还建议创建 UINavigationController 的子类，因为这是一种很好的做法。像这样的：

final class func MyCustomNavigation: UINavigationController 

    override func viewDidLoad() 

         // Find size for blur effect.
         let statusBarHeight = UIApplication.shared.statusBarFrame.size.height
         let bounds = navigationBar.bounds.insetBy(dx: 0, dy: -(statusBarHeight)).offsetBy(dx: 0, dy: -(statusBarHeight))
         // Create blur effect.
         let visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
         visualEffectView.frame = bounds
         // Set navigation bar up.
         navigationBar.isTranslucent = true
         navigationBar.setBackgroundImage(UIImage(), for: .default)
         navigationBar.addSubview(visualEffectView)
         navigationBar.sendSubview(toBack: visualEffectView)

    

【讨论】：

现在，'statusBarFrame' 在 ios 13.0 中已被弃用：改用窗口场景的 statusBarManager 属性。

嗨，如何去除这种模糊？

【参考方案2】：

将背景图像设置为导航栏就可以了。在 swift 3 中，下面的代码对我有用。

    let visualEffectView   = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    visualEffectView.frame =  (self.navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: -10).offsetBy(dx: 0, dy: -10))!
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.addSubview(visualEffectView)

输出：

【讨论】：

@RayKing 我遇到了同样的问题。我在这里找到了解决方案：***.com/a/27316465 只需在添加效果后添加：self.navigationController?.navigationBar.sendSubviewToBack(visualEffectView)。

这段代码使用了魔法常数-10，很容易被破解。

【参考方案3】：

Swift 5、iOS 13 +

您可以在 AppDelegate 文件中使用UINavigationBarAppearance()。并且不要忘记为非滚动模式设置外观。对我来说，它与 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

您也可以通过测试项目https://github.com/leningradspb/BlurNavigationBar查看此链接

【参考方案4】：

斯威夫特 3

感谢@Vignesh 的回答和@Romain Caron 的评论，我结合了您的代码，以下代码在 Swift 3 中适用于我

    let visualEffectView   = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    visualEffectView.frame =  (self.navigationController?.navigationBar.bounds.insetBy(dx: 0, dy: -10).offsetBy(dx: 0, dy: -10))!
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    self.navigationController?.navigationBar.addSubview(visualEffectView)
    self.navigationController?.navigationBar.sendSubview(toBack: visualEffectView)

【参考方案5】：

这是我的 Objective-C 代码，它包含对 iPhone X 超大导航栏的支持。

UIVisualEffectView *fxView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
[fxView setFrame:CGRectOffset(CGRectInset(self.navigationController.navigationBar.bounds, 0, -12), 0, -60)];
[self.navigationController.navigationBar setTranslucent:YES];
[self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarPosition:UIBarPositionAny barMetrics:UIBarMetricsDefault];
[self.navigationController.navigationBar insertSubview:fxView atIndex:1];