使 UINavigationBar 透明

Question

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

Answer 1

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

In Objective-C

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

In swift 3 (iOS 10)

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

In swift 2

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

---

Discussion

将 translucent 设置为 由于 UINavigationBar 文档。我将在这里报告相关片段：

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

Answer 2

在 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];

Answer 3

从 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];

Answer 4

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

（swift 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
        }
    }
}

Answer 5

对于任何想要在 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

Answer 6

这似乎有效：

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

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

Answer 7

完成上面其他人所说的操作后，即：

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

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

navigationController?.navigationBar.backgroundColor = .clear

...等等瞧！这似乎成功了。

Answer 8

解决方案 - Swift 5 - iOS 13+

根据 文档，在 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

    //...
}

这让我意识到我实际上并不知道 透明 和半透明 RIP。

参考文献

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

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

< a href="https://www.lexico.com/en/definition/translucent" rel="nofollow noreferrer">https://www.lexico.com/en/definition/translucent

更新 08/10 /2021

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

Answer 9

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

这就是您所需要的：

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

Answer 10

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

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

2. “clipsToBounds”属性是我发现的代码，它摆脱了带有或不设置透明度的底部边框线（因此，如果您决定使用纯白色/黑色/等背景，仍然不会有边框行）。

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

4. 我将 barTintColor 保留为一个备份。我不知道为什么透明度不起作用，但如果不起作用，我希望我的背景像以前一样是白色的

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

Answer 11

对于斯威夫特 3.0：

override func viewDidLoad() {
    super.viewDidLoad()

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

Answer 12

C#/Xamarin 解决方案

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

Answer 13

尝试下面的代码：

self.navigationController.navigationBar.translucent = YES;

Answer 14

对我有用的另一种方法是子类化 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
}}

Answer 15

在 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

Answer 16

这适用于 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

Answer 17

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

Answer 18

这适用于 Swift 2.0。

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

Answer 19

检查 RRViewControllerExtension，它专门用于 UINavigation 栏外观管理。

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

-(BOOL)prefersNavigationBarTransparent;

在视图控制器中重写即可。

Answer 20

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