向导航栏添加渐变将隐藏 iOS 13.0 + 中的栏按钮项目

Posted 2023-03-13

【中文标题】向导航栏添加渐变将隐藏 iOS 13.0 + 中的栏按钮项目

【英文标题】：Adding Gradient to the navigation bar will hide bar buttons items in iOS 13.0 +

【发布时间】：2021-05-17 07:37:22

【问题描述】：

我在导航栏上添加了一个渐变层，并且还具有栏按钮项，就在 ios 13.0 + 中，当我使用此渐变层时，我的栏按钮项将隐藏，当我滑动视图返回上一页时，我会看到它们，但是当全屏时我看不到它们，尽管我可以在旧的 iOS 版本中毫无问题地看到它们，也可以在 UI 调试中看到它们

extension UIImage 
static func getGradientImage(withColors colors: [UIColor], view: UIView) -> UIImage 
    let gradient = CAGradientLayer(layer: colors)
    gradient.frame = view.bounds
    gradient.locations = [0.0, 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    return UIImage.image(from: gradient) ?? UIImage()


 static func image(from layer: CALayer) -> UIImage? 
    UIGraphicsBeginImageContextWithOptions(layer.bounds.size,
                                           layer.isOpaque, UIScreen.main.scale)
    defer  UIGraphicsEndImageContext() 
    guard let context = UIGraphicsGetCurrentContext() else 
        return nil
    
    layer.render(in: context)
    return UIGraphicsGetImageFromCurrentImageContext()
 

所以这个是设置导航渐变层背景，也是在这个之后

  if #available(iOS 13.0, *) 
        let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = .clear
        appearance.titleTextAttributes = [.foregroundColor: UIColor.white]
        if let navBar = navigationController?.navigationBar 
            appearance.backgroundImage = UIImage.getGradientImage(withColors: [#colorLiteral(red: 0.9258083701, green: 0.4127946496, blue: 0, alpha: 1),#colorLiteral(red: 0.7787303329, green: 0.01916297711, blue: 0.1483061314, alpha: 1)], view: navBar)
        
        UINavigationBar.appearance().standardAppearance = appearance
        UINavigationBar.appearance().scrollEdgeAppearance = appearance
        UINavigationBar.appearance().compactAppearance = appearance
     else 
    
    
    self.navigationBackButtonTitle(str.back)
    let topTitle = UIBarButtonItem()
    topTitle.title = "Top Title"
    self.navigationItem.leftBarButtonItem = topTitle

那么问题可能是什么？

【问题讨论】：

layer.insertSublayer(gradient, at: 1)

我测试过也不好用

【参考方案1】：

渐变导航栏的最佳实践是为iOS 13设置渐变背景图片。通过图层添加会导致你问的问题。

基本上首先你需要从颜色中创建渐变图像。

    static func getGradientImage(withColors colors: [UIColor], view: UIView) -> UIImage 
    let gradient = CAGradientLayer(colors: colors)
    gradient.frame = view.bounds
    gradient.locations = [0.0, 1.0]
    gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
    gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
    return UIImage.image(from: gradient) ?? UIImage()


static func image(from layer: CALayer) -> UIImage? 
    UIGraphicsBeginImageContextWithOptions(layer.bounds.size,
                                           layer.isOpaque, UIScreen.main.scale)
    defer  UIGraphicsEndImageContext() 
    guard let context = UIGraphicsGetCurrentContext() else 
        return nil
    
    layer.render(in: context)
    return UIGraphicsGetImageFromCurrentImageContext()

之后，您需要设置导航栏背景图片与导航栏外观。

            let appearance = UINavigationBarAppearance()
        appearance.configureWithOpaqueBackground()
        appearance.backgroundColor = .clear
        if let navBar = navigationController?.navigationBar 
            appearance.backgroundImage = UIImage.getGradientImage(withColors: colors, view: navBar)
        
        navigationController?.navigationBar.standardAppearance = appearance
        navigationController?.navigationBar.scrollEdgeAppearance = appearance
        navigationController?.navigationBar.compactAppearance = appearance

【讨论】：

这使得导航栏没有渐变色清晰，但我认为这是正确的方法，但我必须更改这些代码才能正常工作

你在哪里设置导航栏外观它可以在didFinishLaunching选项中如果你在所有应用程序中使用或者如果你只使用单个视图控制器你可以在viewWillAppear或viewDidAppear@SaeedRahmatolahi

有意思，能不能分享下你写的代码块。因为我在我的应用程序上使用完全相同的用法并且它正在工作。你也可以在if let navBar 检查中放置一个断点以确保调用的函数吗？ @SaeedRahmatolahi

你能确保在 if let navBar 代码块上放置断点是否被调用？ @SaeedRahmatolahi

是的，都叫导航背景颜色只有红色