透明的 iOS 导航栏答案

【问题标题】：Transparent iOS navigation bar透明的 iOS 导航栏
【发布时间】：2014-11-08 20:24:28
【问题描述】：

我正在创建一个应用程序，我在互联网上浏览过，我想知道他们是如何制作这样的透明 UINavigationBar：

我在我的 appdelegate 中添加了以下内容：

UINavigationBar.appearance().translucent = true

但这只是让它看起来像下面这样：

如何让导航栏像第一张图片一样透明？

【问题讨论】：

使用我不知道的代码，但如果你擅长 CSS，你可以使用框架（Pixate：freestyle.org），并且可以将 CSS 样式应用于导航栏： ) !

标签： ios iphone swift uinavigationbar

【解决方案1】：

您可以为半透明应用如下导航栏图像。

目标-C：

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                     forBarMetrics:UIBarMetricsDefault]; //UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.shadowImage = [UIImage new];////UIImageNamed:@"transparent.png"
self.navigationController.navigationBar.translucent = YES;
self.navigationController.view.backgroundColor = [UIColor clearColor];

斯威夫特 3：

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) //UIImage.init(named: "transparent.png")
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
self.navigationController?.view.backgroundColor = .clear

【讨论】：

当我设置背景图像时，它会删除 barTintColor？
不需要设置navigationController的backgroundColor
有了这个解决方案，我得到了一个黑色的导航栏，有什么想法吗？
不如预期。当你这样做时，你不会像 0.7 的 alpha 那样使墙壁透明，而且还覆盖状态栏。如果您在 iOS 13 上执行此操作，您将只有一个漂亮的矩形，其上方是状态栏 CRYSTAL CLEAR。问题的作者清楚而具体。
如何重新设置为默认颜色？

【解决方案2】：

快速解决方案

这是我找到的最好方法。您可以将其粘贴到您的 appDelegate 的 didFinishLaunchingWithOptions 方法中：

Swift 3 / 4

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = .clear
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().isTranslucent = true
    return true
}

Swift 2.0

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Override point for customization after application launch.
    // Sets background to a blank/empty image
    UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: .Default)
    // Sets shadow (line below the bar) to a blank image
    UINavigationBar.appearance().shadowImage = UIImage()
    // Sets the translucent background color
    UINavigationBar.appearance().backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.0)
    // Set translucent. (Default value is already true, so this can be removed if desired.)
    UINavigationBar.appearance().translucent = true

    return true
}

来源：Make navigation bar transparent regarding below image in iOS 8.1

【讨论】：

您的 Swift 3 解决方案只是让我的酒吧变成纯白色。
@JozemiteApps 尝试制作一个全新的 Xcode 项目并将代码粘贴进去。只需 3 分钟即可确认是我上面的代码还是您的项目的某些原因导致了这种情况。
我还有一个纯白色的导航栏，没有透明的导航栏
这很好用，谢谢！您知道如何实现它以使所需 ViewController 上的唯一导航栏是透明的吗？
@JoseRamirez 这可能是您看到的 viewController 的背景。您需要更改第一个视图的顶部约束以与超级视图对齐，而不是安全区域或边距。

【解决方案3】：

Swift 5 仅适用于当前视图控制器

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    // Make the navigation bar background clear
    navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.isTranslucent = true
}

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    // Restore the navigation bar to default
    navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
    navigationController?.navigationBar.shadowImage = nil
}

【讨论】：

不错的答案。谢谢克里斯。
工作时我还添加：self.navigationController?.navigationBar.backgroundColor = .clear

【解决方案4】：

Swift 3：透明导航栏的扩展

extension UINavigationBar {
    func transparentNavigationBar() {
    self.setBackgroundImage(UIImage(), for: .default)
    self.shadowImage = UIImage()
    self.isTranslucent = true
    }
}

【讨论】：

【解决方案5】：

Swift 4.2 解决方案：对于透明背景：

对于一般方法：

override func viewDidLoad() {
    super.viewDidLoad()

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

}

对于特定对象：

override func viewDidLoad() {
    super.viewDidLoad()

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

}

希望有用。

【讨论】：

navBar 指的是什么对象？
@SergeyGamayunov navBar 这里指的是 UINavigationBar 的对象。
这就是他的意思... let navBar = self.navigationController?.navigationBar

【解决方案6】：

我一直在努力解决这个问题，但在使用不同用户在此处提供的回复时遇到了问题。问题是 iOS 13+ 上的 NavigationBar 透明图像后面有一个白框

我的解决方案是这个

if #available(iOS 13, *) {
    navBar?.standardAppearance.backgroundColor = UIColor.clear
    navBar?.standardAppearance.backgroundEffect = nil
    navBar?.standardAppearance.shadowImage = UIImage()
    navBar?.standardAppearance.shadowColor = .clear
    navBar?.standardAppearance.backgroundImage = UIImage()
}

更新

感谢@TMin

