使UINavigationBar透明


Answers:


635

如果有人想知道如何在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

迅速2

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

讨论区

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

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


29
在这里回答我自己的评论;消除影响的尝试:[self.navigationController.navigationBar setBackgroundImage:nil forBarMetrics:UIBarMetricsDefault]; self.navigationController.navigationBar.shadowImage = nil; self.navigationController.navigationBar.translucent = NO;
Johann Burgess 2015年

我只需要一个VC即可拥有透明的导航栏。退出该VC后,如何恢复为原始样式?
Guilherme,2015年

2
要从ViewController中在Swift中实现此目标,请执行以下操作: self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) self.navigationController?.navigationBar.shadowImage = UIImage() self.navigationController?.navigationBar.translucent = true
datayeah 2015年

还可以使用外观(iOS7 / 8)进行工作,请参见:gist.github.com/mpycio/ddbdea1adb6b86cf02f6
Mahakala

1
取消对我的影响仅部分起作用。因为执行此操作后,所有的表视图都具有太大的标题。应用范围内,这很奇怪。(我只希望对推入堆栈的一个控制器具有这种效果。)
Henning

29

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

6
在iOS 6中,您还需要删除导航栏阴影,否则它将看起来很奇怪。[[UINavigationBar appearance] setShadowImage: [[UIImage alloc] init]];
罗伯特

23

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

14

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

2
navigationController是一个可选属性,因此您需要对其进行解包。只需添加self.navigationController?.navigationBar,您就很好了
Daniel Galasko 2015年

10

这似乎可行:

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

navigationController.navigationBar.backgroundColor = [UIColor clearColor];

6
似乎在iOS 5中,您必须-drawRect:在适当的子类中(而不是在类别中)覆盖,然后将此子类用作导航栏。
Yang Meyer

9

完成上述其他人说的之后,即:

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

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

navigationController?.navigationBar.backgroundColor = .clear

等等!这似乎可以解决问题。


7

如果您使用最新的Beta iOS 13.4和XCode 11.4进行构建,那么可接受的答案将不再起作用。我发现了另一种方式,也许只是beta版软件中的一个错误,但我还是在这里写下来,以防万一

(速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
        }
    }
}

太棒了!只是在寻找解决方法!很棒!谢谢!
乔治

5

我知道这个主题很旧,但是如果人们想知道它是如何完成而不重载drawRect方法的。

这是您需要的:

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

1
对不起,这是不正确的。您仍然必须重写drawRect方法
-Sander

为什么会这样呢?它似乎在IOS 6 sim中工作。它在IOS 5中不起作用?navigationBar.backgroundColor似乎没有记录。
Cristi 2012年

5

以下代码扩展了为此线程选择的顶部答案,以摆脱底部边框并设置文本颜色:

  1. 该代码的最后两行编码设置了透明度。我从该线程中借用了该代码,并且效果很好!

  2. “ clipsToBounds”属性是我发现的代码,该代码摆脱了带有OR且未设置透明度的底部边框线(因此,如果您决定使用纯白色/黑色/等背景,则仍然没有边框线)。

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

  4. 我保留了barTintColor作为备份。我不知道为什么透明度不起作用,但是如果不起作用,我希望我的bg白色,就像以前那样

    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()

3

对于Swift 3.0:

override func viewDidLoad() {
    super.viewDidLoad()

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

3

C#/ Xamarin解决方案

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

2

尝试以下代码:

self.navigationController.navigationBar.translucent = YES;

1

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

1

在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

0

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


2
我的意思是前者。我尝试制作一个类别并覆盖UINavigationBar的drawRect方法(调用CGContextClearRect),但这使它完全变成黑色。这些项目仍然可见。
quano

0

这适用于Swift 2.0。

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

0

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

在项目中使用RRViewControllerExtension时,您只需要覆盖

-(BOOL)prefersNavigationBarTransparent;

在您的ViewController中。

导航栏透明


-2
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)
            }
        }
    }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.