ios - 如何向我的导航栏添加渐变配色方案？

Question

截至目前，我的导航栏只有一个 Logo 和一个按钮，但我正在尝试为其添加颜色。我正在尝试使用颜色渐变。我之前在同一个应用程序的菜单栏上做过这个，但我无法让它在我的导航栏上工作。我已经包含了一些代码，说明我是如何尝试实现它的，但它不起作用。

private func setupNavigationBar() {
    navigationController?.navigationBar.isTranslucent = false
    let gradientLayer = CAGradientLayer()
    gradientLayer.frame.size = view.frame.size
    gradientLayer.startPoint = CGPoint(x:0.0, y:0.0)
    gradientLayer.endPoint = CGPoint(x:1.0, y:0.0)
    //gradient colors to be used in gradient of menu bar
    let blue = UIColor(red: 64/255.0, green: 100/255.0, blue: 142/255.0, alpha: 1.0)
    let red = UIColor(red: 145/255.0, green: 82/255.0, blue: 89/255.0, alpha: 1.0)
    //let middle = UIColor(red: 107/255.0, green: 94/255.0, blue: 122/255.0, alpha: 1.0)
    gradientLayer.colors = [blue.cgColor, red.cgColor]
    navigationController?.navigationBar.backgroundColor = gradientLayer
    let imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 120, height: 40))
    imageView.widthAnchor.constraint(equalToConstant: 75.0).isActive = true
    let image = UIImage(named: "logo")
    imageView.image = image
    imageView.layer.cornerRadius = 10
    navigationItem.titleView = imageView

    let navButton = UIButton(frame: CGRect(x: 0, y: 0, width: 40, height: 10))
    let searchImage = UIImage(named: "side_menu")?.withRenderingMode(.alwaysOriginal)
    navButton.widthAnchor.constraint(equalToConstant: 32.0).isActive = true
    navButton.setBackgroundImage(searchImage, for: .normal)
    navButton.addTarget(self, action:  #selector(handleMore), for: .touchUpInside)
    navigationItem.leftBarButtonItem = UIBarButtonItem(customView: navButton)

}

Answer 1

使用此 UINavigationBar 扩展设置渐变颜色

extension UINavigationBar {
func setGradientBackground(colors: [UIColor], startPoint: CAGradientLayer.Point = .topLeft, endPoint: CAGradientLayer.Point = .bottomLeft) {
    var updatedFrame = bounds
    updatedFrame.size.height += self.frame.origin.y
    let gradientLayer = CAGradientLayer(frame: updatedFrame, colors: colors, startPoint: startPoint, endPoint: endPoint)
    setBackgroundImage(gradientLayer.createGradientImage(), for: UIBarMetrics.default)
 }
}

为渐变声明颜色数组

var colors = [#colorLiteral(red: 0.4549019608, green: 0.3137254902, blue: 0.7882352941, alpha: 1),#colorLiteral(red: 0.5019607843, green: 0.9294117647, blue: 0.9215686275, alpha: 1)]

在 ViewController 中添加此代码以在导航栏中设置图像

  let imageView = UIImageView(image: #imageLiteral(resourceName: "logo_small"))
      imageView.contentMode = .scaleAspectFit
      self.navigationItem.titleView = imageView

并在导航栏中添加UINavigationBar扩展

self.navigationController?.navigationBar.setGradientBackground(colors: self.colors)