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.

iPhone 6 uses @2x image assets and not R4 or something else because apple didn't provide suitable APIs for background images! The most direct way now is to create 2 assets and programatically load them — KKRocks, Apr 25 '17 at 06:09

Mitul Marsoniya · Answer 1 · 2017-04-25T06:48:28.257

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

Base on my research, If your navigation image as logo or text in middle then i get this solution other solution not work for me :) — Mitul Marsoniya, Apr 28 '17 at 15:45

score 0 · Answer 2 · answered Apr 25 '17 at 06:28

0

try this code in viewDidLoad

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

answered Apr 25 '17 at 06:28

Rekha.t

161
6
14

Your code doesn't worked for me. :( I am using self.navigationonteoller.navigationBar – Dheeraj D Apr 25 '17 at 08:09

score 0 · Answer 3 · answered Apr 25 '17 at 06:33

0

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

answered Apr 25 '17 at 06:33

Femina Brahmbhatt

654
1
8
16

I have tried using the code you have provided. It doesn't worked :( @Femina Brahmbhatt – Dheeraj D Apr 25 '17 at 08:13

score 0 · Answer 4 · answered Aug 04 '17 at 15:30

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

How to set background image for UINavigationBar on different iOS Devices

4 Answers4

Linked