如果您使用 tableView/CollectionView，您会注意到滚动时会出现 1 点阴影。添加 navBar?.scrollEdgeAppearance = nil 来摆脱这个阴影。

希望对遇到同样问题的人有所帮助

【讨论】：

此答案截至 2021 年 2 月 28 日是最新的
如果您使用 tableView/CollectionView ，您会注意到滚动时出现 1 点阴影。添加navBar?.scrollEdgeAppearance = nil 以摆脱这个阴影。
谢谢@TMin 我会用你的评论更新我的答案

【解决方案7】：

我能够以这种方式快速完成此任务：

let navBarAppearance = UINavigationBar.appearance()
let colorImage = UIImage.imageFromColor(UIColor.morselPink(), frame: CGRectMake(0, 0, 340, 64))
navBarAppearance.setBackgroundImage(colorImage, forBarMetrics: .Default)

我在 UIColor 类别中创建了以下实用程序方法：

imageFromColor(color: UIColor, frame: CGRect) -> UIImage {
  UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
  color.setFill()
  UIRectFill(frame)
  let image = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return image
}

【讨论】：

这应该是最佳答案！

【解决方案8】：

它对我有用：

    let bar:UINavigationBar! =  self.navigationController?.navigationBar
    self.title = "Whatever..."
    bar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    bar.shadowImage = UIImage()
    bar.alpha = 0.0

【讨论】：

【解决方案9】：

设置导航栏的背景属性，例如

navigationController?.navigationBar.backgroundColor = UIColor(red: 1.0, green: 0.0, blue: 0.0, alpha: 0.5)

（如果你没有导航控制器，你可能需要稍微改变一下，但这应该让你知道该怎么做。）

还要确保下面的视图实际上延伸到栏下方。

【讨论】：

这给了我以下信息：i.stack.imgur.com/GT3WV.png 我怎样才能让我发布的第一个链接（图片）更红一些
您可以使用 alpha 值并将其从 0.5 更改为 0.0 到 1.0 之间的任何值。正如我所说，确保下面的视图位于导航栏下方，否则您将看不到任何内容通过导航栏闪耀。如果您使用的是 Interface Builder，则可以拖动该视图的上边缘并将其与屏幕的上边缘对齐。

【解决方案10】：

在你的加载中添加这个

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 0.0)
//adjust alpha according to your need 0 is transparent 1 is solid

【讨论】：

【解决方案11】：

如果您希望能够在 swift 4 中以编程方式执行此操作，同时保持在同一视图上，

if change {
        navigationController?.navigationBar.isTranslucent = false
        self.navigationController?.navigationBar.backgroundColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
        navigationController?.navigationBar.barTintColor = UIColor(displayP3Red: 255/255, green: 206/255, blue: 24/255, alpha: 1)
    } else {
        navigationController?.navigationBar.isTranslucent = true
        navigationController?.navigationBar.setBackgroundImage(backgroundImage, for: .default)
        navigationController?.navigationBar.backgroundColor = .clear
        navigationController?.navigationBar.barTintColor = .clear
    }

但要记住的重要一点是单击情节提要中的此按钮。很长一段时间以来，我都遇到了跳跃显示的问题。确保你设置了这个：

然后，当您更改导航栏的半透明度时，无论导航栏的可见性如何，它都不会导致视图跳转，因为视图一直延伸到顶部。

【讨论】：

【解决方案12】：

对于那些寻找 OBJC 解决方案的人，在 App Delegate didFinishLaunchingWithOptions 方法中添加：

