Question

如何使导航栏和状态栏模糊（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 }

首先，当滚动图片时，导航栏下方会消失其次，状态栏仍然是灰色的。

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天抱歉我的英语不好。

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

Swift 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 3

这是我同样的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];

Answer 4

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

检查此链接

如何使导航栏和状态栏模糊（UIBlurEffect）？ iOS，Swift 3

4 个答案: