使 UINavigationBar 透明

Posted 2023-02-15

技术标签:

【中文标题】使 UINavigationBar 透明【英文标题】：Make UINavigationBar transparent 【发布时间】：2011-01-19 22:15:04 【问题描述】：

如何使 UINavigationBar 透明？虽然我希望它的栏项目保持可见。

【问题讨论】：

【参考方案1】：

解决方案 - Swift 5 - ios 13+

根据documentation，在您的 UIViewController 子类中：

override func viewDidLoad()

    super.viewDidLoad()
    
    let appearance = UINavigationBarAppearance()
    appearance.configureWithTransparentBackground()
    //appearance.backgroundColor = UIColor.clear
    
    navigationItem.compactAppearance = appearance
    navigationItem.scrollEdgeAppearance = appearance
    navigationItem.standardAppearance = appearance
    
    //...

为了清楚起见，这使得UINavigationBar 完全透明。条形按钮项仍然可见并且可以正常工作。

什么不起作用

override func viewDidLoad()

    super.viewDidLoad()
    
    navigationController?.navigationBar.isTranslucent = true
    navigationController?.navigationBar.isOpaque = false

    //...

这让我意识到我实际上并不知道transparent 和translucent RIP 之间的区别。

参考文献

https://developer.apple.com/documentation/uikit/uinavigationcontroller/customizing_your_app_s_navigation_bar

https://www.lexico.com/en/definition/transparent

https://www.lexico.com/en/definition/translucent

2021 年 8 月 10 日更新

在按照我提供的方式设置外观后更改navigationItem 栏按钮将重置外观，您必须再次执行此操作。

【讨论】：

解决方案可用性为 iOS 13+ (navigationItem.standardAppearance)【参考方案2】：

这适用于 Swift 5。

// Clear the background image.
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)

// Clear the shadow image.
navigationController?.navigationBar.shadowImage = UIImage()

// Ensure the navigation bar is translucent.
navigationController?.navigationBar.isTranslucent = true

【讨论】：

【参考方案3】：

如果您使用最新的测试版 iOS 13.4 和 XCode 11.4 构建，则接受的答案将不再有效。我找到了另一种方法，可能只是测试版软件的一个错误，但我把它写在那里，以防万一

（快速 5）

import UIKit

class TransparentNavBar :UINavigationBar 
    override func awakeFromNib() 
        super.awakeFromNib()
        self.setBackgroundImage(UIImage(), for: .default)
        self.shadowImage = UIImage()
        self.isTranslucent = true
        self.backgroundColor = .clear
        if #available(iOS 13.0, *) 
            self.standardAppearance.backgroundColor = .clear
            self.standardAppearance.backgroundEffect = .none
            self.standardAppearance.shadowColor = .clear

【讨论】：

太棒了！只是在寻找解决方法！效果很好！谢谢！谢谢！请注意，如果您已经通过UIAppearance 设置standardAppearance，则设置backgroundColor/backgroundEffect/shadowColor 可能不起作用，因为UINavigationBarAppearance 属性不适用于UIAppearance。相反，您需要创建自己的UINavigationBarAppearance 实例，根据需要设置属性，然后设置navigationBar.standardAppearance = myNewInstance。【参考方案4】：

在 Swift 4.2 中

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

（在 viewWillAppear 中），然后在 viewWillDisappear 中，撤消它，放

self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false

【讨论】：

【参考方案5】：

extension UINavigationBar 
var isTransperent: Bool 
        get 
            return false // Just to satisfy property
        
        set 
            if newValue == true 
                self.shadowImage   = UIImage()
                self.isTranslucent = true
                self.setBackgroundImage(UIImage(), for: .default)
            else
                self.shadowImage   = UIImage()
                self.isTranslucent = false
                self.setBackgroundImage(nil, for: .default)

【讨论】：

【参考方案6】：

如果有人想知道如何在 iOS 7+ 中实现这一点，这里有一个解决方案（也兼容 iOS 6）

在 Objective-C 中

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

在 Swift 3 (iOS 10) 中

self.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.isTranslucent = true

在 Swift 2 中

self.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.translucent = true

讨论

由于UINavigationBar 文档中讨论的行为，在导航栏上将translucent 设置为YES 可以解决问题。我将在这里报告相关片段：

如果您在具有不透明自定义背景图像的导航栏上将此属性设置为YES，则导航栏将对图像应用小于 1.0 的系统不透明度。

【讨论】：

在这里回答我自己的评论；撤消影响尝试：

[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault];     self.navigationController.navigationBar.shadowImage = nil;     self.navigationController.navigationBar.translucent = NO;

我只需要一个 VC 就有一个透明的导航栏。退出该 VC 后如何恢复到原始样式？要在 Swift 中从 ViewController 中实现这一点，请这样做：

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)         self.navigationController?.navigationBar.shadowImage = UIImage()         self.navigationController?.navigationBar.translucent = true

为我撤消效果只能部分起作用。因为在我这样做之后，我的表视图都有太大的标题。应用程序范围内，这很奇怪。（我只希望在我压入堆栈的一个控制器上使用此效果。）在较新的 iOS 版本中您也需要 navigationBar.standardAppearance.backgroundEffect = nil【参考方案7】：

勾选RRViewControllerExtension，专门用于UINavigation栏外观管理。

在您的项目中使用 RRViewControllerExtension，您只需要覆盖

-(BOOL)prefersNavigationBarTransparent;

在你的视图控制器中。

【讨论】：

【参考方案8】：

以下代码扩展了为该线程选择的最佳答案，以摆脱底部边框并设置文本颜色：

此代码的最后两行代码设置透明度。我从这个线程中借用了该代码，它运行良好！

“clipsToBounds”属性是我发现的代码，它在没有设置透明度的情况下删除了带有 OR 的底部边框线（因此，如果您决定使用纯白色/黑色/等背景代替，仍然会有没有边界线）。

“tintColor”行（第二行编码）将我的后退按钮设置为浅灰色

我保留了 barTintColor 作为备份。我不知道为什么透明度不起作用，但如果不起作用，我想要我的 bg white 就像我曾经拥有的那样

let navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.tintColor = UIColor.lightGray
navigationBarAppearace.barTintColor = UIColor.white
navigationBarAppearace.clipsToBounds = true
navigationBarAppearace.isTranslucent = true
navigationBarAppearace.setBackgroundImage(UIImage(), for: .default)
navigationBarAppearace.shadowImage = UIImage()

【讨论】：

【参考方案9】：

C#/Xamarin 解决方案

NavigationController.NavigationBar.SetBackgroundImage(new UIImage(), UIBarMetrics.Default);
NavigationController.NavigationBar.ShadowImage = new UIImage();
NavigationController.NavigationBar.Translucent = true;

【讨论】：

【参考方案10】：

对于任何想要在 Swift 2.x 中执行此操作的人：

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.translucent = true

或 Swift 3.x：

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

【讨论】：

navigationController 是一个可选属性，因此您需要将其解包。只需添加 self.navigationController?.navigationBar 就可以了【参考方案11】：

在做了上面其他人所说的之后，即：

navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: .default)
navigationController?.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.isTranslucent = true

... 我的导航栏仍然是白色的。所以我添加了这一行：

navigationController?.navigationBar.backgroundColor = .clear

...等等瞧！这似乎奏效了。

【讨论】：

【参考方案12】：

对于 Swift 3.0：

override func viewDidLoad() 
    super.viewDidLoad()

    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true

【讨论】：

【参考方案13】：

对我有用的另一种方法是继承 UINavigationBar 并将 drawRect 方法留空！！

@IBDesignable class MONavigationBar: UINavigationBar 


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func drawRect(rect: CGRect) 
    // Drawing code

【讨论】：

【参考方案14】：

这适用于 Swift 2.0。

navigationController!.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
navigationController!.navigationBar.shadowImage = UIImage()
navigationController!.navigationBar.translucent = true

【讨论】：

【参考方案15】：

来自IOS7：

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

【讨论】：

【参考方案16】：

试试下面这段代码：

self.navigationController.navigationBar.translucent = YES;

【讨论】：

【参考方案17】：

这似乎有效：

@implementation UINavigationBar (custom)
- (void)drawRect:(CGRect)rect 
@end

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

【讨论】：

似乎在 iOS 5 中，您必须在子类中覆盖 -drawRect:，而不是在类别中，然后将此子类用作导航栏。【参考方案18】：

在 iOS5 中，您可以这样做以使导航栏透明：

nav.navigationBar.translucent = YES; // Setting this slides the view up, underneath the nav bar (otherwise it'll appear black)
const float colorMask[6] = 222, 255, 222, 255, 222, 255;
UIImage *img = [[UIImage alloc] init];
UIImage *maskedImage = [UIImage imageWithCGImage: CGImageCreateWithMaskingColors(img.CGImage, colorMask)];

[nav.navigationBar setBackgroundImage:maskedImage forBarMetrics:UIBarMetricsDefault]; 
[img release];

【讨论】：

在 iOS 6 中您还需要移除导航栏阴影，否则看起来会很奇怪。 [[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];【参考方案19】：

我知道这个话题很老了，但是如果人们想知道它是如何在不重载 drawRect 方法的情况下完成的。

这是你需要的：

self.navigationController.navigationBar.translucent = YES;
self.navigationController.navigationBar.opaque = YES;
self.navigationController.navigationBar.tintColor = [UIColor clearColor];
self.navigationController.navigationBar.backgroundColor = [UIColor clearColor];

【讨论】：

对不起，这不正确。你仍然需要重写 drawRect 方法为什么会这样？它似乎在 IOS 6 sim 中工作。它在 IOS 5 中不起作用？ navigationBar.backgroundColor 似乎没有记录。【参考方案20】：

您的意思是完全透明，还是使用照片应用中的半透明黑色样式？后者可以通过将其barStyle 属性设置为UIBarStyleBlackTranslucent 来完成。前者……我不确定。如果您希望其上的项目仍然可见，您可能需要在栏的视图层次结构中进行一些挖掘并删除包含其背景的视图。

【讨论】：

我的意思是前者。我尝试创建一个类别并覆盖 UINavigationBar 的 drawRect 方法（调用 CGContextClearRect），但这使它完全变黑。但这些项目仍然可见。

以上是关于使 UINavigationBar 透明的主要内容，如果未能解决你的问题，请参考以下文章

如何使 UINavigationBar 背景透明？

如何在 iOS 8 中将 UIVisualEffectView 添加到 UINavigationBar？

将 TabView 放在 NavigationView 中使标题透明

透明UINavigationBar下的UIWebView

透明 UINavigationBar

导航栏标题中的多个叠加图像