0

I am using Xcode storyboard to demo an app design (non-functional, I'm a designer and need to show for design purposes). So far I have created the necessary png's for navigation bar on top and the tab bar in portrait mode. My navigation bar is 640px × 88px for retina. So I presume I will need to create another png at 1136px x 88px correct? Same with the tabbar?

How can I show this in storyboard so that when I rotate the simulator it will use the larger image intended for landscape?

PressRay
  • 151
  • 1
  • 1
  • 6

1 Answers1

0

The best way to customise something universal (such as a navigation bar, that will probably be visible throughout more than one screen) is to use [UINavigationBar appearance]. You can assign it the background you want for portrait mode like this:

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"name_of_portrait_png"] forBarMetrics:UIBarMetricsDefault];

And for landscape:

[[UINavigationBar appearance] setBackgroundImage:[UIImage imageNamed:@"name_of_landscape_png"] forBarMetrics:UIBarMetricsLandscapePhone];

Also, I'm pretty sure these are customisations that you won't be able to do/see in your storyboard.

Stavash
  • 14,244
  • 5
  • 52
  • 80
  • Thanks, as long as it shows up on simulator it's okay. Would that code go in AppDelegate.m? Inside this block? - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions How about the Tabbar? Thanks – PressRay Jan 29 '13 at 07:13
  • Normally I'd say no but because it's a mock-up I think it's fine. Tab bar appearance is also customisable - check out this tutorial: http://felipecypriano.com/2012/02/27/how-to-customize-uitabbar-on-ios-5/ – Stavash Jan 29 '13 at 07:20
  • BTW, I wish more designers would take the initiative and ask questions like these. Kudos – Stavash Jan 29 '13 at 07:45
  • Thanks, Didn't seem to work for me for some reason though. I tested it with a new project > single view application, imported two Navigation bar png into Supporting Files, and placed those two lines of code into AppDelegate.m inside that first (BOOL) block. I ran the simulation but should I see that navigation bar show up immediately? (Sorry I'm new to Xcode..) The app is blank still. Thanks in advance. – PressRay Jan 29 '13 at 13:16
  • Duh, stupid me. I didn't add the Navigation Bar object earlier. I added it to the viewcontroller in Storyboard and the Navigation bar did show up, but not the landscape version when I rotated it. Just tiled across.. – PressRay Jan 29 '13 at 13:27
  • Hmmm... Maybe because this is an iPad version and the landscape bar changes graphic when running on an iPhone? In general, UINavigationBars do not resize on iPad, they are the same height in landscape and portrait so you might need to take care of this case differently (Perhaps a tile-able or stretchable image) – Stavash Jan 29 '13 at 13:31
  • I sized them both for iPhone actually and inserted them into an iPhone-only project. My files are as such: navigationbar.png (320x44) and navigationbar-landscape.png (480x44). And I plugged those filenames into the code you provided me. I'll continue to poke around but just wanted to let you know what I was did to try. – PressRay Jan 29 '13 at 13:44
  • Makes sense, although the dimensions for the landscape version are wrong - they should be 480x32 – Stavash Jan 29 '13 at 13:46
  • Found another interesting approach for you: http://ios-blog.co.uk/tutorials/app-design-tip-custom-uinavigationbar/ – Stavash Jan 29 '13 at 18:08