透明的 iOS 导航栏

我正在创建一个应用程序，我已经在互联网上浏览，我想知道他们如何使这个透明的 UINavigationBar 像这样:

enter image description here

我在我的应用程序代表中添加了以下内容:

UINavigationBar.appearance().translucent = true

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

enter image description here

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

206330 次浏览
小开
最佳答案

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

目标 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
小开

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

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

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

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

小开

试试这个，如果你也需要支持 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];
小开

我很快就完成了这件事:

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
}
小开

迅捷解决方案

这是我找到的最好的方法，你可以把它粘贴到你的 应用程序代表的 didFinishLaunchingWithOptions方法中:

斯威夫特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
}

来源: 在 iOS 8.1中使导航栏对于下面的图像透明

小开

对我有用的是:

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

Swift 3: 透明导航栏的扩展

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

实用工具方法，通过传递导航控制器调用，并在导航栏上设置颜色。对于 透明的，可以使用 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
}
小开

如果您希望能够在 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
}

需要记住的一件重要的事情是点击故事板中的这个按钮。我对跳跃显示器有很长一段时间的问题。确保你设置了这个:enter image description here

然后，当你改变导航栏的半透明度时，它不会导致视图跳转，因为视图一直延伸到顶部，而不管导航栏是否可见。

小开

Swift 4.2解决方案: 透明背景:

  1. 一般方法:

    override func viewDidLoad() {
super.viewDidLoad()


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


}

  2. For Specific Object:

    override func viewDidLoad() {
super.viewDidLoad()


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


}

Hope it's useful.

小开

对于那些寻找 OBJC 解决方案的人，应用程序代表 diFinishLaunchingWithOptions 方法中添加:

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

把这个添加到你的确实负载

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
小开

仅适用于当前视图控制器的 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
}
小开

我一直在研究这个问题，我在使用不同用户提供的响应时遇到了一个问题。问题是在 iOS13 + 上我的导航栏透明图像后面有一个白色的盒子

enter image description here

我的解决办法就是这个

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点阴影。添加导航栏？.ScrollEdge 外观 = nil 来摆脱这个阴影。

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

小开

写下这两行:

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

我在 iOS13上用过

小开

这里没有一个答案对我完全有效。这使得导航条在 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];
小开

IOS 13.0 + 引入了 UINavigationBar卖相，因此，这个问题在 iOS 13.0 + 上发生

用这个解决。

更改导航栏外观 使用 UINavigationBar卖相和 UIBarButtonItem卖相来更改导航栏的卖相。

//使用红色文本创建导航栏的标题。

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.
}
小开

任何寻找 iOS15 + 工作版本的人，这是我的工作，因为旧的技术与 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
}
小开

我实现的导航栏配置是半透明的，在 iOS15和更老的版本中切换到默认状态:

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
}
}
小开

这对于快速的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]
}
小开

IOS15版本

extension UIViewController {


func clearNavigationBar(clear: Bool) {
if clear {
let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()
self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
} else {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
self.navigationController?.navigationBar.standardAppearance = appearance
self.navigationController?.navigationBar.scrollEdgeAppearance = appearance
}
}
}




class ViewController: UIViewController {


override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
clearNavigationBar(clear: true)
}
    

override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
clearNavigationBar(clear: false)
}
}
小开

首先是 iOS 版本

if #available(iOS 15.0, *) {
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()
appearance.backgroundImage = UIColor.clear.imageWithColor(width: UIScreen.main.bounds.size.width, height: 84)
appearance.shadowImage = UIImage()
appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.black ,NSAttributedString.Key.font : UIFont(name: "SF UI Display Semibold", size: 18) ?? UIFont()]
appearance.titlePositionAdjustment = UIOffset(horizontal: 0, vertical: 2)
self.navigationBar.standardAppearance = appearance
} else {
self.navigationBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
self.navigationBar.shadowImage = UIImage()
self.navigationBar.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.black ,NSAttributedString.Key.font : UIFont(name: "SF UI Display Semibold", size: 18) ?? UIFont()]
self.navigationBar.setTitleVerticalPositionAdjustment(2, for: UIBarMetrics.default)
}




func imageWithColor(width: CGFloat, height: CGFloat) -> UIImage {
let size = CGSize(width: width, height: height)
return UIGraphicsImageRenderer(size: size).image { rendererContext in
self.setFill()
rendererContext.fill(CGRect(origin: .zero, size: size))
}
}

提交答案