iOS 8 -- 对导航栏和状态栏应用模糊

Posted 2023-03-11

【中文标题】iOS 8 -- 对导航栏和状态栏应用模糊

【英文标题】：iOS 8 -- Apply blur to navigation bar AND status bar

【发布时间】：2015-02-04 23:01:32

【问题描述】：

我正在尝试向导航栏和状态栏添加模糊效果。 我的问题是导航栏上的模糊效果很好，但状态栏没有模糊。

我的问题是：如何扩展边界以包含状态栏？

我正在使用以下方法来创建模糊效果：

- (void) addBlurEffect 

CGRect bounds = self.navigationController.navigationBar.bounds;
UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:[UIBlurEffect effectWithStyle:UIBlurEffectStyleLight]];
visualEffectView.frame = bounds;
visualEffectView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.navigationController.navigationBar addSubview:visualEffectView];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];
[self.navigationController.navigationBar sendSubviewToBack:visualEffectView];

在我的 plist 中，我有基于视图控制器的状态栏外观 YES

在 viewDidLoad 我调用了一个方法：

- (void)configureView 

    // style controls

    self.addAirportButton.tintColor = [UIColor whiteColor];

    // style background image

    UIImageView *sidebarBackground = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"sidebarBackground"]];
    self.tableView.backgroundView = sidebarBackground;

    // style navigation bar

    self.navigationController.navigationBar.barStyle = UIStatusBarStyleLightContent;

    // this makes navigation bar transparent

    [self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                                                  forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.translucent = YES;

    // style toolbar

    self.navigationController.toolbar.translucent = YES;
    self.dismissAdsButton.tintColor = [UIColor whiteColor];

在 viewDidLoad 中没有其他重要的事情完成。 当我构建它时，视图如下所示——它是一个嵌入在 NavigationController 中的 tableViewController，我也在使用出色的 SWRevealViewController。

看看状态栏怎么不模糊：

任何帮助将不胜感激！

更新：

请参阅下面的答案。这是实现的解决方案的屏幕截图：

【问题讨论】：

当视图即将首次出现时，您是否尝试过从 viewWillAppear 而不是 viewDidLoad 调用所有这些？

我试过了，没有变化，不幸的是。

【参考方案1】：

我一直在尝试实现类似的效果，在使用 UINavigationBar 的 API 进行调整后无法达到预期的效果，我找到了一种解决方法：

创建一个与 NavigationBar + StatusBar 大小相同的 UIView。也就是说，它将有一个 (0, 0, w, 64) 的框架，其中 w 是屏幕的宽度。 （我通过 Storyboard 做到了这一点，并使用自动布局将宽度约束设置为等于其父视图的宽度）

将 UIView 的 backgroundColor 设置为清除颜色。

使用以下代码使导航栏完全透明： navBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) navBar.shadowImage = UIImage() navBar.translucent = true

现在将模糊效果应用到该视图，这会产生模糊效果来自导航栏和状态栏的错觉。

请参阅this picture 以了解已达到的效果（抱歉，由于声誉限制，我还不能发布图片）。

希望这会有所帮助。

2015 年 5 月 28 日更新：

这就是我在 StoryBoard 中实现上述方法的方式：

在最顶层的层次结构中创建导航栏背景视图作为主视图的直接子视图。请注意，我已将它们包装到单个内容视图中。内容视图为红色，导航栏背景视图为半透明白色。

在导航栏背景视图上添加以下 4 个约束，如下所示：0 表示左、右和顶部约束，64 表示高度约束。

【讨论】：

非常好。我要试试这个。

你是如何在故事板结构中添加 UIView 的？您可以发布您的故事板和结构视图的屏幕截图吗？

嗨@ChrisHolloway，我已经用截图更新了我的答案。如果您需要进一步说明，请随时告诉我。

谢谢。我已经实现并将结果的屏幕截图添加到原始帖子中