iOS11中如何复制NavigationBar默认背景模糊效果至其他图片？

Hey there! I get that you want to replicate that nice blur effect from iOS11's NavigationBar onto another image. The reason your current code isn't working is actually straightforward: starting in iOS11, the NavigationBar's blur isn't implemented with a static background image. Instead, Apple uses UIVisualEffectView to render the blur in real-time, which means backgroundImage(for: UIBarMetrics.default) will just return nil—so you can't grab the effect that way.

Here are a few solid solutions to get the result you want:

1. Directly mimic the blur with UIVisualEffectView #

This is the most accurate and efficient way, since it uses the same system component that the NavigationBar does. You can overlay a blur view on top of your target image, or use it as a background:

// Create a blur effect that matches the default NavigationBar style
// For iOS13+, .systemMaterial is the perfect match; for iOS11-12, use .extraLight if your barStyle is .default
let blurEffect = UIBlurEffect(style: .systemMaterial)
let blurView = UIVisualEffectView(effect: blurEffect)

// Match the blur view's frame to your target image view
blurView.frame = yourTargetImageView.bounds
blurView.autoresizingMask = [.flexibleWidth, .flexibleHeight] // Keep it sized correctly if the view resizes

// Add the blur view to your image view (it will sit on top, creating the blur effect over the image)
yourTargetImageView.addSubview(blurView)

If you want the image to show through the blur just like the NavigationBar, make sure your image view and blur view are set to be translucent (which they are by default).

2. Capture a snapshot of the NavigationBar #

If you specifically need a static image version of the NavigationBar's blurred background (not a live blur), you can take a snapshot of the entire NavigationBar:

// Begin image context with the NavigationBar's size and screen scale
UIGraphicsBeginImageContextWithOptions(
    self.navigationController?.navigationBar.bounds.size ?? .zero,
    false,
    UIScreen.main.scale
)

// Draw the NavigationBar's hierarchy into the context (this captures the live blur effect)
self.navigationController?.navigationBar.drawHierarchy(
    in: self.navigationController!.navigationBar.bounds,
    afterScreenUpdates: true
)

// Extract the snapshot image
let navBarBlurredImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

// Assign the snapshot to your image view
imageView.image = navBarBlurredImage

Note that this gives you a static image—if the NavigationBar's content or the background behind it changes, the snapshot won't update automatically. Use this for static use cases.

Quick Tip for Perfect Matching #

To make sure your replicated blur matches the NavigationBar exactly, double-check these properties:

• Ensure your blur view or snapshot respects the NavigationBar's barStyle (e.g., use .systemMaterialDark if the bar style is .black)
• Keep the translucent property enabled (it's on by default for NavigationBars) to maintain the same semi-transparent look

内容的提问来源于stack exchange，提问作者Joe