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

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

【问题讨论】:

    标签: ios iphone objective-c uinavigationbar transparency


    【解决方案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
    
        //...
    }
    

    这让我意识到我实际上并不知道transparenttranslucent 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】:

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

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

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

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

            4. 我保留了 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),但这使它完全变黑。但这些项目仍然可见。
                            猜你喜欢
                            • 1970-01-01
                            • 1970-01-01
                            • 2014-11-05
                            • 1970-01-01
                            • 1970-01-01
                            • 1970-01-01
                            • 1970-01-01
                            • 1970-01-01
                            • 1970-01-01
                            相关资源
                            最近更新 更多