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

Question

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

没有 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 }

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

NavigationBar 的 UIBlurEffect 不好，StatusBar 没有 UIBlurEffect

为了状态栏不保持灰色，我尝试这样做，但无济于事=（

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天。
对不起，我的英语不好。

Answer 1

将背景图像设置到导航栏就可以了。 在 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)

输出：

Answer 2

离开@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)

    }

}

Answer 3

斯威夫特 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检查此链接

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

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