[[UINavigationBar appearance] setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
[UINavigationBar appearance].shadowImage = [UIImage new];
[UINavigationBar appearance].backgroundColor = [UIColor clearColor];
[UINavigationBar appearance].translucent = YES;

【讨论】：

【解决方案13】：

试试这个，如果你还需要支持ios7，它对我有用，它基于UItoolBar的透明度：

[self.navigationController.navigationBar setBackgroundImage:[UIImage new]
                                                  forBarMetrics:UIBarMetricsDefault];
    self.navigationController.navigationBar.shadowImage = [UIImage new];
    self.navigationController.navigationBar.translucent = YES;
    self.navigationController.view.backgroundColor = [UIColor clearColor];
    UIToolbar* blurredView = [[UIToolbar alloc] initWithFrame:self.navigationController.navigationBar.bounds];
    [blurredView setBarStyle:UIBarStyleBlack];
    [blurredView setBarTintColor:[UIColor redColor]];
    [self.navigationController.navigationBar insertSubview:blurredView atIndex:0];

【讨论】：

【解决方案14】：

您通过传递您喜欢在导航栏上设置的navigationController 和颜色来调用的实用程序方法。对于透明，您可以使用UIColor 类的clearColor。

对于目标 c -

+ (void)setNavigationBarColor:(UINavigationController *)navigationController 
                               color:(UIColor*) color {
   [navigationController setNavigationBarHidden:false animated:false];
   [navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
   [navigationController.navigationBar setShadowImage:[UIImage new]];
   [navigationController.navigationBar setTranslucent:true];
   [navigationController.view setBackgroundColor:color];
   [navigationController.navigationBar setBackgroundColor:color];
}

对于 Swift 3.0 -

class func setNavigationBarColor(navigationController : UINavigationController?, 
                                 color : UIColor) {
    navigationController?.setNavigationBarHidden(false, animated: false)
    navigationController?.navigationBar .setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
    navigationController?.navigationBar.shadowImage = UIImage()
    navigationController?.navigationBar.translucent = true
    navigationController?.view.backgroundColor = color
    navigationController?.navigationBar.backgroundColor =  color
}

【讨论】：

【解决方案15】：

写下这两行：

 navigationController?.navigationBar.isTranslucent = true
 navigationController?.navigationBar.backgroundColor = .clear

在 iOS 13 中为我工作

【讨论】：

【解决方案16】：

iOS 13.0+ 引入了 UINavigationBarAppearance，因此 iOS 13.0+ 出现此问题

用这个来解决。

更改导航栏外观使用 UINavigationBarAppearance 和 UIBarButtonItemAppearance 改变导航栏的外观。

// 使导航栏的标题为红色文本。

if #available(iOS 13, *) {
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = UIColor.systemRed
        appearance.titleTextAttributes = [.foregroundColor: UIColor.lightText] // With a red background, make the title more readable.
        navigationItem.standardAppearance = appearance
        navigationItem.scrollEdgeAppearance = appearance
        navigationItem.compactAppearance = appearance // For iPhone small navigation bar in landscape.
    }

【讨论】：

【解决方案17】：

这里没有一个答案完全适合我。这使得导航栏完全透明 - 在 iOS 14 和 iOS 11 上测试（目标 C）：

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

【讨论】：

【解决方案18】：

任何正在寻找 iOS 15+ 工作版本的人，这对我有用，因为 setBackgroundImage/shadowImage 的旧技术不再工作了。

让它透明：

func setTransparent() {
    backgroundColor = .clear
    isTranslucent = true

    standardAppearance.shadowColor = .clear
    standardAppearance.backgroundColor = .clear
    standardAppearance.backgroundEffect = nil
    scrollEdgeAppearance = standardAppearance
}

去除透明度：

func removeTransparent() {
    setBackgroundImage(nil, for: .default)
    shadowImage = nil
    backgroundColor = .white
    isTranslucent = false

    let appearance = UINavigationBarAppearance()
    appearance.configureWithOpaqueBackground()
    standardAppearance = appearance
    scrollEdgeAppearance = standardAppearance
}

【讨论】：

警告：UINavigationBarAppearance 仅适用于 iOS 13+

【解决方案19】：

我将导航栏配置实现为半透明并切换到 iOS 15 及更早版本的默认状态：

extension UINavigationBar {
    static let defaultBackgroundColor = UIColor.red
    static let defaultTintColor = UIColor.white
    
    func setTranslucent(tintColor: UIColor, titleColor: UIColor) {
        if #available(iOS 15, *) {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithTransparentBackground()
            appearance.titleTextAttributes = [.foregroundColor: titleColor]
            standardAppearance = appearance
            scrollEdgeAppearance = appearance
        } else {
            titleTextAttributes = [.foregroundColor: titleColor]
            setBackgroundImage(UIImage(), for: UIBarMetrics.default)
            shadowImage = UIImage()
        }
        isTranslucent = true
        self.tintColor = tintColor
    }
    
    func setDefaultState() {
        isTranslucent = false
        clipsToBounds = false
        
        if #available(iOS 15, *) {
            let appearance = UINavigationBarAppearance()
            appearance.configureWithOpaqueBackground()
            appearance.backgroundColor = UINavigationBar.defaultBackgroundColor
            appearance.titleTextAttributes = [.foregroundColor: UINavigationBar.defaultTintColor]
            
            UINavigationBar.appearance().standardAppearance = appearance
            UINavigationBar.appearance().scrollEdgeAppearance = appearance
        } else {
            setBackgroundImage(UIImage(), for: UIBarPosition.any, barMetrics: UIBarMetrics.defaultPrompt)
            shadowImage = UIImage()
            barTintColor = UINavigationBar.defaultBackgroundColor
            titleTextAttributes = [.foregroundColor: UINavigationBar.defaultTintColor]
        }
        
        tintColor = UINavigationBar.defaultTintColor
    }
}

【讨论】：

【解决方案20】：

这绝对适用于 swift 4/5 用户。

func setUpNavBar(){
    navigationItem.title = "Flick"
    navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
    self.navigationController?.navigationBar.shadowImage = UIImage()
    self.navigationController?.navigationBar.isTranslucent = true
    self.navigationController?.view.backgroundColor = UIColor.clear
    navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.white]
}

【讨论】：