如何使用 iOS 11 为 UINavigationBar 设置背景渐变并喜欢大标题？

Question

In iOS 10, I could do this to make a background gradient:

let gradientColor = UIColor.gradientWithFrame(frame: navigationBar.bounds, colors: [.red, .blue])
navigationBar.barTintColor = gradientColor

Now, navigationBar.bounds returns the size of the UINavigationBar when it doesn't have large titles. This is apparent in this screenshot with the gradient repeating:

You can see that the gradient starts to repeat because the size returned by navigationBar.size returns the incorrect size.

Is there another way to set a gradient on UINavigationBar ?

Answer 1

You need to account for the status bar height which is 20 on my 6s device you can use UIApplication.shared.statusBarFrame.height and simply add this height to the frame.

also, I am setting the gradient by creating a UIImage from a CAGradientLayer so I could use the UIColor(patternImage:) method.

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    self.navigationController?.navigationBar.prefersLargeTitles = true  
    self.title = "Feed me Seymour"

    if let navFrame = self.navigationController?.navigationBar.frame {

        //HERE
        //Create a new frame with the default offset of the status bar
        let newframe = CGRect(origin: .zero, size: CGSize(width: navFrame.width, height: (navFrame.height + UIApplication.shared.statusBarFrame.height) ))

        let image = gradientWithFrametoImage(frame: newframe, colors: [UIColor.red.cgColor, UIColor.blue.cgColor])!

        self.navigationController?.navigationBar.barTintColor = UIColor(patternImage: image)

    }

}

func gradientWithFrametoImage(frame: CGRect, colors: [CGColor]) -> UIImage? {
    let gradient: CAGradientLayer  = CAGradientLayer(layer: self.view.layer)
    gradient.frame = frame
    gradient.colors = colors
    UIGraphicsBeginImageContext(frame.size)
    gradient.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

Answer 2

Try this:

    let gradientLayer = CAGradientLayer()
    var updatedFrame = self.navigationController!.navigationBar.bounds
    updatedFrame.size.height += view.window?.windowScene?.statusBarManager?.statusBarFrame.height ?? 0
    gradientLayer.frame = updatedFrame
    gradientLayer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
    gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
    gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)
    UIGraphicsBeginImageContext(gradientLayer.bounds.size)
    gradientLayer.render(in: UIGraphicsGetCurrentContext()!)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    self.navigationController!.navigationBar.setBackgroundImage(image, for: UIBarMetrics.default)

    let appearance = navigationController!.navigationBar.standardAppearance.copy()
    appearance.backgroundImage = image
    navigationController?.navigationBar.standardAppearance = appearance
    navigationController?.navigationBar.scrollEdgeAppearance = appearance  

Answer 3

我会将导航栏色调设置为“清除颜色”并将渐变添加到背景视图中。

Answer 4

Simply add extension to UIColor

extension UIColor {
    static func gradientColor(startColor: UIColor, endColor: UIColor, frame: CGRect) -> UIColor? {
        let gradient = CAGradientLayer(layer: frame.size)
        gradient.frame = frame
        gradient.colors = [startColor.cgColor, endColor.cgColor]
        gradient.startPoint = CGPoint(x: 0.0, y: 1.0)
        gradient.endPoint = CGPoint(x: 1.0, y: 1.0)
        UIGraphicsBeginImageContext(frame.size)
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        gradient.render(in: context)
        guard let image = UIGraphicsGetImageFromCurrentImageContext() else { return nil }
        UIGraphicsEndImageContext()
        return UIColor(patternImage: image)
    }
}

execute:

if let navFrame = self.navigationController?.navigationBar.frame {

    let newframe = CGRect(origin: .zero, size: CGSize(width: navFrame.width, height: (navFrame.height + UIApplication.shared.statusBarFrame.height) ))

    self.navigationController?.navigationBar.barTintColor = UIColor.gradientColor(startColor: .systemPink, endColor: .orange, frame: newframe)

}

and combine with start/end point to add gradient horizontal/vertical