如何在我的导航栏中添加渐变配色方案？

Question

As of right now my navigation bar just holds a logo and a button but I'm trying to add color to it now. I'm trying to use a color gradient. I've done this before on my menu bar in the same app but I can't get it to work on my navigation bar. I've included code some code of how I was trying to implement it but it doesn't work.

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

Status Bar Gradient in Swift 5

    let gradient = CAGradientLayer()

    gradient.startPoint = CGPoint(x:0.0, y:0.0)
    gradient.endPoint = CGPoint(x:1.0, y:0.0)

    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)
    gradient.colors = [blue.cgColor, red.cgColor]

    var frame = navigationController?.navigationBar.bounds
    frame.size.height += UIApplication.shared.statusBarFrame.size.height
    frame.origin.y -= UIApplication.shared.statusBarFrame.size.height
    gradient.frame = frame
    navigationController?.navigationBar.layer.insertSublayer(gradient, at: 1)

Answer 2

Use this UINavigationBar Extension for set gradient color

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

declare color array for gradient

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

In ViewController add this code for set image in navigationBar

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

And add UINavigationBar Extension in navigationBar

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