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

Question

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

为了让Status Bar不一直是灰色，我试过了，没用=(

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

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

[[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 的 extra-large 导航栏的支持。

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

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

Swift5，iOS13+

您可以在 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

检查这个link

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

How to make a Navigation Bar and Status Bar blurred (UIBlurEffect)? iOS, Swift 3

ios

uiblureffect

uivisualeffectview

swift3