How to set background image for UINavigationBar on different iOS Devices

Question

I want to set full image on UINavigationBar, for this I have:

@2x image (640 x 128)
@3x image (960 x 192)

Below Screenshot is the issue:

Please refer this yellow outline. This portion is cutting.

I have written this code to add image:

 override func viewDidLoad() {
        super.viewDidLoad()                   
self.navigationController?.navigationBar.setBackgroundImage(UIImage(named:"nav-bar-b"),for: .any, barMetrics: .default)
        }

Please help me to provide a better solution.

Answer 1

I have fixed this issue like this :-

Take navigation image base on device size otherwise destroyed navigation image.

iPhone 6P => //1242 × 191 pixels
iPhone 6 = > //750 × 128 pixels
iPhone 5 = > //640 × 128 pixels

func SetNavigationImage()
    {
        var navBackgroundImage:UIImage!

        if IS_IPHONE_6P
        {
            navBackgroundImage = UIImage(named: "nav-bar-b_1242×191") //1242 × 191 pixels
        }else if IS_IPHONE_6
        {
            navBackgroundImage = UIImage(named: "nav-bar-b_750×128")//750 × 128 pixels
        }
        else
        {
            navBackgroundImage = UIImage(named: "nav-bar-b_640×128")//640 × 128 pixels
        }
        UITabBar.appearance().layer.borderWidth = 0.0
        UITabBar.appearance().clipsToBounds = true
        UINavigationBar.appearance().isTranslucent = false
        UIApplication.shared.statusBarStyle = UIStatusBarStyle.lightContent
        UINavigationBar.appearance().setBackgroundImage(navBackgroundImage, for:.default)
        UINavigationBar.appearance().shadowImage = UIImage()
        UINavigationBar.appearance().tintColor = .white
    }

var IS_IPHONE_4_OR_LESS =  UIDevice.current.userInterfaceIdiom == .phone && ScreenSize.SCREEN_MAX_LENGTH < 568.0
var IS_IPHONE_5 = UIDevice.current.userInterfaceIdiom == .phone && ScreenSize.SCREEN_MAX_LENGTH == 568.0
var IS_IPHONE_6 = UIDevice.current.userInterfaceIdiom == .phone && ScreenSize.SCREEN_MAX_LENGTH == 667.0
var IS_IPHONE_6P = UIDevice.current.userInterfaceIdiom == .phone && ScreenSize.SCREEN_MAX_LENGTH == 736.0

Answer 2

try this code in viewDidLoad

UINavigationBar.appearance().setBackgroundImage(UIImage(named: "image")!.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch), for: .default)

Answer 3

1.self.navigationController.navigationBar.setBackgroundImage(image, forBarMetrics: .Default)

2.The height of navigation bar is changed from 44 points (88 pixels) to 64 points (128 pixels).

Answer 4

Create a resizeable image. So the image will be scaled vertically and horizontally to fit the navigation bar including the status bar.

For Swift 3:

if let image = UIImage(named: "imagefile") {
   let backgroundImage = image.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch)
   self.navigationController?.navigationBar.setBackgroundImage(backgroundImage, for: .default)
}

or

if let image = UIImage(named: "imagefile") {
   let backgroundImage = image.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch)
   UINavigationBar.appearance().setBackgroundImage(backgroundImage, for: .default)
}