Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS 8 NavigationBar BackgroundImage

With iOS 8 the concept of just iPhone and iPad sizes along with portrait and landscape have changed and therefor setting the navigation bars background image isn't working the same. Currently i'm using the following code:

UIImage *NavigationPortraitBackground = [[UIImage imageNamed:@"nav-image-portrait"]
                                         resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

UIImage *NavigationLandscapeBackground = [[UIImage imageNamed:@"nav-image-landscape"]
                                          resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

[[UINavigationBar appearance] setBackgroundImage:NavigationPortraitBackground forBarMetrics:UIBarMetricsDefault];
[[UINavigationBar appearance] setBackgroundImage:NavigationLandscapeBackground forBarMetrics:UIBarMetricsCompact];

The bar metrics portion has been deprecated as of iOS 8. When starting up my app it simply repeats the bar image horizontally when on an iPhone 6 or 6 Plus. I've looked into image slices but i don't think thats the solution either.

portraitlandscape

like image 397
Chris Avatar asked Sep 26 '14 05:09

Chris


2 Answers

I found the solution. I needed to use the method resizableImageWithCapInsets:resizingMode: and set the resizingMode to UIImageResizingModeStretch, otherwise the image would still tile in the navigation bar.

Objective-C:

[[UIImage imageNamed:@"nav-image-portrait"]
                                         resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0) resizingMode:UIImageResizingModeStretch];

Swift 3 / 4:

UINavigationBar.appearance().setBackgroundImage(UIImage(named: "image")!.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch), for: .default)
like image 72
Chris Avatar answered Nov 15 '22 20:11

Chris


[[UINavigationBar appearance] setBackgroundImage:[[UIImage imageNamed:@"navbarimg.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)] forBarMetrics:UIBarMetricsDefault];

Use the above code it works.And use small size image (40*navigarbarheight) 40 is the width of the image

like image 36
Suresh Thoutam Avatar answered Nov 15 '22 22:11

Suresh Thoutam