Navigation bar image for iphone 5 and 6

Question

I'm trying to create an app for iphone 5, 6 and 6 plus.

I've added a custom image for my navigation bar, but there is a problem. In images.xcassets there is two slots 2x and 3x.

I already know that 2x is for iphone 5 and 6 and 3x is for 6 plus. If I put an image for iphone 5 in 2x slot it would be too small (when I emulate app on iphone 6) and if I put an image for phone 6 in that slot it would be too big (when I emulet app on iphone 5).

So how do I set up a navbar image for both iphone 5 and 6, if I one slot short? Do I have to use a condition there?

Answer 1

You can handle it from code like

Swift

var navBarImage: UIImage? = nil
if UIScreen.mainScreen().bounds().size.width == 375.0 {
    navBarImage = UIImage.imageNamed("yourimage-iphone6@2x").resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0))
}
else {
    if UIScreen.mainScreen().bounds().size.width == 414.0 {
        navBarImage = UIImage.imageNamed("yourimage-iphone6plus3x").resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0))
    }
    else {
        navBarImage = UIImage.imageNamed("yourimage-iPhone5").resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0))
    }
}
UINavigationBar.appearance().setBackgroundImage(navBarImage, forBarMetrics: UIBarMetricsDefault)

Objective c

UIImage *navBarImage =nil;
if ([[UIScreen mainScreen] bounds].size.width==375.0f) {
    navBarImage = [[UIImage imageNamed: @"yourimage-iphone6@2x"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
}
else if ([[UIScreen mainScreen] bounds].size.width==414.0f) {
    navBarImage = [[UIImage imageNamed: @"yourimage-iphone6plus3x"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];
}
else{
   navBarImage = [[UIImage imageNamed: @"yourimage-iPhone5"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

}

[[UINavigationBar appearance] setBackgroundImage:navBarImage forBarMetrics:UIBarMetricsDefault];

Answer 2

self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"logo.png"]];