Question

截至目前，我的导航栏仅包含徽标和按钮，但是我现在正在尝试为其添加颜色。我正在尝试使用颜色渐变。我之前在同一应用程序的菜单栏中完成了此操作，但无法在导航栏上使用它。我已经在代码中包含了一些有关我如何实现它的代码，但是它不起作用。

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

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

使用此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中，将此代码添加到NavigationBar中的设置图像

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

并在NavigationBar中添加UINavigationBar扩展名

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

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

2 个答案: