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

Question

我在导航栏上添加了一个渐变层，并且还具有栏按钮项，就在 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

那么问题可能是什么？

Answer 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